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

就像剛剛說的，我只想有一個(gè)js文件加載器，我只需提供給它一個(gè)js文件的地址就行了的那種呢？那就進(jìn)入我們的主題了，使用headjs吧。headjs其實(shí)是一整套的工具，但我只想介紹的是它其中的Javascript Loader功能。以下是它的基本用法：

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

最簡(jiǎn)單的用法，提供一個(gè)js的文件的地址給它作為參數(shù)，然后它就會(huì)默默的在背后進(jìn)行無阻塞的加載了，至于什么時(shí)候加載完可用了，誰也不知道。

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

最基本的用法，除了提供一個(gè)地址參數(shù)外，還提供一個(gè)回調(diào)函數(shù)作為第二個(gè)參數(shù)。在js加載完成后，回調(diào)用回調(diào)函數(shù)，你可以把依賴該js的代碼寫在回調(diào)函數(shù)里。

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

提供多個(gè)js文件地址，這些js會(huì)并行的加載，但會(huì)按照參數(shù)給定的先后順序執(zhí)行這些文件，例如即使file2.js比file1.js先加載完成，但它還會(huì)一直等到在file1.js加載和執(zhí)行完后再執(zhí)行。

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

并行加載多個(gè)js,并按參數(shù)順序執(zhí)行，所有js準(zhǔn)備完成時(shí)，執(zhí)行回調(diào)函數(shù)。

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

多個(gè)js并行加載，并且誰先加載完就先執(zhí)行誰

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

上一種方法的鏈?zhǔn)秸{(diào)用法

這樣的話用headjs來加載js文件基本都?jí)蛴昧?，而且還能處理依賴關(guān)系。當(dāng)是如果你繼續(xù)裝B,弄一個(gè)網(wǎng)站，巴不得什么特效都用上，這里找一個(gè)jquery插件，那里再找一個(gè)，總之就是弄非常多的文件，其中又有復(fù)雜的依賴關(guān)系，那該腫么辦？這還用問嗎，以上的那幾個(gè)用法完全能解決。但轉(zhuǎn)念一想，既然裝B那就一裝到底吧，現(xiàn)在不是流行模塊什么的吧，那咱也整個(gè)模塊吧，但不是像commonJS說的那么復(fù)雜，就是定義一個(gè)模塊，然后規(guī)定這個(gè)模塊是有那幾個(gè)js文件組成的，其中的依賴關(guān)系又如何等等。那就動(dòng)手吧，headjs使用的是MTI協(xié)議，修改下它應(yīng)該也是沒問題的吧。屌絲又裝高富帥了，其實(shí)說是修改，倒不如說是增加幾段代碼進(jìn)去，而且加載依賴等功能完全是用headjs的api實(shí)現(xiàn)的。

這里，我給headjs的新增了兩個(gè)方法，一個(gè)是add(name,file,preload)添加模塊，參數(shù)name是模塊名稱，file是要用到的js文件地址,如果有多個(gè)文件，并且存在依賴關(guān)系，則file可以是一個(gè)數(shù)組，這個(gè)數(shù)組的里元素就是用到的文件地址，并且按數(shù)組元素的順序進(jìn)行依賴。第三個(gè)參數(shù)preload用指定是否預(yù)加載模塊文件，如果為false,則在使用該模塊的時(shí)候才會(huì)加載文件，為true時(shí)則在定義模塊時(shí)就會(huì)立即加載所用到的文件，默認(rèn)為false

另一個(gè)是use(name,callback),這個(gè)方法用來使用模塊。name是用add()方法定義的模塊名，callback是該模塊已經(jīng)加載完成后調(diào)用的回調(diào)函數(shù)。

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

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

如果模塊很多，則模塊的定義代碼可以單獨(dú)寫在一個(gè)文件里，并且引入了headjs的后，就立即加載該模塊定義文件。這個(gè)過程可以很簡(jiǎn)單的像這樣來實(shí)現(xiàn)：

<script src="head.js" init="init"></script>

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

<script src="head.js" init="init" main="main"></script>

尼瑪，這是要鬧哪樣啊，怎么又多了個(gè)main屬性，好吧，我承認(rèn)是看到別人有這個(gè)東西于是手賤也跟風(fēng)弄了一個(gè)。這個(gè)main屬性代表的是模塊名，就是head.js與init.js文件都加載完成后，就會(huì)自動(dòng)執(zhí)行main屬性指定的模塊（當(dāng)然要先在init中定義該模塊）。所以有了這兩個(gè)東東后，我們就可以在頁面沒有一句js代碼的情況下（除了引入headjs那段標(biāo)簽),執(zhí)行很復(fù)雜的代碼了。

還有一個(gè)要說明的地方，就是模塊文件的存放位置。模塊文件應(yīng)該和head.js存放在同一個(gè)目錄，比如head.add(‘a(chǎn)','a.js'),這里的a.js的路徑是和head.js相同的，就是說模塊文件的路徑是相對(duì)于head.js存放的路徑的，而且只可以往下走，不可以往上走，比如：

head.add(‘a(chǎn)','a/a.js')//正確

head.add(‘a(chǎn)','../a.js')//錯(cuò)誤，不能往上定位

最后，放上修改過后的head.js源文件，不是壓縮版，里面改的地方都有注釋。

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

最新評(píng)論