說說Yui2.0元件體系特點

在前端開發中，我們實際用到最多的要算容器之類的元件了，在這次本系列的研究架構api的可用性過程中，我就從yui2.0的container子產品着手逐一分析該子產品總的元件，并指出其api設計的優劣，歡迎大家拍磚。

下面是該子產品的整體的架構圖：

該子產品是位于yahoo.widget包下，主要包括以下一個類：

這些類的簡單介紹：

module：主要定義了子產品化元件的最基本的結構，一個容器包含着head，body，foot三個子節點。這三個子節點的類名分别為hd,bd,ft,該類是所有子產品化元件的基類。

overlay：增加了絕對定位，設定大小，位置，zindex，和ie下設定iframe防止select的問題。

panel：增加了一個可拖拽的頭部和一個關閉按鈕。

dialog：增加了送出資料的功能，即在内容中放的一個表單，同時底部增加了按鈕。

simpledialog：擁有了用來送出一個單一數值的功能。

tooltip：擁有提示資訊的功能

為了說明yui2.0元件api的一些特點，我來使用一些僞代碼給大家示範一些：

(function(){

//私有方法和私有屬性定義在這裡

function module(ele,userconfig){

this.init(ele,userconfig);

}

module.css_header = "hd";//類屬性

module.prototype={

//對象公有屬性

element:null,

head:null,

body:null,

foot:null,

id:null,

constructor:module,

init:function(ele,opt){

//如果頁面上存在ele，直接使用，如果頁面上沒有ele，就會生成一個id為ele的元素

this.initevent();

this.initconfig();

},

initevent:function(){

//yahoo.util.eventprovider中的createevent進行事件初始化

this.renderevent = this.createevent(event_types.render);

//當初始化後設定屬性

setxx:function(){},

//一些私有的方法

_renderxx:function(){},

render:function(arg){

//如果存在參數，代表使用script腳本生成控件，如果沒有參數，代表使用靜态html生成控件

destroy:function(){

//把yahoo.util.eventprovider中的方法附加到module的prototype屬性上用于自定義一些事件

yahoo.lang.augmentproto(module, yahoo.util.eventprovider);

})()

//如果需要用到繼承，我們就調用下面的方法

function overlay(){}

yahoo.extend(overlay,module,{

//這裡定義overlay上的共有方法

})

//

這樣就是整個yui的元件體系結構了。

下面我們來總結下yui2.0中的元件體系結構特點：

1.        構造函數的的第一個參數必須的，用來指明生成的元件的id，如果頁面中已經存在該id的元素，就直接使用，如果頁面中沒有就會用script生成一個id為該id的元素。

2.        所有的元件對象都能夠從靜态html生成和通過javascript腳本動态的生成

3.        所有的元件都有render方法，當通過html生成元件時，render方法不需要參數，當通過動态腳本的方式生成元件時，render方法需要一個參數來指明要顯示的地方。

4.        初始化事件所使用的方法是從yahoo.util.eventprovider，為元件添加一些自定義的事件。初始化配置屬性使用config對象。這些工具類群組件之間都是單獨存在的。

5.        要使用繼承就是用yahoo.extend方法。如果元件需要用到一些工具方法的屬性，就要用到yahoo.lang.augmentproto方法，如（ yahoo.lang.augmentproto(module, yahoo.util.eventprovider); ）

6.        要使用一個元件時其他依賴的元件可以使用動态加載的方式載入頁面。

在這裡我們可以發現在添加事件的時候過程還是有點繁瑣，同時對于定義一個元件也沒有現成的架構可以依賴。在使用時render方法是必須的，同時向head，body，foot這些屬性必須通過set方法來設定。具體使用方式請看示例（http://developer.yahoo.com/yui/examples/container/index.html）那麼有沒有更好的方法解決這些問題呢，請看下面的系列文章。