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

來源:互聯網
上載者:User

文章簡介:用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



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。