用In.js顆?；芾?、加載你的JavaScript模塊
國(guó)外的像基于jQuery的RequireJs，YUI Loader，LabJs，RunJs，國(guó)內(nèi)也有淘寶的SeaJs，豆瓣的DoJs等，這些都是一些十分優(yōu)秀的模塊加載器。但是本文將會(huì)向大家介紹一個(gè)新的開源的輕量級(jí)“多線程”異步模塊加載器In.js，In的開發(fā)借鑒了Do的一些思路和使用習(xí)慣，在此期間感謝@kejun同我的耐心交流，In.js壓縮后只有4.77k，不僅小巧而且十分好用。
優(yōu)點(diǎn)：
◆ 按需加載
◆ 無(wú)阻塞加載
◆ 依賴關(guān)系管理
◆ 顆?；K管理
如何使用?
A.引入In.js
- <script type="text/javascript" src="in.js" autoload="true" core="jquery.min.js"></script>
只需要在頁(yè)面頂部引入in.js即可，這里有兩個(gè)參數(shù)需要注意：
autoload: 是否在加載in.js的時(shí)候加載底層核心庫(kù) – {可選參數(shù) – true|false}
core: 底層核心庫(kù)的路徑 – {可選參數(shù) – url}
如果同時(shí)設(shè)置了core，并且autoload=true，則在引入In.js的同時(shí)加載core到頁(yè)面中。
B.聲明各個(gè)模塊的地址和依賴關(guān)系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']});
上述代碼聲明了三個(gè)模塊的依賴關(guān)系和模塊的地址，并將它們加入到隊(duì)列中去(僅僅是加入隊(duì)列，并沒有加載到頁(yè)面中去)。
C.加載隊(duì)列In(queue)
- var demo=In('mod-b',function() {
- //do something
- },function() {
- //do something
- return false;
- });
加載mod-b模塊，加載完后執(zhí)行functionA和functionB，在此假設(shè)引入in.js時(shí)設(shè)置了autoload=true，那么隊(duì)列中的加載順序依次為：
- jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functionA() >>> functionB()
隊(duì)列全部加載完成后，demo會(huì)被賦值為一個(gè)數(shù)組，其中存放的是每個(gè)function的返回值：
- demo={returns:[undefined,false],complete:true}
D.在domReady之后加載隊(duì)列In.ready(queue)
- In.ready('mod-b',function() {
- //do something
- });
隊(duì)列加載順序：
- jquery.min.js >>> {domReady} >>> mod-a >>> mod-b-css >>> mod-b >>> function()
In.ready()和In()的區(qū)別在于兩點(diǎn)：
◆ In.ready()中的隊(duì)列只有在domReady之后才會(huì)執(zhí)行
◆ In.ready()沒有返回值
E.監(jiān)聽變量變化，值改變則執(zhí)行回調(diào)In.watch(object,property,function(prop,old,new) {})
由于In加載的隊(duì)列均為異步非阻塞式加載，所以有時(shí)候?yàn)榱颂厥庑枨?比如后續(xù)的操作依賴隊(duì)列中function的返回值)，我們需要在確保隊(duì)列執(zhí)行完成后，再執(zhí)行后續(xù)操作。這種情況下，可以用In.watch()監(jiān)聽return.complete變量，當(dāng)return.complete==true的時(shí)候執(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的魅力遠(yuǎn)遠(yuǎn)不止上述這些，它的可靠性也已經(jīng)在幾個(gè)大項(xiàng)目中得到了印證，除此之外，In也有智能的提示，比如如果用In()加載一個(gè)事先未聲明的模塊，就會(huì)提示你檢查模塊名。真心的希望有更多的前端朋友關(guān)注In，使用In，甚至投入到In的后續(xù)開發(fā)中來(lái)。
下圖是In.js的英文版使用圖冊(cè)：
在哪下載?
In.js是一個(gè)開源的項(xiàng)目，你可以在下邊的地址找到它的源代碼或者下載它使用。
http://project.benben.cc/In
http://github.com/PaulGuo/In
原文：http://www.qianduan.net/particles-with-in-js-management-load-your-javascript-module.html
【編輯推薦】
