對(duì)比requirejs更好的理解seajs

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

摘要：遵循規(guī)范，遵循規(guī)范。很多時(shí)候我們想在執(zhí)行方法的時(shí)候再去加載，而不是提前在頁(yè)面加載的時(shí)候就把加載。匹配到時(shí)不加載。所以，達(dá)到了用到時(shí)再去異步加載并執(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對(duì)依賴模塊只加載不執(zhí)行，requirejs對(duì)依賴模塊既加載也執(zhí)行

運(yùn)行代碼：

// seajs



    seajs
    







// requirejs



    requirejs
    







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

運(yùn)行結(jié)果：

seajs：

控制臺(tái)無(wú)輸出

requirejs：

控制臺(tái)：

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

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

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

seajs可以直接如下使用，無(wú)需寫(xiě)依賴["b"]：

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

或

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

運(yùn)行結(jié)果：

控制臺(tái)：b is loaded

假如 a.js 依賴了另一個(gè) c.js，則在 a.js 中使用 require("b") 時(shí)必須也寫(xiě)上依賴["b"]，否則b.js將因?yàn)椴檎也坏蕉粫?huì)加載

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

運(yùn)行結(jié)果：

控制臺(tái)無(wú)輸出（不會(huì)輸出c is loaded, 因?yàn)闆](méi)有require("c") )

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

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

控制臺(tái)將會(huì)報(bào)錯(cuò)，因?yàn)榇藭r(shí)b為null：

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

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

運(yùn)行結(jié)果：

結(jié)論：

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

requirejs的依賴寫(xiě)法如下：

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

或

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

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

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

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

運(yùn)行結(jié)果：

控制臺(tái)無(wú)輸出

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

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

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

這時(shí)候就需要用到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()
        });
    }
})

這時(shí)候運(yùn)行結(jié)果：

b.js沒(méi)有被加載：

控制臺(tái)無(wú)輸出：

點(diǎn)擊OK按鈕：

b.js被加載

控制臺(tái)輸出：

這是因?yàn)楫?dāng)執(zhí)行一個(gè)js時(shí)，seajs會(huì)先去查找匹配require，然后加載相應(yīng)資源，但不執(zhí)行。匹配到require.async時(shí)不加載。

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

小問(wèn)題：

如果是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()
    }
})

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

總結(jié)：

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

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

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

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

GPU云服務(wù)器云服務(wù)器數(shù)據(jù)如何更好的分析比java更好的語(yǔ)言比更好的深圳服務(wù)器 Requirejs

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91983.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Harpsichord1207

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

ArdHosting：印度尼西亞VPS，限時(shí)免安裝費(fèi)，12.6美元/月起，無(wú)限流量

閱讀 3569·2021-10-18 13:30
學(xué)習(xí)python就用python技能樹(shù)｜Python技能樹(shù)測(cè)評(píng)

閱讀 3011·2021-10-09 09:44
CSS資源相關(guān)整理

閱讀 2035·2019-08-30 11:26
PostCSS自學(xué)筆記（二）【番外篇一】

閱讀 2431·2019-08-29 13:17
js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法

閱讀 813·2019-08-29 12:17
Ajax的原理和實(shí)現(xiàn)步驟

閱讀 2313·2019-08-26 18:42
filter 和 map 的異同

閱讀 578·2019-08-26 13:24
通過(guò)寫(xiě)一個(gè)簡(jiǎn)單的東方系彈幕入門微信小游戲

閱讀 3013·2019-08-26 11:39

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

對(duì)比requirejs更好的理解seajs

相關(guān)文章

JavaScript模塊化發(fā)展

seajs和requirejs的那些事兒

require.js構(gòu)建優(yōu)化

Javascript模塊全攬

seajs 模塊化編程js代碼

發(fā)表評(píng)論

0條評(píng)論

Harpsichord1207

男|高級(jí)講師

TA的文章

ArdHosting：印度尼西亞VPS，限時(shí)免安裝費(fèi)，12.6美元/月起，無(wú)限流量

學(xué)習(xí)python就用python技能樹(shù)｜Python技能樹(shù)測(cè)評(píng)

CSS資源相關(guān)整理

PostCSS自學(xué)筆記（二）【番外篇一】

js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法

Ajax的原理和實(shí)現(xiàn)步驟

filter 和 map 的異同

通過(guò)寫(xiě)一個(gè)簡(jiǎn)單的東方系彈幕入門微信小游戲

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

對(duì)比requirejs更好的理解seajs

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！