再谈 attribute

@slideshare

 

 

原生：

attribute 的访问控制从ecmascript3.1开始引入，在ecma5正式成为标准，目前有ie8与chrome支持，使用方式：

 

foo={};
Object.defineProperty(foo, "test", 
{ 
getter: function() { return "foo" } ,
setter: function(v){this.test=v;}
}
);
alert(foo.test);

 

那么在每次读取foo的test属性时，都会调用其相应description部分的getter和setter函数。

而早在javascript1.5，firefox通过新语法实现了对应的功能，目前除了ie之外的浏览器都支持这种语法：

 

var lost = {
	loc : "Island",
	get location () {
		return this.loc;
	},
	set location(val) {
		this.loc = val;
	}
};
lost.location = "Another island";

 

通过属性支持，可以产生很多写代码的新方式，确切的说对于类库编写者可以更好的处理兼容性问题，使得接口通过属性暴露更加直观明了，参见 ajaxian 的讨论部分 。

 

1.children  模拟在firefox，遍历childNodes取元素节点。

2.outHTML 模拟在firefox ，创建临时div包裹，再取innerHTML。

模拟：

YUI3 为了跨浏览器的最大兼容性通过attribute模块实现了对应的功能，并添加属性事件变化触发机制，大大增加了属性机制的实用性。简单的说 yui3的属性机制约束用户调用指定的接口通过自定义事件以及自身维护的内部属性信息使调用者可以摆脱达到类似功能需要写的程式化模板代码。

这里自己模拟实现一下yui3的属性处理：

simplified attribute

关键在于控制 get，set 的调用，触发相关事件，设置内部属性。

使用：

前文 yui3 例子的加强版 ，规定范围的累加框 。

 

例子图解：

 

组件部分：

通过after属性事件来同步业务数据同 ui 状态，setter 以及 before 属性事件来验证修正输入:

 

AttributeIncreaser.ATTRS = {
        "v": {
            /*
        			初始值取得，取得后该属性删除，添加默认值value=valueFn()
        		*/
            valueFn: function () {
                return this.input.val();
            },
            //domain业务逻辑
            setter: function (v) {
                if (v == this._edge) return this.get("min");
            }
        },
        max: {
            value: "3"
        },
        min: {
            value: "0"
        }
    };
    /*
			note : cfg should be first argument.
		*/
    function AttributeIncreaser(cfg, domInput, domAction) {
        var self = this;
        AttributeIncreaser.superclass.constructor.apply(this, arguments);
        this.input = domInput;
        this.domAction = domAction;
        this._edge = parseInt(this.get("max")) + 1 + "";
        //domain业务逻辑
        this.domAction.on("click", function (e) {
            self.increase(e);
        });
        //利用after事件触发实现属性与gui同步，属性首字母大小,after/before + Attribute + Change
        this.on("afterVChange", function () {
            self.afterVChange.apply(self, arguments);
        });
        //dimain业务逻辑，利用before事件触发，阻止非规范值输入
        this.on("beforeVChange", function (e) {
            if (parseInt(e.newVal) > parseInt(self._edge)) {
                alert("invalid input,refuse");
                return false;
            }
        });
    }
    S.extend(AttributeIncreaser, S.Base, {
        increase: function () {
            this.set("v", parseInt(this.get("v")) + 1);
        },
        afterVChange: function (e) {
            this.input.val(e.newVal);
        }
    });

 

好处：

 

1.由于浏览器dom engine同javascript engine的分离设计，通过复制dom属性到javascript属性尽可能少得 touch dom,减少js同dom间的通信提高效率。

2.组件开发者不需要自己显式在构造器中动态建立对应dom的js属性，不需要显式定义相关状态事件

3.使用attribute更适合多状态组件（对比多行为组件）

4.组件开发者后期修改程序更加方便，某个属性变化的处理函数可以通过事件触发调用而放在 分离 的 合适 位置

 

KISSY 实现 Attribute ：

 

1. 实例内部维护属性值 map。
2. augment 自 KISSY.EventTarget
3.set,get 调用相关setter ,getter
4.set 前后触发自定义事件
5.new 时
1.根据继承构造器沿链初始化：为了读写效率属性 meta information从构造器链深度复制到实例。
2.将用户值添加到实例属性值map

注意：

1.prevent conflict attribute name in constructor chain
2.事件在初始化 new XX(cfg) 时并不会触发，new 时参数出错对象也就没有意义了，请在new 之前程序员自己保证正确。

 

 

 

调用部分：

 

var attrIn = new AttributeIncreaser({
          //属性值设置，覆盖默认值
          max: 3
    },
    S.one("#v"), S.one("#r"));
   
    //通过输入框设置组件状态部分代码
    var v2 = S.one("#v2");
    var r2 = S.one("#r2");

    //设置组件属性，通知组件更新自己的状态
    r2.on("click", function () {
        attrIn.set("v", v2.val());
    });
     
    //监听属性状态变化，同步外部数据
    attrIn.on("afterVChange", function () {
        v2.val(attrIn.get("v"));
    });
    
    //全部重置部分代码
    var r3 = S.one("#r3");
    r3.on("click", function () {
        attrIn.reset();
    });

 

好处：

 

组件使用者，可以使用属性直观得和组件交互，同组件完全解耦分离，且组件开发者和使用者通过监控同一属性变化又达到了一定的统一协作。

 

代价：

1.任何多余的继承抽象都会带来的相同问题：code float，attribute的基础代码 yui compressor 1.4k

2.引入自定义事件间接层带来的监听器触发，比原来多了一次函数调用

 

 

参考阅读：

 

YUI3 Attribute

 

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

ecma5的新增feature介绍

firefox的属性使用

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

javascript的近年变化总结

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

其他使用介绍 1     ，    2