ContailJSJavaScript 模塊加載器
ContainJS 是什么?
ContainJS 是一個基于 Commonjs 模塊管理規(guī)范的瀏覽器端的 JavaScript 模塊加載器(目前為非標準的,代碼會持續(xù)迭代,現(xiàn)階段主要提供思路,想集結(jié)各路 js 大神一同完善)
使用
獲取 Containjs
下載頁面下載文件。
目錄結(jié)構(gòu)
Containjs 目前的目錄結(jié)構(gòu)非常簡單,項目中 JavaScript 都放在一個 "js" 目錄。 例如, 你的項目中有一個 index.html 頁面和一些 js 文件
├─index.html 項目html所在目錄為主目錄 ├─js/ 項目js目錄 ├─├─lib/ 項目類庫目錄 // 非必須 ├─├─└─contain.js contain.js框架文件 // 也可以放在其他目錄,只需引入即可 ├─├─a.js ├─├─b.js ├─└─app.js 項目的入口文件
開始使用
在你的應用中包含 Contain.js 文件,并且使用服務器環(huán)境打開(本地服務器即可)
// index.html <script src="js/lib/Contain.js"></script>
然后在 js/app.js 入口文件中開始編寫你的應用代碼
Ps:需要注意的是,js/app.js 為默認入口文件,暫時未支持修改
Containjs 模塊使用教程,像寫 node 一樣寫瀏覽器端代碼即可
Ps:如果您已經(jīng)對于,Commonjs 規(guī)范有所了解,則不需要看此教程
模塊依賴
Containjs 的模塊依賴非常簡單,使用 require(url) 函數(shù)直接引入即可
var a = require('a.js')
Ps:需要注意的是,在 Containjs 中,url 需要純靜態(tài)的字符串,不支持使用表達式或者變量
模塊定義
Containjs 的模塊定義非常簡單,滿足 commonjs 模仿,以一個文件一個模塊的形式,暴露接口的方式也符合 commonjs 規(guī)定
//a.js
var name = 'a.js'
var getName = function() {
console.log(name)
}
// 使用模塊中的全局變量 exports 提供對外接口
exports.getName = getName
// 或者也可以這樣
module.exports.getName = getName
使用 Containjs 常見問題解答
為什么 index.html 頁面必須使用服務器環(huán)境打開,例如:127.0.0.1/index.html 打開
答:原因是 containjs 所以的文件均有 ajax 異步加載
為什么 require(url) 中的 url 不可以是變量或者表達式。只能是單純字符串
答:原因是 Containjs 模塊中所依賴文件均是使用異步提前加載,同步 require 時調(diào)用執(zhí)行,而異步提前加載的原理是,使用正則表達式去匹配出需要調(diào)用的模塊的,如果使用表達式則會導致無法正確匹配結(jié)果導致程序錯誤 Ps:需要注意的是,在目前的版本中,請不要在注釋中出現(xiàn),require(url),因為這樣也會對此模塊進行加載,如果本模塊這本應用中不需要使用則會導致,浪費的加載
如果我在本應用中多次 require 某個模塊會不會導致請求數(shù)太多?
答:在 containjs 中,任何模塊,只要路徑相同只會進行加載一次,加載完成后進行執(zhí)行上下文的生產(chǎn)(context 但是不會執(zhí)行),然后存在模塊的 module.context 中
且在 containjs 中,require 在多次調(diào)用過某一模塊過程中,只會進行一次生產(chǎn)模塊接口,之后會緩存在 moudule.exports 中,與 node 中不同的是,node 直接返回 module.exports 的引用,而 containjs 則是使用 module.exports 的繼承的引用,且每一次調(diào)用生產(chǎn)一個新的繼承對象,這樣帶來的好處是,一個應用中只會生產(chǎn)一次本模塊的接口,也不必擔心被別處修改接口內(nèi)容
