對比requirejs更好的理解seajs

Harpsichord1207 發(fā)布于2019-08-22 11:12 / 1869人閱讀

摘要：遵循規(guī)范，遵循規(guī)范。很多時候我們想在執(zhí)行方法的時候再去加載，而不是提前在頁面加載的時候就把加載。匹配到時不加載。所以，達到了用到時再去異步加載并執(zhí)行的目的。

seajs遵循CMD規(guī)范，requirejs遵循AMD規(guī)范。AMD規(guī)范是預(yù)加載，CMD規(guī)范是賴加載。

下文舉例假設(shè)有文件 b.js, c.js如下

//b.js
define(function(require, exports, module){
    console.log("b is loaded")

    function run(){
        console.log("b run");
    }
    exports.run = run;
})

//c.js
define(function(require, exports, module){
    console.log("c is loaded")

    function run(){
        console.log("c run");
    }
    exports.run = run;
})

1. seajs對依賴模塊只加載不執(zhí)行，requirejs對依賴模塊既加載也執(zhí)行

運行代碼：

// seajs



    seajs
    







// requirejs



    requirejs
    







// a.js
define(["b"], function(){
})

運行結(jié)果：

seajs：

控制臺無輸出

requirejs：

控制臺：

2. seajs ，requirejs在 require文件時既加載也執(zhí)行

//a.js
define(function(require, exports, module){
    var b = require("b")
})

3. seajs可以在任意處直接require文件，無需提前寫依賴模塊；一旦提前寫了任意一個依賴模塊，下面的所有require的使用必須保證也有其對應(yīng)的依賴模塊

seajs可以直接如下使用，無需寫依賴["b"]：

//a.js
define(function(require, exports, module){
    var b = require("b")
})

或

define(["b"], function(require, exports, module){
    var b = require("b")
})

運行結(jié)果：

控制臺：b is loaded

假如 a.js 依賴了另一個 c.js，則在 a.js 中使用 require("b") 時必須也寫上依賴["b"]，否則b.js將因為查找不到而不會加載

define(["c"], function(require, exports, module){
    var b = require("b")
})

運行結(jié)果：

控制臺無輸出（不會輸出c is loaded, 因為沒有require("c") )

如果此時我們執(zhí)行b.run()

define(["c"], function(require, exports, module){
    var b = require("b")
    b.run()
})

控制臺將會報錯，因為此時b為null：

此時正確寫法應(yīng)該寫上依賴 ["b"]：

define(["c", "b"], function(require, exports, module){
    var b = require("b")
    b.run()
})

運行結(jié)果：

結(jié)論：

對于seajs,如果不寫依賴那就一個都不要寫，一旦寫了，下面所有require的地方都需要提前在頭部寫上依賴

requirejs的依賴寫法如下：

define(["c", "b"], function(c, b){
    var b = require("b")
    b.run()
})

或

define(function(require, exports, module){
    var b = require("b")
    b.run()
})

//錯誤寫法
define(["c"], function(c){
    var b = require("b")
    b.run()
})

4. seajs的require.async在執(zhí)行到使用位置的時候才去異步加載

seajs：

如下例：

// a.js
define(function(require, exports, module){
    document.getElementById("btn").addEventListener("click",       function(){
　　　　 document.getElementById("btn").innerHTML = "btn is clicked"
        init()
    })
    
    function init(){
        var b = require("b");
        b.run()
    }
})

運行結(jié)果：

控制臺無輸出

點擊OK按鈕， b.js 加載并執(zhí)行b.js和run方法：

大家注意到，在未點擊按鈕之前，雖然沒有執(zhí)行init方法，但b.js依然被提前加載了進來，但沒有被執(zhí)行（沒有輸出b is loaded）。

很多時候我們想在執(zhí)行init方法的時候再去加載b.js，而不是提前在頁面加載的時候就把b,js加載。

這時候就需要用到require.async，如下：

//a.js
define(function(require, exports, module){
    document.getElementById("btn").addEventListener("click", function(){
        document.getElementById("btn").innerHTML = "btn is clicked"
        init()
    })
    
    function init(){
        require.async("b", function(b){
            b.run()
        });
    }
})

這時候運行結(jié)果：

b.js沒有被加載：

控制臺無輸出：

點擊OK按鈕：

b.js被加載

控制臺輸出：

這是因為當(dāng)執(zhí)行一個js時，seajs會先去查找匹配require，然后加載相應(yīng)資源，但不執(zhí)行。匹配到require.async時不加載。

所以，require.async達到了用到時再去異步加載并執(zhí)行的目的。

小問題：

如果是requirejs執(zhí)行下面代碼：

//a.js
define(function(require, exports, module){
    document.getElementById("btn").addEventListener("click", function(){
        document.getElementById("btn").innerHTML = "btn is clicked"
        init()
    })
    
    function init(){
        var b = require("b");
        b.run()
    }
})

資源如何加載？控制臺又會輸出什么呢？點擊ok按鈕又會輸出啥？
答：資源加載了a.js, b.js，控制臺輸出：b is loaded，點擊OK按鈕控制臺繼續(xù)輸出：b run

總結(jié)：

seajs對依賴模塊只加載不執(zhí)行，requirejs對依賴模塊加載并執(zhí)行

seajs ，requirejs在 require具體文件時既加載也執(zhí)行

seajs可以在任意處直接require文件，無需提前寫依賴模塊；一旦提前寫了任意一個依賴模塊，下面的所有require的使用必須保證也有其對應(yīng)的依賴模塊

seajs的require.async在執(zhí)行到使用位置的時候才去異步加載