Fork me on GitHub

javascript模块化---requirejs

requirejs是异步执行

为什么会出现模块化
1.不定什么时候,自己就将全局变量改变了
2.函数名的冲突
3.依赖关系不好管理
如果b.js依赖a.js那么b必须放在a的下面
解决的办法
1.自执行函数来包装代码
mod=function(){
    var a,b;
    return {
        add:function(){
            a+b+s;
        },
        form:function(){
        }
    }
}();
2.jquery风格的匿名自执行函数
(function(window){
})(window);

最后模块化形成是
AMD
a.js
define(function(){
});
b.js
define(function(){
});
main.js
require(['a','b'],function(a,b){    
这种执行转态会将b提前预加载一遍,当前提有多个js文件的时候,就都要全部预加载一遍,所以这个的效率不是很好。
解决的办法是:
define(function(){
    require(['a',function(a){
     a.hello();
    }]);
    $("#b").click(function(){
        require(['b'],function(b){
            b.hello();
        });
    });
});
AMD叫做异步模块定义
require.js语法
define(id,dependencies,factory);
id可选的参数 用来定于模块的标识
dependencies当前模块依赖的模块名称数组
factory模块化初始化要执行函数或者对象

在页面中使用require函数加载模块
require([dependencies],function(){})

AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块
1.定义无依赖的模块
define(function(){
});
require.config({//定义路径
    baseurl:"script/lib",
    paths:{
    }
});
require(["app/"],function(){
});
2.定义有依赖的模块
define(['a'],function(a){})
require.config({
});
require(["app/"],function(){
});
一些总结和一个demo地址:https://github.com/GainLoss/summary/tree/master/%E5%81%8F%E5%83%BB%E7%9A%84%E7%9F%A5%E8%AF%86/%E6%A8%A1%E5%9D%97%E5%8C%96

posted @ 2016-08-11 14:52  zhang_yx  阅读(199)  评论(0编辑  收藏  举报