Comment utiliser requirejs pour modulariser une entrée pour plusieurs pages ?

Description

Tous ceux qui connaissent requirejs savent que chaque page nécessitant un développement modulaire doit avoir un fichier js d'entrée pour la configuration du module. Mais maintenant, il y a un problème très embarrassant. S'il y a beaucoup de pages, alors il y aura de nombreux fichiers d'entrée correspondant aux données principales. En théorie, ce n'est pas grave, mais lorsque vous utilisez grunt pour le fusionner et le compresser plus tard, il y aura de nombreuses entrées js. Bien que cette entrée js compresse tout le contenu du module configuré, il existe en fait de nombreuses entrées dans les fichiers fusionnés et compressés de chacun. Codes qui se chevauchent, donc compte tenu de cela, j'ai pensé à unifier tous les fichiers d'entrée et à en utiliser un. Le moment venu, en utilisant Grunt pour fusionner et compresser, il n'y aura qu'un seul fichier d'entrée, ce qui est également très pratique.

Principe de mise en œuvre

1. La page présente requirejs et définit les attributs de l'identifiant et les informations de la page actuelle

<script src="/res/js/require.js?1.1.11" data-main="/res/js/require.config" id="current-page" current-page ="news" target-module="/res/js/module/newsCtrl"  defer async="true" ></script>

2. config.js pour initialiser différentes informations de page en fonction de différentes pages

/**
 * 1、所有页面使用公共的require配置
 * 2、根据current-page去加载相应地模块，不需要的模块不要去加载
 * 3、每个模块都要按约定去对外暴露一个init的初始化方法，用于页面信息加载时间监听
 * 
 */require.config({　
    urlArgs: "ver=1.0_" + (new Date).getTime(),　　　
    paths: {　　　　　　"jquery": "/res/js/base/jquery-1.11.3.min","vue":'/res/js/base/vue.min',"common": "/res/js/widgets/common"},
    shim: {'scroll': {　　　　　　
            deps: ['jquery'],
            exports: 'jQuery.fn.scroll'　　　　
        },'vue':{
            exports:'vue'},'common':['jquery']
    }
});


require(["jquery"], function ($) {
    require(["common"], function (common) {var currentPage = $("#current-page").attr("current-page");var targetModule = $("#current-page").attr("target-module");if (targetModule) {// 页面加载完毕后再执行相关业务代码比较稳妥$(function () {
                require([targetModule], function (targetModule) {// 不要在这里写业务代码//全部统一调用init方法//也就是每个模块都暴露一个init方法用于事件监听，页面内容加载等                    targetModule.init(currentPage);
                });
            });return;
        }
    });
});

3 Définir le module et implémenter la méthode d'initialisation d'initialisation pour la surveillance des événements et l'initialisation des informations de page

define(['jquery', "common"], function ($, common) {　　　　var newCtrl = {};
    newCtrl.init = function (page) {
        common.info("开始初始化页面信息");
    };
    newCtrl.login = function () {};return newCtrl;
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!