应用 Attribute 描述符

yiminghe@gmail.com

属性

读取：var v = obj.attr;

写入：obj.attr = v

验证逻辑只能通过方法控制：obj.setAttr(attrName,value)

C#/Java 属性描述符

C# 可对属性访问进行控制 Getter / setter

JAVA 通过属性访问函数，并提供事件支持 VetoableChangeSupport

PropertyChangeSupport

原生-标准

foo={};

Object.defineProperty(foo, "test", {

getter: function() { return "foo" } ,

setter: function(v){this.test=v;}

});

alert(foo.test);

原生-mozilla

• var lost = {

loc : "Island",

get location () {return this.loc; },

set location(val) {

this.loc = val;

}

};

lost.location = "Another island";

应用点

例如类库开发者，使用属性暴露接口直观简洁。

outerHTML

Event.prototype

css3 simulation

obj.val() -> obj.value

Children in firefox

模拟

• Class.ATTRS = {attr : {

value: xxx // 默认属性valueFn:function(){}//初始调用设置value,setter:function(v){} //写属性调用，格式转化,getter:function(){} //读属性调用

}}

KISSY.extend(Class,KISSY.Base);

使用：obj.set(attr,value), obj.get(attr), obj.reset(attr)

事件通知增强

• 属性名字：attrName

• 继承Base后，附带自定义事件

• beforeAttrNameChange : 设置属性值触发，返回false赋值无效。

• afterAttrNameChange : 属性值设置后出发

KISSY 实现

• 1. 实例内部维护属性值 map。

• 2. augment 自 KISSY.EventTarget

• 3.set,get 调用相关setter ,getter

• 4.set 前后触发自定义事件

• 5.new 时• 1.根据继承构造器沿链初始化：为了读写效率属性 meta

information从构造器链深度复制到实例。

• 2.将用户值添加到实例属性值map

使用例子

http://kissy.googlecode.com/svn/trunk/experimental/digital-clock/clock-css.html

复杂的game状态管理

优点

1. 用户配置透明，减少模板代码：KISSY.merge

2.业务数据与UI解耦，less dom

3. 多状态的UI同步管理

4. 事件带来的AOP

代价

1. YUI Compress 后大小 :1.4k

2. 事件监听多一次函数调用

set(attr,value) -> changeAttr(value)

Refer

• YUI3 Attribute

• 复杂的attribute应用:游戏编写中的属性管 理

• ecma5的新增feature介绍

• firefox的属性使用

• 属性在浏览器间的差异总结

• javascript的近年变化总结

• jquery作者关于gettter，settter的简单介绍

• 其他使用介绍 1 2