Attribute应用与实现
- 2. 属性
读取:var v = obj.attr;
写入:obj.attr = v
验证逻辑只能通过方法控制:
obj.setAttr(attrName,value)
- 3. C#/Java 属性描述符
C# 可对属性访问进行控制
Getter / setter
JAVA 通过属性访问函数,并提供事件支持
VetoableChangeSupport
PropertyChangeSupport
- 4. 原生-标准
foo={};
Object.defineProperty(foo, "test", {
getter: function() { return "foo" } ,
setter: function(v){this.test=v;}
});
alert(foo.test);
- 5. 原生-mozilla
• var lost = {
loc : "Island",
get location () {return this.loc; },
set location(val) {
this.loc = val;
}
};
lost.location = "Another island";
- 6. 应用点
例如类库开发者,使用属性暴露接口直观
简洁。
outerHTML
Event.prototype
css3 simulation
obj.val() -> obj.value
Children in firefox
- 7. 模拟
• 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)
- 8. 事件通知增强
• 属性名字:attrName
• 继承Base后,附带自定义事件
• beforeAttrNameChange : 设置属性值触发,
返回false赋值无效。
• afterAttrNameChange : 属性值设置后出发
- 9. KISSY 实现
• 1. 实例内部维护属性值 map。
• 2. augment 自 KISSY.EventTarget
• 3.set,get 调用相关setter ,getter
• 4.set 前后触发自定义事件
• 5.new 时
• 1.根据继承构造器沿链初始化:为了读写效率属性 meta
information从构造器链深度复制到实例。
• 2.将用户值添加到实例属性值map
- 10. 使用例子
http://kissy.googlecode.com/svn/trunk/ex
perimental/digital-clock/clock-css.html
- 12. 优点
1. 用户配置透明,减少模板代码:
KISSY.merge
2.业务数据与UI解耦,less dom
3. 多状态的UI同步管理
4. 事件带来的AOP
- 13. 代价
1. YUI Compress 后大小 :1.4k
2. 事件监听多一次函数调用
set(attr,value) ->
changeAttr(value)
- 14. Refer
• YUI3 Attribute
• 复杂的attribute应用:游戏编写中的属性管 理
• ecma5的新增feature介绍
• firefox的属性使用
• 属性在浏览器间的差异总结
• javascript的近年变化总结
• jquery作者关于gettter,settter的简单介绍
• 其他使用介绍 1 2
Hinweis der Redaktion
- 特别是兼容性问题 node.val() : 参数个数检查
- afterAttrNameChange 可用于更新 UI beforeAttrNameChange 可用于检查返回值 注意:事件在初始化 new XX(cfg) 时并不会触发, new 时参数出错对象也就没有意义了,请在 new 之前保证正确。
- 第五条注意: note:prevent conflict attribute name in constructor chain
- 利用 beforechange 事件检查输入 Setter : 初始时间 ( 字符串,整数 ) 转化 利用 afterchange 事件减少 ui 更新
- 1. 任何多余的继承抽象都会带来的相同问题: code float , attribute 的基础代码 yui compressor 1.4k 2. 引入自定义事件间接层带来的监听器触发,比原来多了一次 函数调用