現在有許多成熟的js模塊加載器，比如requirejs和seajs等，但是對一些小的項目來說，它們的功能可能太過於“強大”，也許我們只是想要有一個能動態加載js的功能，或許我們只是想裝B一下，讓自己寫出的頁面沒有一大堆的<script src=”a.js”></script>這樣的東西。前面說的兩種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的後，就立即加載該模塊定義文件。這個過程可以很簡單的像這樣來實現：
<script src="head.js" init="init"></script>
看到那個init屬性沒有，我把它叫做初始化屬性，init的值表示文件名，例如上面init就代表與headjs同目錄的init.js這個文件。所謂的初始化就是在使用use()之前，init文件一定是已經加載好了的。所以可以把模塊的定義寫在初始化文件中。
<script src="head.js" init="init" main="main"></script>
尼瑪，這是要鬧哪樣啊，怎麼又多了個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源文件，不是壓縮版，裡面改的地方都有注釋。
以上就是本文的全部內容，希望對大家有所幫助，同時也希望多多支持！