DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 如何使用headjs來管理和異步加載js
如何使用headjs來管理和異步加載js
編輯:關於JavaScript     

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

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

首先,我想說一下Javascript的裝載和執行。通常來說,浏覽器對於Javascript的運行有兩大特性:1)載入後馬上執行,2)執行時會阻塞頁面後續的內容(包括頁面的渲染、其它資源的下載)。於是,如果有多個js文件被引入,那麼對於浏覽器來說,這些js文件被被串行地載入,並依次執行。 而headjs可以異步地把js文件下載到用戶的本地,但是不執行,僅當在我們想要執行的時候去執行 。

基本用法

以下是它的基本用法:

// 最簡單的例子,異步加載js
head.js("/path/to/file.js");
// 異步加載js,只在js加載成功之後執行後面的函數
head.js("/path/to/file.js", function() {
});
// 並行下載下面的js,並且按順序加載執行js
head.js("file1.js", "file2.js", ... "fileN.js");
// 並行下載js,並且按順序加載執行js,加載完成後執行後面的函數
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");

腳本回調

上面的例子說明了最基本的使用,並且回調函數基本和加載放在一起,當我們需要把腳本寫在頁面底部,而回調函數卻在其他地方定義了,不期望在回調函數依賴的腳本還未加載之前執行,我們可以用到head.ready,基本用法如下:

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

腳本別名

可以通過給腳本一個別名方便管理維護理解,使用方法如下:

// 按headjs中的腳本順序,下載並加載裡面腳本,在腳本tool加載完成之後執行下面的回調
head.ready("tools", function() {
 // 調用
 $(".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"
);

使用心得

順便介紹一下小林的一點點使用心得,先把網頁全部輸出,這時候全部的內容都未依賴腳本,然後再用headjs加載需要的腳本,來使頁面動態化,並應用了window.onload事件,防止腳本加載不成功頁面一直打轉讓用戶誤以為頁面還沒加載完,下面是詳細代碼:

<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等其他腳本也不會影響網頁的使用

以上就是本文的全部內容,希望對大家有所幫助,同時也希望多多支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved