关于js封装框架类库之DOM操作模块（二）

上一篇基本实现了框架结构，但是与真正能用上的项目框架比较还是存在很多不足，在这又做了些加强与优化

(function ( window, undefined ) {
    
    
var arr = [],
    push = arr.push,
    slice = arr.slice,
    concat = arr.concat;
    
// 构造函数
var YY = function YY ( selector ) {
    return new YY.fn.init( selector );
};
// 核心原型
YY.fn = YY.prototype = {
    constructor: YY,//让原型结构保持不变
    selector: null,//给其添加一个属性
    length: 0,//原型中提供的属性，原型中不改值得情况下是共享的，修改后自己再次创建一个
    // init 的参数可以有以下几种情况
    // 1> null, "", undefined
    // 2> fn
    // 3> string  (已经实现)
    // 4> DOM 数组
    // 5> DOM 对象
    // 6> YY 对象
    init: function ( selector ) {
        
        if ( !selector ) return this;
        
        // 兼容字符串: 选择器, html
        if ( YY.isString( selector ) ) {
            if ( selector.charAt( 0 ) === '<' ) {
                // this.elements = parseHTML( selector );//在对象中直接绑定个属性，来储存数据，方法与其并列，方法与数据分离，维护简单，管理简单，但是在基于它的开发显得繁琐，简化elements：将数据直接储存在this中，即将YY当作伪数组
                YY.push.apply( this, parseHTML( selector ) );
            } else {
                // this.elements = select( selector );
                YY.push.apply( this, select( selector ) );
                this.selector = selector;//放在其他地方创建的对象没有此属性，那么可以去原型判断
            }
            //this.length = 0;//当没有搜索到元素时，无须给其添加length，直接共享原型中的属性，原型中添加length属性比较优，两者没有实质的差别
            return this;
        }
        
        // 兼容DOM 对象
        if ( YY.isDOM( selector ) ) {
            this[ 0 ] = selector;//当前对象的一个元素
            this.length = 1;
            return this;
        }
        
        // 兼容YY 对象
        if ( YY.isYY( selector ) ) {
            return selector;
        }
        
        // 兼容DOM 数组(最后判断)
        if ( YY.isLikeArray( selector ) ) {
            YY.push.apply( this, selector );//每个元素放在当前对象中
            
            return this;
        }
    },
        //each 方法
    each: function (callback){
        YY.each(this,callback);//当前每个元素（dom对象）都被回调函数作用
        return this;
    }
    
};
YY.fn.init.prototype = YY.prototype;

// 可扩展
YY.extend = YY.fn.extend = function ( obj ) {
    // 将 obj 的成员加到 this 上
    var k;
    for ( k in obj ) {
        this[ k ] = obj[ k ];
    }
};

var select = function ( selector ) {
    var first = selector.charAt( 0 ), arr = [],node;
    if ( first === '#' ) {//如果没有搜索到元素，空也加进了数组，所以要对其进行判断
        //arr.push.call( arr, document.getElementById( selector.slice( 1 ) ) )    
        node = document.getElementById( selector.slice( 1 ) );
        if ( node ) {
            arr.push.call( arr, node );   // [ null ] 
        } else {
            return null;
        }
    } else if ( first === '.' ) {
        arr.push.apply( arr, document.getElementsByClassName( selector.slice( 1 ) ) )
    } else {
        arr.push.apply( arr, document.getElementsByTagName( selector ) );
    }
    return arr;
};

var parseHTML = function ( html ) {
    var div = document.createElement( 'div' ),
        arr = [], i;
    div.innerHTML = html;
    for ( i = 0; i < div.childNodes.length; i++ ) {
        arr.push( div.childNodes[ i ] );
    }
    return arr;
};

// 基本的工具方法
YY.extend({
    each: function ( arr, fn ) {
        var i, l = arr.length, 
            isArray = YY.isLikeArray( arr );
        if ( isArray ) {
            // 数组
            for ( i = 0; i < l; i++ ) {
                if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
                    break;
                }
            }
        } else {
            // 对象
            for ( i in arr ) {
                if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
                    break;
                }
            }
        }
        return arr;
    },
    push: push
});
YY.extend({
    firstChild: function (dom){
        var node,i,l = dom.childNodes.length;
        for(i = 0;i < 1;i++){
            node = dom.childNodes[i];
            if(node.nodeType === 1){
                return node;
            }
        }
    }
});


// 判断类型的方法
YY.extend({
    isFunction: function ( obj ) {
        return typeof obj === 'function';
    },
    isString: function ( obj ) {
        return typeof obj === 'string';
    },
    isLikeArray: function ( obj ) {
        return obj && obj.length && obj.length >= 0;
    },
    isYY: function ( obj ) {
        return 'selector' in obj;//判断对象原型中有无此属性来判断是否为YY对象
        // 'selector' in obj
        // obj.hasOwnProperty( 'selector' )
        // return obj.constructor.name === 'YY';
    },
    isDOM: function ( obj ) {
        return !!obj.nodeType;
    }
});


// 基本的 DOM 操作
YY.fn.extend({
    appendTo: function ( selector ) {
        var objs = YY( selector ),
            i, j,
            len1 = objs.length,
            len2 = this.length,
            arr = [],node;
        // 将 this 加到 objs 中
        for ( i = 0; i < len1; i++ ) {
            for ( j = 0; j < len2; j++ ) {
                node = i === len1 - 1 ? 
                            this[ j ] :
                            this[ j ].cloneNode( true );
                arr.push(node);
                objs[ i ].appendChild(  );
            }
        }
        return YY(arr);//注意返回的对象
    },
    
    append: function (selector){
        YY(selector).appendTo(this);
        return this;
    },
    prependTo: function(selector){
        //insertBefore(新元素，参考元素)
        
        var objs = YY(selector),
        i,j,
        len1 = this.length;
        len2 = objs.lenght;
        for(i = 0;i < len2;i++){
            for(j = 0;j < len1;j++){
                objs[i].insertBefore(i ===len2 - 1?
                    this[j]:
                    this[j].cloneNode(true),
                    YY.firstChild);
            }
        }
        return this;
    },
    remove: function(){}
});




// 对外公开
window.I = window.YY = YY;

})( window );

对以上函数封装为dom.js文件

1、验证appendTo方法代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #login {
                 540px;
                height: 340px;
                background-color: gray;
                margin: 80px auto;
                padding: 30px;
            }
        </style>
        <script src="dom.js"></script>
        <script>
        
            onload = function () {
                I( '#loginBtn' )[ 0 ].onclick = function ( e ) {
                    if ( I( '#login' ).length > 0 ) return;
                    
                    // alert( e );
                    // 弹出一个登录窗口
                    var ilogin = I( '<div id="login"></div>' );
                    ilogin.appendTo( 'body' );    
                    // 设计内部的结构
                    I( '<input type="text" id="uid"/><br />' +
                       '<input type="password" id="pwd"/><br />' +
                       '<input type="button" value="登 录" id="btn"/><br />' +
                       '<input type="button" value="取消" id="cancel"/>'
                    ).appendTo( ilogin );
                    
                    
                    I('#cancel')[ 0 ].onclick = function () {
                        var node = I( '#login' )[ 0 ];
                        node.parentNode.removeChild( node );
                    };
                };
            };
        </script>
    </head>
    <body>
        <input type="button" value="登录" id="loginBtn" />
    </body>
</html>

2、验证append方法代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #login {
                 540px;
                height: 340px;
                background-color: gray;
                margin: 80px auto;
                padding: 30px;
            }
        
        </style>
        <script src="dom.js"></script>
        <script>
            onload = function () {
                I( '#loginBtn' )[ 0 ].onclick = function ( e ) {
                    if ( I( '#login' ).length > 0 ) return;
                    
                    // alert( e );
                    // 弹出一个登录窗口
                    var ilogin = I( '<div id="login"></div>' );
                    
                    I( 'body' ).append( ilogin );
                    // 设计内部的结构
                    ilogin.append( '<input type="text" id="uid"/><br />' +
                       '<input type="password" id="pwd"/><br />' +
                       '<input type="button" value="登 录" id="btn"/><br />' +
                       '<input type="button" value="取消" id="cancel"/>'
                    );
                        
                    I('#cancel')[ 0 ].onclick = function () {
                        var node = I( '#login' )[ 0 ];
                        node.parentNode.removeChild( node );
                    };
                };
            };
        </script>
    </head>
    <body>
        <input type="button" value="登录" id="loginBtn" />
    </body>
</html>

3、验证prependTo方法代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #login {
                 540px;
                height: 340px;
                background-color: gray;
                margin: 80px auto;
                padding: 30px;
            }
        </style>
        <script src="dom.js"></script>
        <script>
            onload = function () {
                I( '<p>YY</p>' ).prependTo( 'div' );
            };
        </script>
    </head>
    <body>
        <div>
            <p>hellow world</p>
            <p>hellow YY</p>
        </div>
        <div>
            <p>hellow world</p>
            <p>hellow YY</p>
        </div>
    </body>
</html>

方法待续，感谢您的查阅