對比requirejs更好的理解seajs

Harpsichord1207 發布于2019-08-22 11:12 / 1863人閱讀

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

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



    seajs
    







// requirejs



    requirejs
    







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

運行結果：

seajs：

控制臺無輸出

requirejs：

控制臺：

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

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

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

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

//a.js
define(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

總結：

seajs對依賴模塊只加載不執行，requirejs對依賴模塊加載并執行

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

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

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

云服務器 GPU云服務器數據如何更好的分析比java更好的語言比更好的深圳服務器 Requirejs

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91983.html

JavaScript模塊化發展

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到所有依賴加載完成之后前置依賴，這個回調函數才會運行。如果將前面的代碼改寫成形式，就是下面這樣定義了一個文件，該文件依賴模塊，當模塊加載完畢之后執行回調函數，這里并沒有暴露任何變量。模塊化是我們日常開發都要用到的基本技能，使用簡單且方便，但是很少人能說出來但是的原因及發展過程。現在通過對比不同時期的js的發展，將JavaScript模...

mengbo 2019-08-22 18:05 評論0 收藏0
seajs和requirejs的那些事兒

摘要：遵循的是異步模塊定義規范，遵循的是通用模塊定義規范。規范的不同，導致了兩者的不同。在嘗試讓第三方類庫修改自身來支持，目前只有少數社區采納。是沒有明顯的，是明顯沒有。無這方面的支持。發布之后發現存在一個顯示的問題，大家可以移步到我的簡書參考，謝謝大家！！！我的簡書《seajs和requirejs技術指導文檔》昨天到今天，老衲翻閱數十篇技術文檔，為了搞明白seajs（CMD）和 req...

zorpan 2019-08-22 10:44 評論0 收藏0
require.js構建優化

摘要：未構建之前，全部分開加載。的優化，得再看下的示例，然后再寫篇筆記記錄下來。想摸透javascript模塊化編程是怎么一回事，在seajs和requirejs之間兜兜轉轉，看了許多相關資料和文章，算是大致理清它們的異同，撇開requirejs加載方式的另類（其實目前我暫時還沒去感受），于寫法，比較喜歡requirejs的寫法，這個比較主觀，這也得益于阮一峰大大那篇Javascript模...

yacheng 2019-08-21 12:22 評論0 收藏0
Javascript模塊全攬

摘要：要求模塊編寫必須在真正的代碼之外套上一層規定的代碼包裝，樣子看起來是這樣的模塊代碼通過傳遞一個簽名為的回調函數給函數，就可以把需要注入的變量和函數注入到模塊代碼內。之前寫的文章急速Js全棧教程得到了不錯的閱讀量，霸屏掘金頭條3天，點贊過千，閱讀近萬，甚至還有人在評論區打廣告，可見也是一個小小的生態了；）。看來和JS全棧有關的內容，還是有人頗有興趣的。 showImg(https://...

lily_wang 2019-08-23 11:41 評論0 收藏0
seajs 模塊化編程js代碼

摘要：模塊初始化時，會調用且僅調用一次該工廠函數。用來向外提供模塊的除了給對象增加成員，還可以使用直接向外提供可簡化為函數用來訪問其他模塊提供的異步加載模塊，并在加載完成后執行回調函數使用的內部機制來解析并返回模塊路徑。手冊的模塊化插件 seajs是我剛入門前端就接觸到的一個javaScript模塊加載框架。使用seajs后javaScript代碼的可讀性和清晰度有了很大的提升，插件的使用和...

YJNldm 2019-08-19 17:10 評論0 收藏0