javascript模塊化---requirejs

requirejs是異步執行jquery

爲何會出現模塊化
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%96git

相關文章
相關標籤/搜索