当前位置: 代码迷 >> Web前端 >> YUI3学习(6)-组件框架之 Attribute
  详细解决方案

YUI3学习(6)-组件框架之 Attribute

热度:583   发布时间:2012-11-08 08:48:11.0
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");
?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

  相关解决方案