How to use requirejs to modularize one entry for multiple pages?-JS Tutorial-php.cn

How to use requirejs to modularize one entry for multiple pages?

零下一度

Release： 2017-06-26 09:51:48

Original

1641 people have browsed it

Description

Everyone who knows requirejs knows that every page that needs modular development must have an entry js file for module configuration. But now there is a very embarrassing problem. If there are many pages, then there will be many entry files corresponding to the data-main. In theory, this is okay, but when you use grunt to merge and compress it later, there will be many entry js. Although this entry js compresses all the configured module contents, there are actually many entries in the merged and compressed files of each entry. Overlapping codes, so taking this into consideration, I thought of unifying all the entry files and using one. When the time comes, using grunt to merge and compress, there will only be one entry file, which is also very convenient.

Implementation principle

1. The page introduces requirejs and sets the attributes of id and current page information

<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>

Copy after login

2. Write require.config.js according to Different pages initialize different page information

/**
 * 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;
        }
    });
});

Copy after login

3. Define the module and implement the initialization init method for event monitoring and page information initialization

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

Copy after login

The above is the detailed content of How to use requirejs to modularize one entry for multiple pages?. For more information, please follow other related articles on the PHP Chinese website!