关于js封装框架类库之属性操作

在对DOM对象操作时，往往都要涉及到其属性的操作，为了提高开发效率，同时兼顾浏览器的性能，在这简单的封装了几个常见的属性。因为是模块化，在这只是引入了部分代码，其他代码在前几篇模块封装中有写。如有不足，万望提出，谢谢！

1、判断是否有属性，以及设置属性的操作

YY.fn.extend({
                attr: function (attName,attValue){
                    //判断传入参数是否有属性值，没有直接返回属性名
                if(arguments.length == 1){
                    return this[0].attName;
                }else{
                    // 如果传入有属性值，给属性添加属性值
                    return this.each(function(){
                        this.attName = attValue;
                    });
                }}
            })
            

2、预先设定值val方法

YY.fn.extend({
                val: function (value){
                    //判断value是否有值，没有则返回，有值则设置值
                    if(value === undefined){
                        return this[0].value;
                    }else{
                        return this[0].each(function(){
                            this.value = value;
                        })
                    }
                }
            });

3、返回或设置被选元素的内容html方法

YY.fn.extend({
                html: function ( html ) {
                    if ( html === undefined ) {
                        // 返回 0 元素的 innerHTML
                        return this[ 0 ].innerHTML;
                    } else {
                        // 设置所有的 innerHTML
                        return this.each(function () {
                            this.innerHTML = html;
                        });
                    }
                }
            });

4、设置或返回被选元素的文本内容text方法

YY.fn.extend({

                text: function (text){
                    if(text === undefined){
                        return this[0].innerText;
                    }else{
                        return this.each(function(){
                            this.innerText = text;//早期的火狐浏览器不支持innerText
                        })
                    }
                }
            })

兼容低版本火狐浏览器的写法

YY.extend({
                //获取innerHTML值
                getInnerText: function ( dom ) {
                    var list = [];
                    if ( dom.innerText !== undefined ) {
                        return dom.innerText;
                    } else {
                        getTextNode( dom, list );
                        //将数组换化为字符串
                        return list.join( '' );
                    }
                    function getTextNode ( dom, arr ) {
                        // 将 dom 里面的所有的文本节点放到 arr 中
                        var i, l = dom.childNodes.length,
                            node;
                        for ( i = 0; i < l; i++ ) {
                            node = dom.childNodes[ i ];
                            if ( node.nodeType === 3 ) {
                                //node.nodeValue节点的文本值
                                arr.push( node.nodeValue );
                            } else {
                                getTextNode( node, arr );//递归处理方式
                            }
                        }
                    }
                },
                //设置innerHTML值
                setInnerText: function (dom,str){
                    //判断浏览器是否支持innerText
                    if('innerText' in dom){
                        dom.innerText = str;
                    }else{
                        dom.innerHTML = '';
                        //不支持在内部直接创建一个文本节点
                        dom.appendChild(document.createTextNode(str));
                    }
                }
            });

那么对应的test方法应改为

YY.fn.extend({
                text: function ( text ) {

                    if ( text === undefined ) {
                        // 返回 0 元素的 innerHTML
                        return YY.getInnerText( this[ 0 ] );
                    } else {
                        // 设置所有的 innerHTML
                        return this.each(function () {
                            YY.setInnerText( this, text );
                        });
                    }
                }
            });