[转帖]Mootools源码分析-16 -- Element-3

原帖地址：http://space.flash8.net/space/?18713/viewspace-403152.html

原作者：我佛山人

 

//用于特殊属性的setter和getter
Element.Properties = new Hash;

/*
style的getter和setter
可以使用element.set('style', value)来设置值
*/
Element.Properties.style = {

    set: function(style)    {    
        this.style.cssText = style;
    },

    get: function()    {
        return this.style.cssText;
    },

    erase: function()    {
        this.style.cssText = '';
    }

};

/*
标签名的getter，注意没有setter，所以是只读属性，如：
element.get('tag');
*/
Element.Properties.tag = {get: function()    {
    return this.tagName.toLowerCase();
}};

/*
A的href的getter
虽然没有setter，但不代表是只读
因为是属性，所以可以直接 element.set('href', value)
之所以单独写，是因为默认取href属性值返回的是浏览器根据路径规则解释过的绝对地址
而我们通常要的是属性原值
*/
Element.Properties.href = {get: function()    {
    return (!this.href) ? null : this.href.replace(new RegExp('^' + document.location.protocol + '\/\/' + document.location.host), '');
}};

//innerHTML的快捷方式，支持可变参数，能避免长串的字符串连接
Element.Properties.html = {set: function()    {
    return this.innerHTML = Array.flatten(arguments).join('');
}};

//为Element、Window和Document添加扩展实现
Native.implement([Element, Window, Document], {

    //添加事件监听
    addListener: function(type, fn)    {
        if (this.addEventListener)    this.addEventListener(type, fn, false);
        else    this.attachEvent('on' + type, fn);
        return this;
    },

    //移除事件监听
    removeListener: function(type, fn)    {
        if (this.removeEventListener)    this.removeEventListener(type, fn, false);
        else    this.detachEvent('on' + type, fn);
        return this;
    },

    //获取已保存的临时对象实例，如果对象不存在，将引用指向dflt(如果提供此参数)
    retrieve: function(property, dflt)    {
        var storage = Element.Storage.get(this.uid);
        var prop = storage[property];
        if ($defined(dflt) && !$defined(prop))    prop = storage[property] = dflt;
        return $pick(prop);
    },

    //保存临时对象
    store: function(property, value)    {
        var storage = Element.Storage.get(this.uid);
        storage[property] = value;
        return this;
    },

    //删除临时对象
    eliminate: function(property)    {
        var storage = Element.Storage.get(this.uid);
        delete storage[property];
        return this;
    }

});

//Element的几类属性，只是素材的准备，下面就地执行的匿名函数会进行加工处理，以方便别处的调用
Element.Attributes = new Hash({
    Props: {'html': 'innerHTML', 'class': 'className', 'for': 'htmlFor', 'text': (Browser.Engine.trident) ? 'innerText' : 'textContent'},
    Bools: ['compact', 'nowrap', 'ismap', 'declare', 'noshade', 'checked', 'disabled', 'readonly', 'multiple', 'selected', 'noresize', 'defer'],
    Camels: ['value', 'accessKey', 'cellPadding', 'cellSpacing', 'colSpan', 'frameBorder', 'maxLength', 'readOnly', 'rowSpan', 'tabIndex', 'useMap']
});

//对Element的加工处理
(function(EA)    {

    var EAB = EA.Bools, EAC = EA.Camels;
    //将Bools转成Props的格式
    EA.Bools = EAB = EAB.associate(EAB);
    //将Camels转成Props的格式，合并到Props
    Hash.extend(Hash.combine(EA.Props, EAB), EAC.associate(EAC.map(function(v)    {
        return v.toLowerCase();
    })));
    //删除Camels属性
    EA.erase('Camels');

})(Element.Attributes);