亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

LABJS的使用教程

dreamans / 2053人閱讀

摘要：我們先下載官網(wǎng)地址比較兩者加載的區(qū)別傳統(tǒng)的加載方式采用加載我們可以看到，使用的方式代碼上顯示比較簡(jiǎn)潔。幾個(gè)簡(jiǎn)單的案例三個(gè)文件之間不存在依賴，異步加載為加載的文件指定類型它還有很多更好玩的用法，大家可以到官網(wǎng)上研究一番。

看到LABjs的時(shí)候是因?yàn)楫?dāng)初希望實(shí)現(xiàn)js的異步加載，因?yàn)轫?xiàng)目的歷史原因，在頁(yè)面中需要引用大量的js文件，為了優(yōu)化頁(yè)面的加載速度，做了不少的處理，在使用LABjs的過(guò)程中發(fā)現(xiàn)這插件真的很棒，原本頁(yè)面的初始加載時(shí)間需要4S左右的，在使用LABjs后，頁(yè)面的加載速度只需要2S-2.3S之間就完成了，它編寫簡(jiǎn)單明了，當(dāng)然也有其他工具可以達(dá)到與它一樣的效果，在此不作比較，希望大家能夠喜歡這款插件（它僅僅只有6kb）。
我們先下載LABjs

官網(wǎng)地址"http://labjs.com/"
比較兩者加載的區(qū)別 
/**
*傳統(tǒng)的JS加載方式
**/





/**
*采用LABjs加載
**/

我們可以看到，使用LABjs的方式代碼上顯示比較簡(jiǎn)潔。

幾個(gè)簡(jiǎn)單的案例

Example 1:

/**
*三個(gè)js文件之間不存在依賴，異步加載
**/
$LAB
.script("script1.js")
.script("script2.js")
.script("script3.js")
.wait(function(){ // wait for all scripts to execute first
    script1Func();
    script2Func();
    script3Func();
});

Example 2:

/**
*為加載的js文件指定類型
**/
$LAB    
.script({ src: "script1.js", type: "text/javascript" })
.script("script2.js")
.script("script3.js")
.wait(function(){ // wait for all scripts to execute first
    script1Func();
    script2Func();
    script3Func();
});

Example 3:

$LAB
.script("script1.js", "script2.js", "script3.js")
.wait(function(){ // wait for all scripts to execute first
    script1Func();
    script2Func();
    script3Func();
});

Example 4:

$LAB
.script( [ "script1.js", "script2.js" ], "script3.js")
.wait(function(){ // wait for all scripts to execute first
    script1Func();
    script2Func();
    script3Func();
});

Example 5:

$LAB
.script("script1.js").wait() // empty wait() simply ensures execution order be preserved for this script
.script("script2.js") // both script2 and script3 depend on script1 being executed before
.script("script3.js").wait() // but are not dependent on each other and can execute in any order
.script("script4.js") // depends on script1, script2 and script3 being loaded before
.wait(function(){script4Func();});

Example 6:

$LAB
.script("script1.js") // script1, script2, and script3 do not depend on each other, 
.script("script2.js") // so execute in any order
.script("script3.js")
.wait(function(){  // can still have executable wait(...) functions if you need to
    alert("Scripts 1-3 are loaded!");
})
.script("script4.js") // depends on script1, script2 and script3 being executed before
.wait(function(){script4Func();});

它還有很多更好玩的用法，大家可以到官網(wǎng)上研究一番。趕緊試下它的效果，真的會(huì)給你帶來(lái)驚喜的。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86010.html

相關(guān)文章

  • 《高性能JavaScript》（讀書(shū)筆記）

    摘要：加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊。異步加載，和，瀏覽器不會(huì)失去響應(yīng)它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后，才會(huì)運(yùn)行，解決了依賴性的問(wèn)題。插件，可以讓回調(diào)函數(shù)在頁(yè)面結(jié)構(gòu)加載完成后再運(yùn)行。 這次主要是對(duì)《高性能JavaScript》一書(shū)的讀書(shū)筆記，記錄下自己之前沒(méi)有注意到或者需要引起重視的地方 第一章 加載和執(zhí)行 js代碼在執(zhí)行過(guò)程中會(huì)阻塞瀏覽...

    moven_j 評(píng)論0 收藏0

  • JavaScript模塊化開(kāi)發(fā)的演進(jìn)歷程

    摘要：參考精讀模塊化發(fā)展模塊化七日談前端模塊化開(kāi)發(fā)那點(diǎn)歷史本文先發(fā)布于我的個(gè)人博客模塊化開(kāi)發(fā)的演進(jìn)歷程，后續(xù)如有更新，可以查看原文。 Brendan Eich用了10天就創(chuàng)造了JavaScript，因?yàn)楫?dāng)時(shí)的需求定位，導(dǎo)致了在設(shè)計(jì)之初，在語(yǔ)言層就不包含很多高級(jí)語(yǔ)言的特性，其中就包括模塊這個(gè)特性，但是經(jīng)過(guò)了這么多年的發(fā)展，如今對(duì)JavaScript的需求已經(jīng)遠(yuǎn)遠(yuǎn)超出了Brendan Eich的...

    anonymoussf 評(píng)論0 收藏0

  • Javascript加載執(zhí)行方法總結(jié)

    摘要：區(qū)別在于執(zhí)行時(shí)機(jī)，是加載完成后自動(dòng)執(zhí)行，，而需要等待頁(yè)面完成后執(zhí)行。一旦新的元素被添加到文檔，代碼將會(huì)被執(zhí)行。這樣的好處是，可以下載但不是立即執(zhí)行代碼，還有一個(gè)好處是兼容性好。最好無(wú)論文件是以什么樣的方式加載的。 Javascript在瀏覽器性能中，這可能是所有開(kāi)發(fā)者比較關(guān)注的問(wèn)題，因?yàn)镴avascript有阻塞的特征，也就是當(dāng)Javascript運(yùn)行的時(shí)候，瀏覽器不會(huì)處理其他的任務(wù)。...

    Coding01 評(píng)論0 收藏0

  • 自制 require 函數(shù)：讓瀏覽器輕松實(shí)現(xiàn) js 文件按需加載

    摘要：劇透一下，實(shí)現(xiàn)這個(gè)功能只需要行代碼。如何判斷文件已經(jīng)加載完畢可以在文件里執(zhí)行一個(gè)函數(shù)，通知大家，我已經(jīng)加載完了。 唉？這種文章你也點(diǎn)進(jìn)來(lái)看，你不知道有 LABjs、RequireJS、SeaJS... 這些庫(kù)嗎？ 反正我是沒(méi)用過(guò)這些庫(kù)，什么 AMD 、CMD 哪來(lái)那么多術(shù)語(yǔ)... 前端的庫(kù)太多了，要看各種亂七八糟的文檔，看文檔就想睡覺(jué)，就像學(xué)一門新語(yǔ)言一樣，好煩啊，還不如自己寫一個(gè)庫(kù)呢...

    qianfeng 評(píng)論0 收藏0

  • HTML中的script標(biāo)簽研究

    摘要：的堵塞特性上面引用兩段話的意思大致是，當(dāng)瀏覽器解析文檔時(shí)，一旦遇到標(biāo)簽沒(méi)有和屬性就會(huì)立即下載并執(zhí)行，與此同時(shí)瀏覽器對(duì)文檔的解析將會(huì)停止，直到代碼執(zhí)行完成。實(shí)現(xiàn)代碼執(zhí)行代碼缺點(diǎn)是不能跨域請(qǐng)求參考裝載和執(zhí)行元素所著的的第一章 Script 的堵塞(block)特性 Scripts without async or defer attributes, as well as inlin...

    ernest.wang 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<