[转帖]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);

 

转载于:https://www.cnblogs.com/maapaa/articles/mootools-s-16.html