YUI 3 学习笔记（5）- Attribute类

Attribute类用于向一个类添加属性，它给类增加了set和get函数用于操作属性值，同时还
支持change事件以便监视属性的变化，此外，还可以自定义属性的setter、getter和校验
方法，可以定义属性为只读或者一次写（write-once）

1. 要使用Attribute，首先要引入YUI3的种子文件：

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

   然后加载相应模块：

YUI().use('attribute', function(Y) {
});

2. Attribute类是用来扩张一个既存的类，使其具有属性管理功能的，以下是将MyClass扩张
的示例代码：

YUI().use("attribute", function(Y) {
    function MyClass() {
        ...
    }
 
    Y.augment(MyClass, Y.Attribute);
});

3. 增加属性
一旦一个类扩张了Attribute功能，就可以使用addAttrs批量添加属性，或者使用addAttr一个一
个地添加属性，以下是批量添加的例子：

function MyClass(userValues) {
    var attributeConfig = {
        attrA : {
            // attrA的配置，可配置的属性参见【4.属性配置属性】
        },
 
        attrB : {
            // attrB的配置
        } 
    };
 
    this.addAttrs(attributeConfig, userValues);
};

可以在new这个类或者new之后用set方法对属性赋值：

var o = new MyClass({
    attrA:5
});

o.set("attrB", "Hello World!");

4. 属性配置属性(Attribute configuration properties)
可以对属性（Attribute）进行配置的属性（properties）参见下表，所有属性都是可选的，也是
大小写敏感的：
value： 默认值
valueFn：函数。返回值会被作为属性的值
getter：函数
setter：函数
validator：函数。在setter前被调用，用来校验数据
readOnly：布尔值
writeOnce：布尔值。0-不广播；1-广播到YUI实例；2-广播到YUI实例和YUI global
lazyAdd：布尔值
cloneDefaultValue：可以为"shallow", "deep", true, false。仅在Base的ATTRS中使用。
以下是在addAttr中使用的例子：

this.addAttr("attrA", {
    value: 5,
 
    setter: function(val) {
        return Math.min(val, 10); 
    },
 
    validator: function(val) {
        return Y.Lang.isNumber(val);
    }
});

5. 属性变化事件
属性变化事件是一种用户自定义事件，其类型为"[attributeName]Change"，例如定义了一个
属性"attrA"，那么它的变化事件就是"attrAChange"。
定义事件监听器时可以使用两种方法：on和after。其中用on注册的监听器在变化发生前调用，
我们可以在这里检查数据的合法性，并用Event的preventDefault()方法拒绝对属性的修改。而
用after注册的监听器在事件发生后调用。
以下是对属性"enabled"定义变化事件监听器的示例代码：

o.on("enabledChange", function(event) {
   ...
});

o.after("enabledChange", function(event) {
   ...
});

事件监听器的第一个参数是以Event对象，它具有以下的属性和方法：
newVal
prevVal
attrName
subAttrName
preventDefault()
stopImmediatePropagation()：可以在on和after监听器中使用，用于停止事件在监听器栈中的传播

6. 属性设置流程图（很值得参考）



7. 子属性（sub attribute）
属性可以包含子属性，我们可以在set/get方法中使用由"."标识的完整属性名来操作子属性。
以下是set的例子：

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");

以下是get的例子：

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

评论

2 楼 yiyu 2014-02-15  

最近不看YUI了，发现一个国产的前端框架，是金蝶出的，叫OperaMasks-UI，基于jquery的，感觉很适用。

1 楼 qinshi110 2014-02-09  

希望博主提供更多学习YUI的资料，英文一般看官方文档有压力。