[工具配置]使用requirejs模块化开发多页面一个入口js的使用方式

[⼯具配置]使⽤requirejs模块化开发多页⾯⼀个⼊⼝js的使⽤⽅

式

描述

知道requirejs的都知道，每⼀个页⾯需要进⾏模块化开发都得有⼀个⼊⼝js⽂件进⾏模块配置。但是现在就有⼀个很尴尬的问题，如果页⾯很多的话，那么这个data-main对应的⼊⼝⽂件就会很多。理论这样其实也没什么，但是到后⾯⽤grunt进⾏合并压缩就会有很多⼊⼝js，虽然这个⼊⼝js都把配置的模块内容都压缩到⾥⾯了，但是各个⼊⼝合并压缩后的⽂件中其实都有很多重合的代码，所以考虑到这个就想到把所以的⼊⼝⽂件都统⼀了，使⽤⼀个，到时候⽤grunt合并压缩也只有这么⼀个⼊⼝⽂件，也很⽅便。

实现原理

1.页⾯引⼊requirejs 和 设置id和当前页⾯信息的属性

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

2、编写require.config.js 根据不同的页⾯去初始化不同的页⾯信息

/**

* 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、定义模块，实现初始化init⽅法进⾏事件监听和页⾯信息初始化

define(['jquery', "common"], function ($, common) {

var newCtrl = {};

newCtrl.init = function (page) {

("开始初始化页⾯信息");

};

newCtrl.login = function () {};

return newCtrl;

});