LABJS的使用教程

dreamans 發布于2019-08-21 10:41 / 2003人閱讀

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

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

官網地址"http://labjs.com/"

比較兩者加載的區別

/**
*傳統的JS加載方式
**/





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

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

幾個簡單的案例

Example 1:

/**
*三個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();});

它還有很多更好玩的用法，大家可以到官網上研究一番。趕緊試下它的效果，真的會給你帶來驚喜的。

GPU云服務器云服務器 linux的使用教程 java的使用教程服務器的使用教程服務器ecs的使用教程

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

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

《高性能JavaScript》（讀書筆記）

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

moven_j 2019-08-21 17:58 評論0 收藏0
JavaScript模塊化開發的演進歷程

摘要：參考精讀模塊化發展模塊化七日談前端模塊化開發那點歷史本文先發布于我的個人博客模塊化開發的演進歷程，后續如有更新，可以查看原文。 Brendan Eich用了10天就創造了JavaScript，因為當時的需求定位，導致了在設計之初，在語言層就不包含很多高級語言的特性，其中就包括模塊這個特性，但是經過了這么多年的發展，如今對JavaScript的需求已經遠遠超出了Brendan Eich的...

anonymoussf 2019-08-21 16:22 評論0 收藏0
Javascript加載執行方法總結

摘要：區別在于執行時機，是加載完成后自動執行，，而需要等待頁面完成后執行。一旦新的元素被添加到文檔，代碼將會被執行。這樣的好處是，可以下載但不是立即執行代碼，還有一個好處是兼容性好。最好無論文件是以什么樣的方式加載的。 Javascript在瀏覽器性能中，這可能是所有開發者比較關注的問題，因為Javascript有阻塞的特征，也就是當Javascript運行的時候，瀏覽器不會處理其他的任務。...

Coding01 2019-08-20 11:21 評論0 收藏0
自制 require 函數：讓瀏覽器輕松實現 js 文件按需加載

摘要：劇透一下，實現這個功能只需要行代碼。如何判斷文件已經加載完畢可以在文件里執行一個函數，通知大家，我已經加載完了。唉？這種文章你也點進來看，你不知道有 LABjs、RequireJS、SeaJS... 這些庫嗎？反正我是沒用過這些庫，什么 AMD 、CMD 哪來那么多術語... 前端的庫太多了，要看各種亂七八糟的文檔，看文檔就想睡覺，就像學一門新語言一樣，好煩啊，還不如自己寫一個庫呢...

qianfeng 2019-08-20 12:27 評論0 收藏0
HTML中的script標簽研究

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

ernest.wang 2019-08-21 10:32 評論0 收藏0