YUI3学习（6）-组件框架之 Attribute _Web前端

YUI3学习（六）---组件框架之 Attribute

1，YUI3组件框架

组件框架基于YUI Core，是建立和扩展组件的基础；组件框架从下而上依次基于attribute、base、widget 模块组成，同时基于plugin模块实现灵活扩展。

相关类说明：

Attribute类 ?提供属性管理，可以扩展任何类使之具备属性管理功能，如提供get/set接口和change事件。

Base类 ? ? ? 提供属性管理和基础的事件机制，同时提供声明周期管理和插件机制。

Widget类 ? ?派生自Base，为可视化对象提供通用的属性和方法(visible,show等)以及渲染周期管理，并为开发Widget，建立了一套通用的模式。

Plugin类 ? ? 可以向对象灵活添加/移除额外的功能。

类相关关系如下：

Attribute uses EventTarget(掺元继承)；Base uses Attribute and Plugin.Host(掺元继承)；Widget extends Base(OO继承)

Attribute

通过Attribute类可以为任何的类扩充属性管理功能。扩充后，类将被添加get和set方法去获取和存储属性值，同时支持属性值修改的change事件来监听值的变化。

此外，属性可以通过配置getter、setter和validator方法来自定义值的存取和验证。属性也支持被设置为‘read-only'或'write-once'。

使用Attribute，需要引入依赖模块’attribute‘

1，使用Attribute扩充自定义的类

function MyClass(){}

Y.augment(MyClass,Y.Attribute);

如此，MyClass实例就可以使用Attribute类里定义的方法来配置属性。具体Attribute方法列表可参考API文档。

注意：通常情况下，与augment Attribute相比，更多的实现是继承Base类(Base uses Attribute)。Base默认延时初始化属性，可以提高程序的性能。

使用Attribute，也可以设置延时初始化。

2，为自定义的类添加属性

可以在自定义类中使用Attribute的addAttrs方法为类添加多个属性，也可以使用addAttr方法添加单个属性。addAttrs方法接收属性配置信息和默认值信息两个参数，第三个参数标记是否延时初始化。

代码如下：?

function MyClass(userValues) {
    // 属性配置信息
    var attributeConfig = {
        attrA : {
            value:5,
            getter:function(v){}
            //...
        },
        attrB : {
            // ...
        } 
    };

    this.addAttrs(attributeConfig, userValues);
};
Y.augment(MyClass,Y.Attribute);
// 初始化值。name/value对
var o = new MyClass({
    attrA:5
});
// 实例化后，设置属性值
o.set("attrB", "Hello World!");

3，属性配置参数列表

每个属性都可以配置以下参数（大小写敏感）

value ?? ? ?	Any	默认值
valueFn ?? ??	Function	返回值作为属性值，覆盖value属性值；如果返回undefined，则仍采用value值
getter ? ? ?	Function	调用对象的get(attr)方法时触发，可以自定义返回值。function(value,attrName){}
setter ? ? ?	Function	调用对象的set(attr,v)方法时触发，function(value,name)，返回值作为属性值。 ? ? ? ? ? ? ? ? ?如果返回 Attribute.INVALID_VALUE ，将阻止更新值。
validator	Function	?调用对象set方法前触发，function(value,name),返回false将阻止set属性。
readOnly	Boolean ?	是否只读?
writeOnce	Boolean or ‘initOnly’ ?	只能调用set方法赋值一次；如果是’initOnly‘，只能在initialization时赋值，如果基于Base了的对象，意味着只能在构造执行中初始化赋值。?
broadcast	Int	默认情况下，属性的change事件不会广播给YUI实例或全局YUI实例。设置broadcase属性，可以启动广播，类似customEvent的broadcast ，取值 1，2
lazyAdd	Boolean?	使用addAttrs方法添加的属性，是否当第一次调用get/set方法的时候初始化属性。继承自Base的对象采用懒加载方式，可以设置该属性改变延时初始化行为。
cloneDefaultValue	’shallow‘，’deep‘， ’true‘，’false‘	该属性仅支持Base而不支持Attribute。控制Base的ATTRS中属性的默认值为引用类型时是如何处理的。默认情况下，对象和数组采用深克隆以保护值的修改。 ?设置cloneDefaultValue=false,将禁用克隆，这在值为公用的数组或对象时有用。 ?如果设置为shallow，将使用浅克隆方式；如果设置为true或deep，将采用深克隆。

4,属性值change事件

使用attribute来存储对象状态的关键好处之一就是可以使用attribute change事件。当attribute的set方法被调用时就会触发change事件。

事件类型定义方式为："[attributeName]Change"。属性change事件可以使用‘on'和’after'方法监听。

注意：无论设置属性是否成功，都会触发on监听器；但如果属性设置未通过验证，则不会触发after监听。

示例方法展示了事件注册及事件对象的相关属性和方法：

var o = new MyClass({
    attrA:5
});
o.on('attrAChange',function(e){
    var prevVal = e.prevVal;//获取旧值
    var newVal = e.newVal;//获取新值
    var attrName = e.attrName;//触发change事件的属性值
    var subAttrName = e.subAttrName;//如果change事件触发的属性为X.a.b，那么attrName返回X，而subAttrName返回X.a.b
    if(/*..*/){
   		e.preventDefault();
		e.stopImmediatePropagation();
		e.stopPropagation();
		e.halt();
     }
});
o.after('attrAChange',function(e){
    //....
});

5，set方法设置属性流程图

6，设置子属性

如果属性为object对象，属性如下：

o.set("strings", {
    ui : {
        accept_label : "OK",
        decline_label : "Cancel",
    },
    errors : {
        e1000 : "Not Supported",
        e1001 : "Network Error"
    }
});

?那么，可以通过下面的方式设置子属性：

// 设置存在的属性
o.set("strings.ui.accept_label", "Yes");
o.set("strings.ui.decline_label", "No");
 
// 为存在的属性添加子属性
o.set("strings.errors.e2000", "New Error");

?但是如果为没有的子属性设置子属性将不会成功，如下

o.set("strings.messages.intro", "Welcome");//无效

?同样，获取子属性方法如下：

var lbl = o.get("strings.ui.accept_label");