in.js 一個輕量級的JavaScript顆?；K加載和依賴關系管理解決方案

更新時間：2011年07月26日 19:58:09 作者：

近一年來，國內(nèi)外都十分熱衷于異步加載的研究，為了加快頁面的載入速度，無阻塞加載Javascript的方法和框架成為了前端開發(fā)的焦點和亮點之一。

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

優(yōu)點：
按需加載
無阻塞加載
依賴關系管理
顆?；K管理
如何使用？
A.引入In.js

復制代碼代碼如下:

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

只需要在頁面頂部引入in.js即可，這里有兩個參數(shù)需要注意：
autoload: 是否在加載in.js的時候加載底層核心庫 – {可選參數(shù) – true|false}
core: 底層核心庫的路徑 – {可選參數(shù) – url}
如果同時設置了core，并且autoload=true，則在引入In.js的同時加載core到頁面中。
B.聲明各個模塊的地址和依賴關系In.add(name,{config})

復制代碼代碼如下:

 
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)

復制代碼代碼如下:

 
var demo=In('mod-b',function() { 
//do something 
},function() { 
//do something 
return false; 
}); 

加載mod-b模塊，加載完后執(zhí)行functionA和functionB，在此假設引入in.js時設置了autoload=true，那么隊列中的加載順序依次為：
1 jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functionA() >>> functionB()
隊列全部加載完成后，demo會被賦值為一個數(shù)組，其中存放的是每個function的返回值：
1 demo={returns:[undefined,false],complete:true}
D.在domReady之后加載隊列In.ready(queue)

復制代碼代碼如下:

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

隊列加載順序：
jquery.min.js >>> {domReady} >>> mod-a >>> mod-b-css >>> mod-b >>> function()
In.ready()和In()的區(qū)別在于兩點：
In.ready()中的隊列只有在domReady之后才會執(zhí)行 In.ready()沒有返回值 E.監(jiān)聽變量變化，值改變則執(zhí)行回調(diào)In.watch(object,property,function(prop,old,new) {})
由于In加載的隊列均為異步非阻塞式加載，所以有時候為了特殊需求（比如后續(xù)的操作依賴隊列中function的返回值），我們需要在確保隊列執(zhí)行完成后，再執(zhí)行后續(xù)操作。這種情況下，可以用In.watch()監(jiān)聽return.complete變量，當 return.complete==true的時候執(zhí)行回調(diào)函數(shù)，代碼如下：

復制代碼代碼如下:

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

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

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

In.js Manual

在哪下載？

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

用In.js顆粒化管理、加載你的Javascript模塊

 http://project.benben.cc/In

http://github.com/PaulGuo/In

關于作者

Author: Guokai

您可能感興趣的文章:

in.js

javascript下漢字和Unicode編碼互轉(zhuǎn)代碼
這個是就是把漢字和Unicode編碼互轉(zhuǎn)的javascript代碼，也是從網(wǎng)上找到了，也許有人用得著??！
2010-10-10
javascript中cookie對象用法實例分析
這篇文章主要介紹了javascript中cookie對象用法,實例分析了javascript針對cookie對象的寫入、讀取及刪除等操作的使用方法,非常具有實用價值,需要的朋友可以參考下
2015-01-01
如何在CocosCreator中使用http和WebSocket
這篇文章主要介紹了在Cocos Creator中使用的Http和WebSocket，對websocket感興趣的同學，一定要看下
2021-04-04
picChange 圖片切換特效的函數(shù)代碼
picChange圖片切換特效的封裝函數(shù)，能夠根據(jù)圖片html代碼自動生成右下角的數(shù)字導航按鈕。
2010-05-05
javascript中call,apply,bind的區(qū)別詳解
這篇文章主要介紹了javascript中call,apply,bind的區(qū)別詳解，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2020-12-12
微信小程序?qū)崿F(xiàn)登錄界面示例
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)登錄界面示例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
js實現(xiàn)簡單翻牌小游戲
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單翻牌小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
JavaScript 設計模式富有表現(xiàn)力的Javascript（一）
javascript設計模式是圖靈出版，學習中力求每個章節(jié)都細看。
2010-05-05
這篇文章主要為大家詳細介紹了JavaScript面向?qū)ο缶帉戀徫镘嚬δ艿南嚓P資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08