JS 模塊化管理工具：Orderjs
rderjs 是一個開源的 JS 按需、異步加載工具，同時也是 JS 模塊化管理工具。
采用 MIT 協議，您可以免費使用，不限個人或商業用途。支持 IE6+，Firefox，Chrome 等主流瀏覽器。按需、異步加載
按需加載，再也不必動則 xxx-all.js，更節省帶寬。異步無阻塞，不會阻止瀏覽器加載其它元素，充分利用瀏覽器特性提高網頁加載速度，提升用戶體驗。
模塊化管理
隨著 web 應用、網站的 JS 日益增多，模塊化管理 JS 是大勢所趨，也是最好的實踐。Orderjs 采用類 AMD 規范來管理模塊，讓 JS“定義嚴謹化，引用自由化”。
統一管理 JS 和 CSS
讓 Css 成為 JS 模塊可依賴的資源。在 Css 未加載完成之前，模塊不會執行。從此， Css 不再游離在 JS 模塊之外，在應用上達到完美統一。
假定我們有項目，目錄如下： 
首先，在頁面上引入 order.js:
用 orderjs 加載 JS
加載 order.js 同目錄下相同位置的 JS；調用 orderjs(name) 函數，name 參數為模塊文件名（不包括擴展名）：
<script type="text/javascript">
//加載所需模塊:
orderjs("jquery", "rainbow");
//OK, 引用模塊所定義的對象。
//但注意，因為 orderjs 是異步加載以上模塊的，所以不能直接引用:
jQuery("#xxx");
//而需要將以上語句打包，放到 js 執行隊列中，等待 jquery 等模塊加載完之后再執行，
//orderjs(fn) 函數即實現此功能：
orderjs(function(){
jQuery("#xxx")
});
</script> 加載 order.js 同目錄下不同位置的 JS；調用 orderjs(name) 函數，name 參數為模塊相對（order.js）的路徑 + 文件名，路徑分隔符“/”需替換為模塊分隔符“.”：
<script type="text/javascript">
//加載所需模塊:
orderjs("form.SearchBox", "form.validation");
//引用模塊所定義的對象:
orderjs(function(){
new SearchBox();
});
</script>用 orderjs 加載 Css
由于 Orderjs 模塊（包括 js 和 css）的根目錄默認為 order.js 所在目錄，這里需調用 orderjs.config(name, value) 函數修改 css 模塊默認根目錄，然后調用 orderjs(name) 函數，name 參數為前綴 "css>" + 模塊文件名（不包括擴展名）：
<script type="text/javascript">
//修改 css 模塊默認根目錄:
orderjs.config("root", {
//路徑相對于 order.js 目錄，
//注意：這里是路徑分隔符用“/”，不是模塊分隔符“.”，且最后一個 “/” 不能省略。
css : "../css/"
});
//加載所需模塊：
orderjs("css>common", "css>rainbow-theme-dw");
</script>一個真實的案子
本頁面模塊的加載即是利用 order.js 實現，您可以按右鍵 > 查看源代碼，或者直接點擊此處下載頁面源碼。
模塊化管理
用 orderjs.define 定義模塊
文檔完善中...
模塊名轉換規則
文檔完善中...
進階應用
用短名稱自定義模塊根目錄（rootNS）
文檔完善中...
自動加載頁面通用模塊（data-main）
文檔完善中...
定義非 LAMD 模塊的依賴（shim）
文檔完善中...
跨域利用 CDN 資源（paths）
文檔完善中...
注意問題
這里將列出一些開始使用 orderjs 應注意的問題：
JS 習慣的轉換
同步到異步的切換：
全局變量到局部變量的切換：
文件命名的習慣：
應當了解的事項
orderjs 加載多個模塊時的執行順序。用 orderjs() 函數加載模塊，由于其下載時間是不定的，因此其被瀏覽器加載執行順序也是不定的。但可以通過 orderjs.define 來定義模塊，使其有序執行。
orderjs(fn) 的 fn 的執行時間與 domReady 無關。
為什么會有 Orderjs？
類似開源工具已有不少，Orderjs 的出現，多少或是習慣問題:
- 模塊路徑分隔符不喜歡用"/"：jQuery/ui/menu，喜歡用".": jQuery.ui.menu;
- 不習慣 callback 風格: load("jquery", callback) ，而喜歡類 <script> 標簽的風格: orderjs("jquery"); orderjs(fn);
- 某些框架不支持 css 加載；
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！