0
应用 Attribute 描述符yiminghe@gmail.com
属性   读取:var v = obj.attr;   写入:obj.attr = v   验证逻辑只能通过方法控制:    obj.setAttr(attrName,value)
C#/Java 属性描述符   C# 可对属性访问进行控制       Getter / setter   JAVA 通过属性访问函数,并提供事件支持       VetoableChangeSupport       Propert...
原生-标准   foo={};   Object.defineProperty(foo, "test", {         getter: function() { return "foo" } ,         setter: fun...
原生-mozilla•   var lost = {             loc : "Island",             get location () {return this.loc; },             set lo...
应用点   例如类库开发者,使用属性暴露接口直观    简洁。   outerHTML   Event.prototype   css3 simulation   obj.val() -> obj.value   Children ...
模拟• Class.ATTRS = {       attr : {          value: xxx // 默认属性         valueFn:function(){}//初始调用设置value          ,setter:...
事件通知增强•   属性名字:attrName•   继承Base后,附带自定义事件•   beforeAttrNameChange : 设置属性值触发,    返回false赋值无效。•   afterAttrNameChange : 属性值...
KISSY 实现•   1. 实例内部维护属性值 map。•   2. augment 自 KISSY.EventTarget•   3.set,get 调用相关setter ,getter•   4.set 前后触发自定义事件•   5.ne...
使用例子   http://kissy.googlecode.com/svn/trunk/ex    perimental/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的近...
Upcoming SlideShare
Loading in...5
×

Attribute应用与实现

1,387

Published on

http://yiminghe.javaeye.com/blog/696296

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,387
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 特别是兼容性问题 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. 引入自定义事件间接层带来的监听器触发,比原来多了一次 函数调用
  • Transcript of "Attribute应用与实现"

    1. 1. 应用 Attribute 描述符yiminghe@gmail.com
    2. 2. 属性 读取:var v = obj.attr; 写入:obj.attr = v 验证逻辑只能通过方法控制: obj.setAttr(attrName,value)
    3. 3. C#/Java 属性描述符 C# 可对属性访问进行控制  Getter / setter JAVA 通过属性访问函数,并提供事件支持  VetoableChangeSupport  PropertyChangeSupport
    4. 4. 原生-标准 foo={}; Object.defineProperty(foo, "test", { getter: function() { return "foo" } , setter: function(v){this.test=v;} }); alert(foo.test);
    5. 5. 原生-mozilla• var lost = { loc : "Island", get location () {return this.loc; }, set location(val) { this.loc = val; } }; lost.location = "Another island";
    6. 6. 应用点 例如类库开发者,使用属性暴露接口直观 简洁。 outerHTML Event.prototype css3 simulation obj.val() -> obj.value Children in firefox
    7. 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. 8. 事件通知增强• 属性名字:attrName• 继承Base后,附带自定义事件• beforeAttrNameChange : 设置属性值触发, 返回false赋值无效。• afterAttrNameChange : 属性值设置后出发
    9. 9. KISSY 实现• 1. 实例内部维护属性值 map。• 2. augment 自 KISSY.EventTarget• 3.set,get 调用相关setter ,getter• 4.set 前后触发自定义事件• 5.new 时 • 1.根据继承构造器沿链初始化:为了读写效率属性 meta information从构造器链深度复制到实例。 • 2.将用户值添加到实例属性值map
    10. 10. 使用例子 http://kissy.googlecode.com/svn/trunk/ex perimental/digital-clock/clock-css.html
    11. 11. 复杂的game状态管理
    12. 12. 优点 1. 用户配置透明,减少模板代码: KISSY.merge 2.业务数据与UI解耦,less dom 3. 多状态的UI同步管理 4. 事件带来的AOP
    13. 13. 代价 1. YUI Compress 后大小 :1.4k 2. 事件监听多一次函数调用 set(attr,value) -> changeAttr(value)
    14. 14. Refer• YUI3 Attribute• 复杂的attribute应用:游戏编写中的属性管 理• ecma5的新增feature介绍• firefox的属性使用• 属性在浏览器间的差异总结• javascript的近年变化总结• jquery作者关于gettter,settter的简单介绍• 其他使用介绍 1 2
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×