diff --git a/demo/event.html b/demo/event.html new file mode 100644 index 0000000..ebded2f --- /dev/null +++ b/demo/event.html @@ -0,0 +1,52 @@ + + +
+ +name:'+v+'
'); + return v; + } + } + } + }); + +设置属性: + + var demo = new Demo(); + demo.set('name','剑平'); + +set() 会触发 属性的 setter 方法。 + +留意,当设置的值与旧的值相同时,不会触发 setter ,比如再次设置: + + demo.set('name','剑平'); + +是没有执行 setter 的,想要触发需要使用 force 配置: + + demo.set('name','剑平',{force:true}); + +### reset(name,opts) + +重置属性 name 为初始值. (调用一次 set() ) 。 + + demo.reset('name'); + +### hasAttr(name) + +判断是否有名为 name 的属性。 + + demo.hasAttr('name'); + +### removeAttr(name) +移除名为 name 的属性,很少用。 + + demo.removeAttr('name'); + +### addAttr(name, attrConfig ) + +给宿主对象增加一个属性。不推荐采用这种方式给宿主增加属性。 + +### addAttrs() + +批量添加属性。不推荐采用这种方式给宿主增加属性。 + +### beforeAttrNameChange(ev) + +attribute 模块强大之处是会给所有的属性注入 change 事件,方便监听每个属性值的改变。 + +属性改变事件,名为 “attrName” 的属性, 在改变它的值之前触发该事件。 + +[demo](https://jsfiddle.net/minghe36/c7g2n2qn/) + + var demo = new Demo(); + demo.on('beforeNameChange',function(ev){ + $('body').append('ev.newVal:'+ev.newVal+'
'); + $('body').append('ev.prevVal:'+ev.prevVal+'
'); + $('body').append('ev.attrName:'+ev.attrName+'
'); + }); + + demo.set('name','剑平'); + +ev 对象: + +* newVal 将要改变到的属性值 +* prevVal 当前的属性值 +* attrName 当前的属性名 + +### afterAttrNameChange(ev) + +属性改变事件,名为 “attrName” 的属性, 在改变它的值之后触发该事件。 + +[demo](https://jsfiddle.net/minghe36/c7g2n2qn/) + + var demo = new Demo(); + demo.on('afterNameChange',function(ev){ + $('body').append('ev.newVal:'+ev.newVal+'
'); + $('body').append('ev.prevVal:'+ev.prevVal+'
'); + $('body').append('ev.attrName:'+ev.attrName+'
'); + }); + diff --git a/doc/demo-list.md b/doc/demo-list.md new file mode 100644 index 0000000..8ca8ec9 --- /dev/null +++ b/doc/demo-list.md @@ -0,0 +1,3 @@ +* [get/getter](https://jsfiddle.net/minghe36/7sjze0jq/) +* [set/setter](https://jsfiddle.net/minghe36/pz8bgozu/) +* [event](https://jsfiddle.net/minghe36/c7g2n2qn/) \ No newline at end of file diff --git a/doc/guide.md b/doc/guide.md new file mode 100644 index 0000000..7740edc --- /dev/null +++ b/doc/guide.md @@ -0,0 +1,39 @@ +### 使用说明 + +attribute 让类拥有统一的处理属性的方式,让属性拥有getter与setter方法,弥补javascript在属性处理上的不足。 + +attribute 模板不推荐单独混入使用,有属性需求的,请使用 base 模块。 + +### 基本使用例子 + + var Base = require('base'); + var Tip = Base.extend({ + initializer: function(){ + var self = this; + var $target = self.get('$target'); + S.log($target.length); + } + },{ + ATTRS:{ + $target:{ + value:'body', + getter:function(v){ + return $(v); + } + } + } + }); + +ATTRS 是 Base 用于添加类属性/参数的 object。请看 base 讲解。 + +类的属性也可以 addAttr() 动态配置,但不推荐直接这么使用。 + +每个属性的配置项如下: + +* value (String|Number) 属性默认值,注意默认值请不要设置为复杂对象(通过自定义构造器 new 出来的),复杂对象可设置 valueFn 返回 +* valueFn (Function) 如果是复杂对象,请使用 valueFn ,很少用,使用 value 就好 +* setter (Function) 写属性时的处理函数,传入从 set() 参数得到的属性值和属性名,如果返回非 undefined 则作为新的属性设置值 +* getter (Function) 读属性时的处理函数 +* validator (Function) 比较少用,写属性时的验证函数,传入从 set() 参数得到的属性值和属性名,返回 false 则不改变该属性值 + +务必留意,getter、setter 必须有返回值。