快捷導(dǎo)航

如何使用headjs來管理和異步加載js

更新時間：2016年11月29日 16:48:54 作者：小林博客

本文主要介紹如何使用headjs來管理和異步加載js，提高頁面的加載速度，需要的朋友可以參考下

現(xiàn)在有許多成熟的js模塊加載器，比如requirejs和seajs等，但是對一些小的項(xiàng)目來說，它們的功能可能太過于“強(qiáng)大”，也許我們只是想要有一個能動態(tài)加載js的功能，或許我們只是想裝B一下，讓自己寫出的頁面沒有一大堆的這樣的東西。前面說的兩種js加載器都是更強(qiáng)調(diào)模塊性，也就是更強(qiáng)調(diào)js文件的組織和管理，更適用于大的項(xiàng)目。

就像剛剛說的，我只想有一個js文件加載器，我只需提供給它一個js文件的地址就行了的那種呢？那就進(jìn)入我們的主題了，使用headjs吧。

首先，我想說一下Javascript的裝載和執(zhí)行。通常來說，瀏覽器對于Javascript的運(yùn)行有兩大特性：1）載入后馬上執(zhí)行，2）執(zhí)行時會阻塞頁面后續(xù)的內(nèi)容（包括頁面的渲染、其它資源的下載）。于是，如果有多個js文件被引入，那么對于瀏覽器來說，這些js文件被被串行地載入，并依次執(zhí)行。而headjs可以異步地把js文件下載到用戶的本地，但是不執(zhí)行，僅當(dāng)在我們想要執(zhí)行的時候去執(zhí)行。

基本用法

以下是它的基本用法：

// 最簡單的例子，異步加載js
head.js("/path/to/file.js");
// 異步加載js，只在js加載成功之后執(zhí)行后面的函數(shù)
head.js("/path/to/file.js", function() {
});
// 并行下載下面的js，并且按順序加載執(zhí)行js
head.js("file1.js", "file2.js", ... "fileN.js");
// 并行下載js，并且按順序加載執(zhí)行js，加載完成后執(zhí)行后面的函數(shù)
head.js("file1.js", "file2.js", function() {
});
// 類似head.js("file1.js", "file2.js","fileN.js");寫法不一樣而已
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");
// 還可以這么寫
head.js("file1.js").js("file1.js").js("file3.js");

腳本回調(diào)

上面的例子說明了最基本的使用，并且回調(diào)函數(shù)基本和加載放在一起，當(dāng)我們需要把腳本寫在頁面底部，而回調(diào)函數(shù)卻在其他地方定義了，不期望在回調(diào)函數(shù)依賴的腳本還未加載之前執(zhí)行，我們可以用到head.ready，基本用法如下：

//只有在頁面所有head.js加載完成之后才會執(zhí)行
head.ready(function() {
});
// 簡潔的寫法如下
head(function(){
});
// 在頁面所有head.js加載完成之后才加載file1.js
head.ready("file1.js",function(){
});

腳本別名

可以通過給腳本一個別名方便管理維護(hù)理解，使用方法如下：

// 按headjs中的腳本順序，下載并加載里面腳本，在腳本tool加載完成之后執(zhí)行下面的回調(diào)
head.ready("tools", function() {
 // 調(diào)用
 $(".tip").tooltip();
});
// 給腳本起別名
head.js( {jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"}, {tools: "http://cnd.jquerytools.org/1.2.5/tiny/jquery.tools.min"}, {heavy: "http://a.heavy.library/we/dont/want/to/wait/for.js"},
 // 別名可選
 "http://can.be.mixed/with/unlabeled/files.js"
);

使用心得

順便介紹一下小林的一點(diǎn)點(diǎn)使用心得，先把網(wǎng)頁全部輸出，這時候全部的內(nèi)容都未依賴腳本，然后再用headjs加載需要的腳本，來使頁面動態(tài)化，并應(yīng)用了window.onload事件，防止腳本加載不成功頁面一直打轉(zhuǎn)讓用戶誤以為頁面還沒加載完，下面是詳細(xì)代碼：

<script type="text/javascript" src="http://linjunlong.com/wp-content/themes/L/js/head.min.js" ></script>
<script type="text/javascript">
 window.onload=function() {
 head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",
  function() {
  });
 }
</script>

這樣做即使無法加載jquery等其他腳本也不會影響網(wǎng)頁的使用

以上就是本文的全部內(nèi)容，希望對大家有所幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: