用headjs來管理和載入js 提高網站載入速度

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

就像剛剛說的，我只想有一個js檔案載入器，我只需提供給它一個js檔案的位址就行了的那種呢？那就進入我們的主題了，使用headjs。 headjs其實是一整套的工具，但我只想介紹的是它其中的Javascript Loader功能。以下是它的基本用法：

head.js("/path/to/file.js");

最簡單的用法，提供一個js的檔案的位址給它作為參數，然後它就會默默的在背後進行無阻塞的加載了，至於什麼時候加載完可用了，誰也不知道。

head.js("/path/to/file.js", function() {
 /*js加载完成*/
});

   

最基本的用法，除了提供一個位址參數外，還提供一個回呼函數作為第二個參數。在js載入完成後，回呼叫回呼函數，你可以把依賴該js的程式碼寫在回呼函數裡。

head.js("file1.js", "file2.js", ... "fileN.js");

提供多個js檔案位址，這些js會並行的加載，但會按照參數給定的先後順序執行這些文件，例如即使file2.js比file1.js先載入完成，但它還會一直等到在file1.js載入和執行完後再執行。

head.js("file1.js", "file2.js", function() {
  
});

   

並行載入多個js,並依參數順序執行，所有js準備完成時，執行回呼函數。

head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

   

多個js並行加載，並且誰先加載完就先執行誰

head.js("file1.js").js("file1.js").js("file3.js ");

上一種方法的鍊式呼叫法

這樣的話用headjs來載入js檔案基本上都夠用了，而且還能處理依賴關係。當是如果你繼續裝B,弄一個網站，巴不得什麼特效都用上，這裡找一個jquery插件，那裡再找一個，總之就是弄非常多的文件，其中又有復雜的依賴關係，那該腫麼辦？這還用問嗎，以上的那幾個用法完全能解決。但轉念一想，既然裝B那就一裝到底吧，現在不是流行模組什麼的吧，那咱也整個模組吧，但不是像commonJS說的那麼複雜，就是定義一個模組，然後規定這個模組是有那幾個js檔案組成的，其中的依賴關係又如何等等。那就動手吧，headjs使用的是MTI協議，修改下它應該也是沒問題的吧。屌絲又裝高富帥了，其實說是修改，不如說是增加幾段程式碼進去，而且載入依賴等功能完全是用headjs的api實現的。

這裡，我給headjs的新增了兩個方法，一個是add(name,file,preload)添加模組，參數name是模組名稱，file是要用到的js文件地址,如果有多個文件，並且存在依賴關係，則file可以是一個數組，這個數組的里元素就是用到的文件地址，並且按數組元素的順序進行依賴。第三個參數preload用指定是否預先載入模組文件，如果為false,則在使用該模組的時候才會載入文件，為true時則在定義模組時就會立即載入所用到的文件，預設為false

另一個是use(name,callback),這個方法用來使用模組。 name是用add()方法定義的模組名，callback是模組已經載入完成後呼叫的回呼函數。

於是我們就可以這樣來使用headjs了：

head.add('jqueryui',[jquery.js,jqueryui.js]);//定义模块
head.use('jqueryui',function(){
 //可以使用jqueryui啦
});

   

如果模組很多，則模組的定義碼可以單獨寫在一個檔案裡，並且引入了headjs的後，就立即載入該模組。這個過程可以很簡單的像這樣來實現：

看到那個init屬性沒有，我把它叫做初始化屬性，init的值表示檔名，例如上面init就代表與headjs同目錄的init.js這個檔。所謂的初始化就是在使用use()之前，init檔一定是已經載入好了的。所以可以把模組的定義寫在初始化檔中。

尼瑪，這是要鬧哪樣啊，怎麼又多了個main屬性，好吧，我承認是看到別人有這個東西於是手賤也跟風弄了一個。這個main屬性代表的是模組名，就是head.js與init.js檔案都載入完成後，就會自動執行main屬性指定的模組（當然要先在init中定義該模組）。所以有了這兩個東東後，我們就可以在頁面沒有一句js程式碼的情況下（除了引入headjs那段標籤),執行很複雜的程式碼了。

還有一個要說明的地方，就是模組檔案的存放位置。模組檔案應該和head.js存放在同一個目錄，例如head.add('a','a.js'),這裡的a.js的路徑是和head.js相同的，就是說模組檔案的路徑是相對於head.js存放的路徑的，而且只可以往下走，不可以往上走，比如：

head.add('a','a/a.js')//正確

head. add('a','../a.js')//錯誤，不能往上定位

最後，放上修改過後的head.js來源文件，不是壓縮版，裡面改的地方都有註解。

以上就是本文的全部內容，希望對大家有幫助，同時也希望多多支持PHP中文網！

更多用headjs來管理和載入js 提高網站載入速度相關文章請關注PHP中文網！