首页 > 代码库 > 项目总结二:模块管理之requireJS

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

项目开发前期,对究竟用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="http://www.mamicode.com/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 onl oad() {

	}
	
	function groupOnChange(){	

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

  

具体区别详见:

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

  

 

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