676
說說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方法來設置。具體使用方式請看示例（https://developer.yahoo.com/yui/examples/container/index.html）那麼有沒有更好的方法解決這些問題呢，請看下麵的係列文章。
最後更新：2017-04-02 04:26:02