SlideShare uma empresa Scribd logo
1 de 14
Baixar para ler offline
应用 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/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的近年变化总结
•   jquery作者关于gettter,settter的简单介绍
•   其他使用介绍 1 2

Mais conteúdo relacionado

Destaque

O ÍNICIO DA TRISTEZA DO HOMEM
O ÍNICIO DA TRISTEZA DO HOMEMO ÍNICIO DA TRISTEZA DO HOMEM
O ÍNICIO DA TRISTEZA DO HOMEMAntonio Marcos
 
Relato 3.4 roney
Relato 3.4 roneyRelato 3.4 roney
Relato 3.4 roneyroneyvo
 
Sistema Solar- AMT
Sistema Solar- AMTSistema Solar- AMT
Sistema Solar- AMTAlanaBack
 
Apresentação Negócio Belcorp
Apresentação Negócio BelcorpApresentação Negócio Belcorp
Apresentação Negócio BelcorpValdir Almeida
 
Apresentação SMX São Paulo apresentada por Diego Daminelli, Profissional de S...
Apresentação SMX São Paulo apresentada por Diego Daminelli, Profissional de S...Apresentação SMX São Paulo apresentada por Diego Daminelli, Profissional de S...
Apresentação SMX São Paulo apresentada por Diego Daminelli, Profissional de S...Hi-Midia
 
Nossa Amazônia- AMT
Nossa Amazônia- AMTNossa Amazônia- AMT
Nossa Amazônia- AMTAlanaBack
 
El futbol- el estilo de vida peruana
El futbol- el estilo de vida peruanaEl futbol- el estilo de vida peruana
El futbol- el estilo de vida peruanaCiera Springer
 
Docente-computación
Docente-computaciónDocente-computación
Docente-computaciónbijony
 
Ramas del Derecho Expo. Informática 3
Ramas del Derecho Expo. Informática 3Ramas del Derecho Expo. Informática 3
Ramas del Derecho Expo. Informática 3eduardolbc
 
Cuestionario de repaso, 2 do parcial. grupo 4.
Cuestionario de repaso, 2 do parcial. grupo 4.Cuestionario de repaso, 2 do parcial. grupo 4.
Cuestionario de repaso, 2 do parcial. grupo 4.elevance21
 
Robotica (1)
Robotica (1)Robotica (1)
Robotica (1)jtes
 

Destaque (19)

Kompetensi
KompetensiKompetensi
Kompetensi
 
O ÍNICIO DA TRISTEZA DO HOMEM
O ÍNICIO DA TRISTEZA DO HOMEMO ÍNICIO DA TRISTEZA DO HOMEM
O ÍNICIO DA TRISTEZA DO HOMEM
 
Plano mkt
Plano mktPlano mkt
Plano mkt
 
O que é a internet
O que é a internetO que é a internet
O que é a internet
 
Relato 3.4 roney
Relato 3.4 roneyRelato 3.4 roney
Relato 3.4 roney
 
Sistema Solar- AMT
Sistema Solar- AMTSistema Solar- AMT
Sistema Solar- AMT
 
Apresentação Negócio Belcorp
Apresentação Negócio BelcorpApresentação Negócio Belcorp
Apresentação Negócio Belcorp
 
Apresentação SMX São Paulo apresentada por Diego Daminelli, Profissional de S...
Apresentação SMX São Paulo apresentada por Diego Daminelli, Profissional de S...Apresentação SMX São Paulo apresentada por Diego Daminelli, Profissional de S...
Apresentação SMX São Paulo apresentada por Diego Daminelli, Profissional de S...
 
amistad
amistadamistad
amistad
 
Las redes sociales
Las redes socialesLas redes sociales
Las redes sociales
 
Nossa Amazônia- AMT
Nossa Amazônia- AMTNossa Amazônia- AMT
Nossa Amazônia- AMT
 
Vol. 01 Iss. 01
Vol. 01 Iss. 01Vol. 01 Iss. 01
Vol. 01 Iss. 01
 
Departamentalizacao
DepartamentalizacaoDepartamentalizacao
Departamentalizacao
 
El futbol- el estilo de vida peruana
El futbol- el estilo de vida peruanaEl futbol- el estilo de vida peruana
El futbol- el estilo de vida peruana
 
Docente-computación
Docente-computaciónDocente-computación
Docente-computación
 
Ramas del Derecho Expo. Informática 3
Ramas del Derecho Expo. Informática 3Ramas del Derecho Expo. Informática 3
Ramas del Derecho Expo. Informática 3
 
Cuestionario de repaso, 2 do parcial. grupo 4.
Cuestionario de repaso, 2 do parcial. grupo 4.Cuestionario de repaso, 2 do parcial. grupo 4.
Cuestionario de repaso, 2 do parcial. grupo 4.
 
Robotica (1)
Robotica (1)Robotica (1)
Robotica (1)
 
8 Redes sociales para conseguir empleo
8  Redes sociales para conseguir  empleo8  Redes sociales para conseguir  empleo
8 Redes sociales para conseguir empleo
 

Mais de yiming he

kissy 1.5 progress
kissy 1.5 progresskissy 1.5 progress
kissy 1.5 progressyiming he
 
kissy at alibaba
kissy at alibabakissy at alibaba
kissy at alibabayiming he
 
kissy modularization part2
kissy modularization part2kissy modularization part2
kissy modularization part2yiming he
 
kissy modularization part1
kissy modularization part1kissy modularization part1
kissy modularization part1yiming he
 
KISSY @ 2013-2
KISSY @ 2013-2KISSY @ 2013-2
KISSY @ 2013-2yiming he
 
KISSY 1.4.0 released
KISSY 1.4.0 releasedKISSY 1.4.0 released
KISSY 1.4.0 releasedyiming he
 
callSuper in kissy
callSuper in kissycallSuper in kissy
callSuper in kissyyiming he
 
KISSY XTemplate
KISSY XTemplateKISSY XTemplate
KISSY XTemplateyiming he
 
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013Introduction to kissy for adc 2013
Introduction to kissy for adc 2013yiming he
 
Kissy component system
Kissy component systemKissy component system
Kissy component systemyiming he
 
KISSY@2013.05
KISSY@2013.05KISSY@2013.05
KISSY@2013.05yiming he
 
kissy@2013.03
kissy@2013.03 kissy@2013.03
kissy@2013.03 yiming he
 
KISSY 1.3-released
KISSY 1.3-releasedKISSY 1.3-released
KISSY 1.3-releasedyiming he
 
Simple kissy1.3
Simple kissy1.3Simple kissy1.3
Simple kissy1.3yiming he
 
Kissy in-progress
Kissy in-progressKissy in-progress
Kissy in-progressyiming he
 
Kissy dpl-practice
Kissy dpl-practiceKissy dpl-practice
Kissy dpl-practiceyiming he
 
编辑器设计2
编辑器设计2编辑器设计2
编辑器设计2yiming he
 
KISSY Editor Design 2
KISSY Editor Design 2KISSY Editor Design 2
KISSY Editor Design 2yiming he
 

Mais de yiming he (20)

kissy 1.5 progress
kissy 1.5 progresskissy 1.5 progress
kissy 1.5 progress
 
kissy at alibaba
kissy at alibabakissy at alibaba
kissy at alibaba
 
kissy modularization part2
kissy modularization part2kissy modularization part2
kissy modularization part2
 
kissy modularization part1
kissy modularization part1kissy modularization part1
kissy modularization part1
 
KISSY @ 2013-2
KISSY @ 2013-2KISSY @ 2013-2
KISSY @ 2013-2
 
KISSY 1.4.0 released
KISSY 1.4.0 releasedKISSY 1.4.0 released
KISSY 1.4.0 released
 
callSuper in kissy
callSuper in kissycallSuper in kissy
callSuper in kissy
 
KISSY XTemplate
KISSY XTemplateKISSY XTemplate
KISSY XTemplate
 
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
 
Kissy component system
Kissy component systemKissy component system
Kissy component system
 
KISSY@2013.05
KISSY@2013.05KISSY@2013.05
KISSY@2013.05
 
kissy@2013.03
kissy@2013.03 kissy@2013.03
kissy@2013.03
 
kissy@2013
kissy@2013kissy@2013
kissy@2013
 
KISSY 1.3-released
KISSY 1.3-releasedKISSY 1.3-released
KISSY 1.3-released
 
Simple kissy1.3
Simple kissy1.3Simple kissy1.3
Simple kissy1.3
 
Hujs 总结
Hujs 总结Hujs 总结
Hujs 总结
 
Kissy in-progress
Kissy in-progressKissy in-progress
Kissy in-progress
 
Kissy dpl-practice
Kissy dpl-practiceKissy dpl-practice
Kissy dpl-practice
 
编辑器设计2
编辑器设计2编辑器设计2
编辑器设计2
 
KISSY Editor Design 2
KISSY Editor Design 2KISSY Editor Design 2
KISSY Editor Design 2
 

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

Notas do Editor

  1. 特别是兼容性问题 node.val() : 参数个数检查
  2. afterAttrNameChange 可用于更新 UI beforeAttrNameChange 可用于检查返回值 注意:事件在初始化 new XX(cfg) 时并不会触发, new 时参数出错对象也就没有意义了,请在 new 之前保证正确。
  3. 第五条注意: note:prevent conflict attribute name in constructor chain
  4. 利用 beforechange 事件检查输入 Setter : 初始时间 ( 字符串,整数 ) 转化 利用 afterchange 事件减少 ui 更新
  5. 1. 任何多余的继承抽象都会带来的相同问题: code float , attribute 的基础代码 yui compressor 1.4k 2. 引入自定义事件间接层带来的监听器触发,比原来多了一次 函数调用