[学习交流] 【济南校区】前端就业班笔记框架封装（二）

本帖最后由小鲁哥哥于 2018-4-6 14:08 编辑

【济南校区】前端就业班笔记框架封装（二）

框架核心结构
-> 核心结构
1> 带有 new 构造函数的形式
         目标:
         -> 定义 Itcast 构造函数
         -> 利用构造函数创建对象, 即获得页面中的元素( 即, 参数就是选择器 )
         -> 对象应该是一个伪数组, 里面存储着所有的获得到的 DOM 元素
         -> 该对象还需要提供方法, 方法存储到原型中
         优点:
            -> 代码结构紧凑, 不易出错, 书写少很多
            -> 含有隐式迭代, 写起来简单
         缺点:
            -> new 关键字可以考虑消化掉
            -> 隐式迭代太少, 可以考虑可扩展性
            -> 链式编程需要强化

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

<body>
    <div>div</div>
    <p>pppp</p>
    <span>span</span>
    <span>span</span>
    <div>div</div>
    <span>span</span>
    <p>pppp</p>
    <span>span</span>
    <span>span</span>
    <div>div</div>
    <span>span</span>
    <p>pppp</p>
    <span>span</span>
    <span>span</span>
    <div>div</div>
</body>

[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 中、

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【济南校区】前端就业班笔记框架封装（二）

0 个回复

黑马骑士勋章

优秀作者