【济南校区】前端就业班笔记框架封装（二） - 黑马程序员技术交流社区

[JavaScript] 纯文本查看 复制代码

  function isArrayLike ( array ) {

        

        var length = array && array.length;



        return typeof length === 'number' && length >= 0;



    }

    function each ( array, callback ) {

        var i, k;

        if ( isArrayLike( array ) ) {

            // 使用 for 循环

            for ( i= 0; i < array.length; i++ ) {

                if( callback.call( array[ i ], i, array[ i ] ) === false ) break;

            }

        } else {

            // 使用 for-in 循环

            for ( k in array ) {

                if( callback.call( array[ i ], k , array[ k ] ) === false ) break;

            }

        }

        return array; 

    }

    function map ( array, callback ) {

        var i, k,

            res = [],

            tmp;

        if ( isArrayLike( array ) ) {

            // 使用 for 循环

            for ( i= 0; i < array.length; i++ ) {

                tmp = callback( array[ i ], i );

                if ( tmp !== undefined ) {

                    res.push( tmp );

                }

            }

        } else {

            // 使用 for-in 循环

            for ( k in array ) {

                tmp = callback( array[ k ], k );

                if ( tmp !== undefined ) {

                    res.push( tmp );

                }

            }

        }

        return res; 

    }



    function select( selector ) {

        return document.querySelectorAll( selector );

    }







    function Itcast( selector ) {

        // 初始化 this 是伪数组

        var list = select( selector );

        [].push.apply( this, list ); // 将 list 中的每一个元素 一一 的加到 this 中, 并且会自增 length 属性

        return this;

    }

    Itcast.prototype = {

        // 添加方法

        constructor: Itcast,

        each: function ( callback ) {

            // 将 this 作为数组, 遍历数组, 使用 callback 处理数组的每一个元素

            each( this, callback );

        },

        map: function( callback ) {

            map( this, callback );

        }

    }





    new Itcast( 'div, span' ).each(function () {

        this.style.border = '1px dashed red';

    })

2> 隐藏 new 关键字
因此只出需要提供工厂函数, 就可以在不写 new 的情况下, 创建对象了.

[JavaScript] 纯文本查看 复制代码

            function I( selector ) {

                return new Itcast( selector );

            }

在实际开发中, 常常为了避免全局污染. 会将所有的代码全部放到一个沙箱中.因此需要全局暴露, 一个就是 I 这个函数, 另一个就是 Itcast.
1> 将 I 暴露是因为开发的需要, 使用 I 表示与 jquery 中 $ 一致的功能
2> 将 Itcast 暴露出去是因为需要为 Itcast 对象提供扩展性.

3> 完成框架结构( 初步结构 ) 获得元素使用语法: I( 'div' )，提供方法使用语法: I.Itcast.prototype.XXX = VVV;

[JavaScript] 纯文本查看 复制代码

      function I( selector ) {

                return new Itcast( selector );

            }

将构造函数作为 I 这个函数的原型上的一个成员

[JavaScript] 纯文本查看 复制代码

            function I( selector ) {

                return new Itcast( selector );

            }

            I.prototype = {

                Itcast: Itcast ( selector ) {

                    // ...

                }

            }

目的: 是要可以方便的给 I.prototype.Itcast 这个构造函数的 prototype 属性添加成员将 I.prototype.Itcast 的原型与 I 这个函数的原型变成同一个对象

[JavaScript] 纯文本查看 复制代码

  function I( selector ) {

                return new Itcast( selector );

            }

            I.prototype = {

                Itcast: Itcast ( selector ) {

                    // ...

                }

            }

            I.prototype.Itcast.prototype = I.prototype;

如果给 I.prototype 添加成员, 就是在给 I.prototype.Itcast.prototype 添加成员实际上给实例对象添加的成员是方法, 所以 jquery 给原型增加了一个名字 fn

[JavaScript] 纯文本查看 复制代码

            function I( selector ) {

                return new I.fn.Itcast( selector );

            }

            I.fn = I.prototype = {

                Itcast: Itcast ( selector ) {

                    // ...

                }

            };

            I.fn.Itcast.prototype = I.fn;



           如何要获得元素: I( 'div' )

           如果要增加方法: I.fn.XXX = VVV;

4> 完成框架的核心结构
-> 如果将两个变量映射到全局在 jq 中可以使用 $, 也可以使用 jQuery 构造函数
-> 优化代码将数组抽取出来, 使用数组方法的时候不要再每次都创建数组对象引入参数 window

[JavaScript] 纯文本查看 复制代码

                (function ( w ) {

                    // ...

                    w.document.getElementsByTagName( 'div' )

                    w.I = window.Itcast = Itcast;

                })( window )

-> 核心方法
      1> map 与 each
      2> toArray
         转化成数组. jq 本质就是伪数组. 即将 jq 这个伪数组转换成真正的数组.
         语法:
            $( '...' ).toArray()
      3> get
         使用 get 有两种用法
         -> 不带有任何参数的, 将 jq 这个伪数组, 转换成真正的数组来使用
         -> 带有一个数字型参数. 即索引, 表示返回这个伪数组中对应位置的元素. 如果索引为负数, 即从后往前来获取元素, -1 表示最后一个元素.
         语法:
            $( '...' ).get( ??? )
-> extend 方法
原意: 扩展, 也就是给 jquery 对象扩展静态或实例方法的无论是给构造函数增加静态方法, 还是给实例对象提供原型方法, 都有一个共同的特征给对象添加方法.
extend 就是将外来的对象中提供的成员增加到 this 中、