关于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 {
                width: 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 {
                width: 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 {
                width: 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>

方法待续，感谢您的查阅