對比requirejs更好的理解seajs

seajs遵循CMD規範，requirejs遵循AMD規範。AMD規範是預載入，CMD規範是賴載入。

下文舉例假設有文件 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對依賴模塊只載入不執行，requirejs對依賴模塊既載入也執行

運行代碼：

// seajs

OK

// requirejs

OK

// a.js

define(["b"], function(){

})

運行結果：

seajs：

控制台無輸出

requirejs：

控制台：

2. seajs ，requirejs在 require文件時既載入也執行

//a.js

define(function(require, exports, module){

var b = require("b")

})

requirejs:

控制台：b is loaded

seajs:

控制台：b is loaded

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

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

//a.jsdefine(function(require, exports, module){

var b = require("b")

})或

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

var b = require("b")

})

運行結果：

控制台：b is loaded

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

define(["c"], function(require, exports, module){

var b = require("b")

})

運行結果：

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

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

define(["c"], function(require, exports, module){

var b = require("b")

b.run()

})

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

此時正確寫法應該寫上依賴 ["b"]：

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

var b = require("b")

b.run()

})

運行結果：

結論：

對於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在執行到使用位置的時候才去非同步載入

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()

}

})

運行結果：

控制台無輸出

點擊OK按鈕， b.js 載入並執行b.js和run方法：

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

很多時候我們想在執行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()

});

}

})

這時候運行結果：

b.js沒有被載入：

控制台無輸出：

點擊OK按鈕：

b.js被載入

控制台輸出：

這是因為當執行一個js時，seajs會先去查找匹配require，然後載入相應資源，但不執行。匹配到require.async時不載入。

所以，require.async達到了用到時再去非同步載入並執行的目的。

小問題：

如果是requirejs執行下面代碼：

//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按鈕控制台繼續輸出：b run

(選擇「答」後面的部分查看答案)

總結：

1. seajs對依賴模塊只載入不執行，requirejs對依賴模塊載入並執行

2. seajs ，requirejs在 require具體文件時既載入也執行

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

4. seajs的require.async在執行到使用位置的時候才去非同步載入

本文demo：

https://github.com/saysmy/seajs-requirejs-demo

轉自:博客園

中公優就業 幫你成就職業夢：

IT教育專業培訓：https://www.ujiuye.com/

IT教育勤工儉學計劃：http://www.ujiuye.com/zt/jyfc/?wt.bd=lyh

大數據時代下做java開發工程師：https://www.ujiuye.com/zt/java/?wt.bd=lyh

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！