加快頁面的載入速度:非同步模組載入器In.js

文章簡介：用In.js顆粒化管理、載入你的Javascript模組.

近一年來，國內外都十分熱衷於非同步載入的研究，為了加快頁面的載入速度，無阻塞載入Javascript的方法和架構成為了前端開發的焦點和亮點之一。

國外的像基於jQuery的RequireJs，YUI Loader，LabJs，RunJs，國內也有淘寶的SeaJs，豆瓣的DoJs等，這些都是一些十分優秀的模組載入器。但是本文將會向大家介紹一個新的開源的輕量級“多線程”非同步模組載入器In.js，In的開發借鑒了Do的一些思路和使用習慣，在此期間感謝@kejun同我的耐心交流，In.js壓縮後只有4.77k，不僅小巧而且十分好用。

優點：

• 按需載入
• 無阻塞載入
• 依賴關係管理
• 顆粒化模組管理

如何使用？

A.引入In.js

1	<scripttype="text/javascript"src="in.js" autoload="true" core="jquery.min.js"></script>

只需要在頁面頂部引入in.js即可，這裡有兩個參數需要注意：

autoload: 是否在載入in.js的時候載入底層核心庫 – {選擇性參數 – truefalse}
core: 底層核心庫的路徑 – {選擇性參數 – url}

如果同時設定了core，並且autoload=true，則在引入In.js的同時載入core到頁面中。

B.聲明各個模組的地址和依賴關係In.add(name,{config})

123	In.add("mod-a",{path:"mods/a.js",type:"js",charset:"utf-8"});In.add("mod-b",{path:"mods/b.js",type:"js",charset:"utf-8",rely:["mod-b-css"]});In.add("mod-b-css",{path:"mods/b.css",type:"css",charset:"utf-8",rely:["mod-a"]});

上述代碼聲明了三個模組的依賴關係和模組的地址，並將它們加入到隊列中去（僅僅是排入佇列，並沒有載入到頁面中去）。

C.載入隊列In(queue)

123456

var demo=In("mod-b",function(){//do something},function(){//do somethingreturnfalse;});

載入mod-b模組，載入完後執行functionA和functionB，在此假設引入in.js時設定了autoload=true，那麼隊列中的載入順序依次為：

1	jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functionA() >>> functionB()

隊列全部載入完成後，demo會被賦值為一個數組，其中存放的是每個function的傳回值：

1	demo={returns:[undefined,false],complete:true}

D.在domReady之後載入隊列In.ready(queue)

123	In.ready("mod-b",function(){//do something});

隊列載入順序：

1	jquery.min.js >>> {domReady} >>> mod-a >>> mod-b-css >>> mod-b >>> function()

In.ready()和In()的區別在於兩點：

1. In.ready()中的隊列只有在domReady之後才會執行
2. In.ready()沒有傳回值

E.監聽變數變化，值改變則執行回調In.watch(object,property,function(prop,old,new) {})

由於In載入的隊列均為非同步非阻塞式載入，所以有時候為了特殊需求（比如後續的操作依賴隊列中function的傳回值），我們需要在確保隊列執行完成後，再執行後續操作。這種情況下，可以用In.watch()監聽return.complete變數，當return.complete==true的時候執行回呼函數，代碼如下：

12345678910

var model=In("model",function(){//do somethingreturn123;});In.watch(model,"complete",function(prop,old,new){if(model[prop]==true){console.log(model.returns[0]);//print 123In.unwatch(model,prop);//destroy the watch event of model.complete}});

————————-華麗的分割線————————-

In的魅力遠遠不止上述這些，它的可靠性也已經在幾個大項目中得到了印證，除此之外，In也有智能的提示，比如如果用In()載入一個事先未聲明的模組，就會提示你檢查模組名。真心的希望有更多的前端朋友關注In，使用In，甚至投入到In的後續開發中來。

下圖是In.js的英文版使用圖冊：

在哪下載？

In.js是一個開源的項目，你可以在下邊的地址找到它的原始碼或者下載它使用。

http://project.benben.cc/In
http://github.com/PaulGuo/In

關於作者

Author: Guokai （騰訊微博 / Twitter / Google+ / Blog）
Email/Gtalk: badkaikai@gmail.com