dojo.declare/dojo.provide/dojo.require:JavaScript模塊化管理工具

在中大型軟件的開發過程中,代碼的模塊化管理非常重要。衆所周知支持良好的模塊化管理的語言是Java,通過package/import機制來實現。相比較而言,JavaScript作爲運行在前端的解釋性語言,其模塊化管理一直都沒有受到足夠的重視。對於以靜態頁面爲主的網站,javascript一般就是做做網頁特效,大多數情況下都是直接寫入到HTML頁面中,也談不上模塊化不模塊化。但是隨着富客戶端的蓬勃發展,特別是web應用的大量出現,客戶端的功能越來越複雜。JavaScript不僅需要支持變化多端的頁面呈現,也需要提供精細的用戶交互邏輯支持。這樣一來,造成的直接後果就是JavaScript代碼量急劇增加,管理難度加大。這種情況下,當務之急就是引入模塊化管理工具。
JavaScript工具包的發展讓這種需求的滿足成爲了可能。dojo.declare/dojo.provide/dojo.require就是dojo提供的用於管理JavaScript代碼的工具。“understanding dojo.declare, dojo.require, and dojo.provide ”一文中對比了模塊化管理在Java和Dojo中的不同實現方式。對Java比較熟悉而不熟悉Dojo的朋友,可以參考一下此文。
本文首先介紹dojo.declare/dojo.provide/dojo.require分別是幹什麼的,然後總結一下該模塊化管理工具對JavaScript開發帶來了哪些便利之處。如果想了解dojo.provide的內在機制,可以參考“dojo.provide:你到底“提供”了些什麼? ”一文。

介紹

dojo.declare
dojo.declare命令創建一個JavaScript對象。比如:
dojo.declare(“com.test.dialog1”, [dijit.Dialog], {
a: “hello”,
title: “test dialog”
});
其中,“com.test.dialog1”是對象名,它繼承了dijit.Dialog對象,因此是一個可自定義的網頁對話框。它具有繼承自dijit.Dialog的屬性title,即出現在對話框上邊欄的文字,以及自定義屬性a。屬性a和title被封裝在對象com.test.dialog1中,無法被全局訪問。有關dijit.Dialog對象的繼承原理,可以參考“dijit.Dialog樣例及其原型關係 ”一文。

dojo.provide
創建了一個個JavaScript對象,那如何讓別的JavaScript代碼和HTML頁面知道它們呢?這個時候dojo.provide就派上用場了。在如下的代碼中:
dojo.provide(“com.test.dialog1”);
dojo.declare(“com.test.dialog1”, [dijit.Dialog], {
a: “hello”,
title: “test dialog”
});
語句dojo.provide(“com.test.dialog1”)包含了多種含義:
1. 上述JavaScript代碼被放置在文件夾/com/test/下的dialog1.js文件中;
2. 此dialog1.js文件以唯一命名“com.test.dialog1”暴露於其他JavaScript代碼和HTML頁面。

dojo.require
有了前面dojo.provide開放的JavaScript資源,dojo.require就是引用它們的方法。一旦在頁面中調用:
dojo.require(“com.test.dialog1”);
dojo.require也有多種功用:
1. 聲明js代碼之間的依賴關係;
2. 加載相應的js文件dialog1.js到客戶端。

從上面的介紹可以看出,dojo.declare/dojo.provide/dojo.require提供了模塊化管理的大多數特性。下面就詳細列舉一下由此產生的便利之處。

便利之處

統一命名、統一部署
由dojo.provide和JavaScript代碼放置的位置和命名可以看到,只要將JavaScript代碼組織到一個樹形目錄下,就可以用dojo.provide給每個js文件一個統一的命名方法。同樣,通過dojo.provide中的名字,就可以很容易地找到js文件在服務器目錄中的位置。

加載簡便
有了dojo.require,就不需要在HTML頁面中使用大量的標籤了。
以前:

現在:

dojo.require(“com.test.dialog1”);

當js文件有很多的時候效果更明顯。可以減少容易出錯的對js文件路徑的引用,並節省很多頁面空間。

統一管理,可促進JavaScript和HTML的分離
既然dojo.require已經脫離了標籤,調用它們的地方就可以進行統一管理。比如可以專門寫一個requireJSFiles()函數,把當前頁面中要用到的所有js文件的調用都放到裏面。這樣,頁面用到的js文件一目瞭然,將來要做修改、增刪js文件也非常簡便,不會因爲js文件的調用散落在各處而引起不必要的麻煩。
同樣,由於requireJSFiles()函數可以放到專門的js文件中,等於將JavaScript加載的代碼同HTML頁面分離了。

可劃分變量及函數的定義域
關於全局變量的討論,我想網上已經有很多資料了。科學的設計,是儘量避免使用全局變量。而dojo.declare具有的封裝性,很好地滿足了這個需求。它創建的JavaScript對象,其中的變量及函數都是內部成員,無法被全局訪問。對於JavaScript代碼量龐大的項目來說,這樣可以避免很多不必要的麻煩。

無重複加載
由於dojo.require有重複加載的檢查機制,因此在一個web項目的多處引用dojo.require(“com.test.dialog1”)也不會造成性能的下降。當檢測到“com.test.dialog1”已被加載後,後面的dojo.require(“com.test.dialog1”)都不會被執行。

代碼擴展性好
無論是想增加、修改還是刪除js文件,這個機制都能夠很好地幫助開發人員快速進行。比如想增加一個新的自定義網頁對話框,首先在/com/test/文件夾下新建一個js文件叫dialog2.js,然後在其中聲明對應的對話框:
dojo.provide(“com.test.dialog2”);
dojo.declare(“com.test.dialog2”, [dijit.Dialog], {
b: “world”,
title: “test dialog 2”
});
調用的時候,直接增加一句就可以了:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章