對(duì)于組件化的軟件工程設(shè)計(jì)，很多開(kāi)發(fā)人員都比較熟悉。組件化的設(shè)計(jì)適合于復(fù)雜的軟件系統(tǒng)和團(tuán)隊(duì)協(xié)作開(kāi)發(fā)。把軟件系統(tǒng)劃分成若干個(gè)組件，組件之間通過(guò)預(yù)先定義好的接口和協(xié)議進(jìn)行通訊和協(xié)作，共同完成整個(gè)軟件系統(tǒng)的職責(zé)。團(tuán)隊(duì)中的開(kāi)發(fā)人員可以各自負(fù)責(zé)不同的組件。組件化的思想在桌面應(yīng)用和Web應(yīng)用后臺(tái)開(kāi)發(fā)中比較流行，相關(guān)的技術(shù)和實(shí)踐都比較成熟。

　　而在Web應(yīng)用的前端部分，組件化一直進(jìn)展得比較緩慢。這其中的原因有很多，最主要的是Web應(yīng)用的前端在開(kāi)始的時(shí)候比較簡(jiǎn)單，沒(méi)有組件化和設(shè)計(jì)的必要。隨著Ajax應(yīng)用的流行，Web前端部分越發(fā)復(fù)雜，用戶對(duì)Web應(yīng)用的要求不斷向桌面應(yīng)用靠攏。HTML語(yǔ)言的基本界面元素不能單獨(dú)地滿足這樣的需求。菜單、樹(shù)形控件、對(duì)話框和進(jìn)度條等組件，在現(xiàn)在的Ajax應(yīng)用中十分常見(jiàn)，但是并不是HTML默認(rèn)提供的。HTML 5規(guī)范中引入了一些新的元素，但還是不夠。組件化對(duì)于Web應(yīng)用本身的代碼共享和團(tuán)隊(duì)分工也是很有意義的。

　　Web 應(yīng)用前端組件化的發(fā)展也是漸進(jìn)的。開(kāi)始的時(shí)候，只是一些簡(jiǎn)單的HTML、CSS加上JavaScript的代碼示例。比如當(dāng)需要實(shí)現(xiàn)一個(gè)多級(jí)菜單的時(shí)候，就下載相關(guān)的代碼示例，就根據(jù)自己的需要進(jìn)行修改。這樣的組件比較難以復(fù)用。后來(lái)JavaScript框架開(kāi)始流行的時(shí)候，有些框架本身就提供了組件的支持，包括Ext JS、jQuery UI和Dojo等。不過(guò)不同框架提供的組件模型不盡相同。

　　Dijit組件模型概述

　　Web 應(yīng)用的前端組件的定義比較寬泛。一個(gè)組件占據(jù)Web頁(yè)面上的某個(gè)區(qū)域，并負(fù)責(zé)完成某項(xiàng)具體的任務(wù)。Web組件有時(shí)候也被稱為小部件（widget）。在 Dijit組件模型中，一個(gè)Dijit組件是一個(gè)JavaScript類，可以在頁(yè)面上通過(guò)new操作符來(lái)創(chuàng)建組件的實(shí)例。每個(gè)組件實(shí)例都需要與頁(yè)面上的某個(gè)DOM元素綁定在一起。這個(gè)DOM元素就是該組件的根節(jié)點(diǎn)。在Dijit組件的邏輯中，就可以對(duì)該根節(jié)點(diǎn)進(jìn)行操縱來(lái)構(gòu)建用戶界面。組件 JavaScript類暴露出來(lái)的屬性和方法就是該組件的接口。

　　Dijit組件的使用

　　Dijit 組件的使用方式非常簡(jiǎn)單。首先需要在頁(yè)面上加載組件的JavaScript代碼，這通過(guò)dojo.require函數(shù)就可以完成。接著在頁(yè)面上找到或創(chuàng)建一個(gè)DOM元素作為該組件的根節(jié)點(diǎn)。最后通過(guò)new操作符創(chuàng)建即可。如new dijit.form.ComboBox({}, node)就可以用node作為根元素創(chuàng)建一個(gè)dijit.form.ComboBox組件，即一個(gè)下拉列表選擇框。可以看到創(chuàng)建Dijit組件的時(shí)候，使用了兩個(gè)參數(shù)：第二個(gè)參數(shù)是組件的根元素，如果創(chuàng)建的時(shí)候不指定該根元素，會(huì)自動(dòng)創(chuàng)建一個(gè)新的DIV元素作為根元素。

　　不過(guò)該新創(chuàng)建的根元素一般沒(méi)有加入到當(dāng)前的文檔樹(shù)中，可以通過(guò)組件的placeAt方法來(lái)設(shè)置該組件在頁(yè)面文檔樹(shù)中的位置。第一個(gè)元素則是一個(gè)JavaScript對(duì)象，包含了組件的配置屬性。通常來(lái)說(shuō)，一個(gè)Dijit組件是可以復(fù)用的。因此一般都會(huì)提供一些屬性供使用者進(jìn)行配置。通過(guò)這個(gè)參數(shù)，就可以修改這些配置。

　　上面提到的是程序式的方式創(chuàng)建Dijit組件，還有另外的一種方式來(lái)進(jìn)行創(chuàng)建，即通過(guò)在HTML代碼中以聲明式的方式創(chuàng)建，如

<div dojoType="dijit.Dialog" id="myDialog" title="示例對(duì)話框">
    <h3>對(duì)話框標(biāo)題</h3>
    <div>對(duì)話框內(nèi)容</div>
</div>        

        

        
        
      
        
NET技術(shù)：使用Dijit實(shí)現(xiàn)界面組件化開(kāi)發(fā)，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。