[轉載]Flex中[Bindable]的使用心得

在Flex編程中,Bindble使用到最多的元數據。該標籤可以應用在變量或者類或者方法上。同在在MXML中使用”{}”引用設置爲Bindable的變量,從而實現對於變量賦值與界面元素的自動同步。

Bindable的實現採用了GoF的Observer模式,或者Publisher/Subscriber模式。該實現允許一個類(或者變量)可以將自身的變化自動通知給感興趣的對象。

對應Observer模式,GoF的說法是:

定義對象間的一種一對多的依賴關係,當一個對象狀態發生改變的時候,所有依賴於他的對象都得到通知並被自動更新。這種交互也成爲發佈-訂閱。目標是通知的發佈者。他發佈通知是不需要知道誰是他的訂閱者(觀察者)。可以有任意數目的觀察着訂閱並接受通知。

在ActionScript中,編譯器將會爲該標籤給特定的屬性或類或者方法的變化增加事件關聯。

簡單的例子,如果定義了變量和一個組件:

[Bindable] var displayName :String;
<mx:TextInput id= "textA" text="{dispayName}"/>,

編譯器在後臺自動增加事件對應僞代碼如下:

function set DispayName(newvar :String) :void
{
    displayName= newvar;
    this.dispatchEvent(new Event("_dispayNameChanged"));
}
// 類型初始化時被調用
function MxmlInit(){
    textA.addEventListener("_dispayNameChanged")) , UpdateDisplay);
}

function UpdateDisplay(){
    textA.text = displayName;
}

可見,編譯器在背後做了大量的工作,爲我們節省了很多的重複勞動來建立這種觀察關係。

對於初學Flex的人,對於bindable的誤解往往是認爲Bindable是雙向的數值鏈接,事實上Observer模式對應的一個要素就是被觀察者對觀察者一無所知。

比如上面的例子,對於textA的修改,其值並不會自動的體現在displayName上。Bindable只是建立單項的觀察者的關係,這一點至關重要。

對應MVC架構中,被觀察者往往對應Model(數據模型?)的角色,而觀察者則對應於View(視圖)的角色,事實上很多的MVC架構也是非常依賴於Bindable這個工具。

那麼什麼情況下應該應用Bindable?Leaf的個人經驗和理解是:

  • 在不知道有哪些觀察者,或者需要動態的增加觀察者的時候,才需要是用Observer模式!
  • 當觀察者不需要彼此之間的知識的時候。
  • 當被觀察者對觀察者的信息不關心的時候。
  • 當僅僅是簡單的界面數值映射關係的時候。

注意Bindable是有額外的開銷的,別忘了那些編譯器自動生成的代碼,如果需要複雜的邏輯(並非簡單的數值賦值)對應的時候,不要使用bindable。

其實也是因爲這一點,ActionScript中,即使指定了Bindable,如果對應的set或者get中邏輯比較複雜,則不會自動的創建事件關聯操作,而是忽略Bindable標籤。

可以自己使用Bindable[事件名稱]的方式建立關聯,Adobe給出了這樣的例子:

private var _maxFontSize:Number = 15;
[Bindable(event="maxFontSizeChanged")]
// Define public getter method.
public function get maxFontSize():Number
{
    return _maxFontSize;
}

// Define public setter method.
public function set maxFontSize(value:Number):void
{
    if (value <= 30) {
        _maxFontSize = value;
    }
    else
    {
         _maxFontSize = 30;
    }
    // Create event object.
    var eventObj:Event = new Event("maxFontSizeChanged");
    dispatchEvent(eventObj);
}

注意在這個例子裏,複雜的邏輯是在setter裏面做的,而不是getter,爲什麼? 因爲setter調用的次數在正常的情況下總是要比getter少,原則上,
複雜的邏輯通常在賦值時完成,用空間換時間,而不是在每一次取值時計算。

特別信息:

在Flex4裏面,新增加了允許對於表達式的觀察! 例如:

<mx:Button enabled="{state == 'ready'}"/>

同樣的代碼在Flex3中無效。

附,Flex3中對於Bindable的解釋的LiveDoc 鏈接如下

發佈了98 篇原創文章 · 獲贊 0 · 訪問量 3847
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章