Flex中[Bindable]的使用心得

最新推荐文章于 2016-12-26 09:42:46 发布

转载最新推荐文章于 2016-12-26 09:42:46 发布 · 9.5k 阅读

文章标签：

#flex #actionscript #getter #function #setter #编译器

flex 专栏收录该内容

1 篇文章

订阅专栏

在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 链接如下。