项目总结二：模块管理之requireJS

Posted 2020-09-20

项目开发前期，对究竟用requireJS 还是sea.js 进行讨论，最后采用requireJS，但是后期遇到了问题——当谷歌地图不能加载时，整个页面卡死的状况。

requirejs 的作用：

1. 防止js加载阻塞页面渲染
2. 模块化加载js

①首先创建一个main.js，通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库：

requirejs.config({
            baseUrl : ‘‘,
            paths : {
                "jquery" : "../webres/scripts/jquery.1.11.3.min",
                "jqueryui":"../webres/jqueryUI/jqueryui-1.10.4",
                "bootstrap" : "../webres/bootstrap/js/bootstrap.min",
                "bootstrapTable" : "../webres/bootstrap-table/bootstrap-table.min"
            },
            shim : {
                drag : {
                    deps : [ ‘jquery‘ ]
                },
                bootstrap : {
                    deps : [ ‘jquery‘ ]
                },
                bootstrapTable : {
                    deps : [ ‘jquery‘, "bootstrap" ]
                }
            
            }
        });

②最好是在公共页面中引用：

<script data-main="js/main" src="js/require.min.js"></script>

baseUrl:根路径

data-main属性,使指定的js在加载完reuqire.js后,把require.config的配置加到页面中 ，然后页面中就可以直接使用require来加载所有的短模块名

data-main还有一个重要的功能，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径，如上面的data-main="js/main"设定后，我们在使用require([‘jquery‘])后(不配置jquery的paths)，require会自动加载js/jquery.js这个文件，而不是jquery.js，相当于默认配置了baseUrl：js

shim:指定了模块名称和它的依赖数组，上面我们的drag插件依赖于jquery框架。通过这种方式，就可以使用requireJS完成jquery和其插件的加载。

③define函数定义了一个模块

define(function(require, exports, module) {	
    var ajaxFun = require(‘ajaxFun‘);   
    function mainfunc() {
       
      
    }
    module.exports = mainfunc;
 });    

　

还有一种写法：

define(function(require, exports, module) {	
	function onload() {

	}
	
	function groupOnChange(){	

	}	
	exports.onload = onload;
	exports.groupOnChange = groupOnChange;
});

　　

具体区别详见：

http://www.cnblogs.com/pigtail/archive/2013/01/14/2859555.html