|
|
對于組件化的軟件工程設(shè)計，很多開發(fā)人員都比較熟悉。組件化的設(shè)計適合于復(fù)雜的軟件系統(tǒng)和團(tuán)隊協(xié)作開發(fā)。把軟件系統(tǒng)劃分成若干個組件，組件之間通過預(yù)先定義好的接口和協(xié)議進(jìn)行通訊和協(xié)作，共同完成整個軟件系統(tǒng)的職責(zé)。團(tuán)隊中的開發(fā)人員可以各自負(fù)責(zé)不同的組件。組件化的思想在桌面應(yīng)用和Web應(yīng)用后臺開發(fā)中比較流行，相關(guān)的技術(shù)和實踐都比較成熟。
而在Web應(yīng)用的前端部分，組件化一直進(jìn)展得比較緩慢。這其中的原因有很多，最主要的是Web應(yīng)用的前端在開始的時候比較簡單，沒有組件化和設(shè)計的必要。隨著Ajax應(yīng)用的流行，Web前端部分越發(fā)復(fù)雜，用戶對Web應(yīng)用的要求不斷向桌面應(yīng)用靠攏。HTML語言的基本界面元素不能單獨地滿足這樣的需求。菜單、樹形控件、對話框和進(jìn)度條等組件，在現(xiàn)在的Ajax應(yīng)用中十分常見，但是并不是HTML默認(rèn)提供的。HTML 5規(guī)范中引入了一些新的元素，但還是不夠。組件化對于Web應(yīng)用本身的代碼共享和團(tuán)隊分工也是很有意義的。
Web 應(yīng)用前端組件化的發(fā)展也是漸進(jìn)的。開始的時候，只是一些簡單的HTML、CSS加上JavaScript的代碼示例。比如當(dāng)需要實現(xiàn)一個多級菜單的時候，就下載相關(guān)的代碼示例，就根據(jù)自己的需要進(jìn)行修改。這樣的組件比較難以復(fù)用。后來JavaScript框架開始流行的時候，有些框架本身就提供了組件的支持，包括Ext JS、jQuery UI和Dojo等。不過不同框架提供的組件模型不盡相同。
Dijit組件模型概述
Web 應(yīng)用的前端組件的定義比較寬泛。一個組件占據(jù)Web頁面上的某個區(qū)域，并負(fù)責(zé)完成某項具體的任務(wù)。Web組件有時候也被稱為小部件（widget）。在 Dijit組件模型中，一個Dijit組件是一個JavaScript類，可以在頁面上通過new操作符來創(chuàng)建組件的實例。每個組件實例都需要與頁面上的某個DOM元素綁定在一起。這個DOM元素就是該組件的根節(jié)點。在Dijit組件的邏輯中，就可以對該根節(jié)點進(jìn)行操縱來構(gòu)建用戶界面。組件 JavaScript類暴露出來的屬性和方法就是該組件的接口。
Dijit組件的使用
Dijit 組件的使用方式非常簡單。首先需要在頁面上加載組件的JavaScript代碼，這通過dojo.require函數(shù)就可以完成。接著在頁面上找到或創(chuàng)建一個DOM元素作為該組件的根節(jié)點。最后通過new操作符創(chuàng)建即可。如new dijit.form.ComboBox({}, node)就可以用node作為根元素創(chuàng)建一個dijit.form.ComboBox組件，即一個下拉列表選擇框。可以看到創(chuàng)建Dijit組件的時候，使用了兩個參數(shù)：第二個參數(shù)是組件的根元素，如果創(chuàng)建的時候不指定該根元素，會自動創(chuàng)建一個新的DIV元素作為根元素。
不過該新創(chuàng)建的根元素一般沒有加入到當(dāng)前的文檔樹中，可以通過組件的placeAt方法來設(shè)置該組件在頁面文檔樹中的位置。第一個元素則是一個JavaScript對象，包含了組件的配置屬性。通常來說，一個Dijit組件是可以復(fù)用的。因此一般都會提供一些屬性供使用者進(jìn)行配置。通過這個參數(shù)，就可以修改這些配置。
上面提到的是程序式的方式創(chuàng)建Dijit組件，還有另外的一種方式來進(jìn)行創(chuàng)建，即通過在HTML代碼中以聲明式的方式創(chuàng)建，如
<div dojoType="dijit.Dialog" id="myDialog" title="示例對話框">
<h3>對話框標(biāo)題</h3>
<div>對話框內(nèi)容</div>
</div>
NET技術(shù)：使用Dijit實現(xiàn)界面組件化開發(fā)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
