Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
421 views
in Technique[技术] by (71.8m points)

原生jquery封装问题。

1、为什么原生jquery 中的方法不是直接挂载在原型对象上,而是将函数体直接挂载在构造函数对象上面,然后通过上下文调用这个方法,再使得实例拥有这个方法。
例如 :

(function ( window ) {

// 注意: 由于 核心模块应该首先执行, 因此在这里 $ 构造函数, I 函数等可以直接使用
    var $ = window.$,
        I = $,
        arr = [],
        push = arr.push;

// 给 $ 的 原型增加一个属性, 以便可以容易的判断当前对象的类型
    $.fn.type = '$';


    var init = $.fn.init = function ( selector ) {
        // 需要判断, 根据传入的数据不同而实现不同的功能

        // 处理: null, undefined, '', 等
        if ( !selector ) return this;

        // 处理字符串: 选择器 和 html 格式的字符串
        if ( typeof selector == 'string' ) {
            // 判断是选择器 还是 html 字符串
            if ( selector.charAt( 0 ) == '<' && selector.charAt( selector.length - 1 ) == '>' ) {
                // HTML 标签
                push.apply( this, $.parseHTML( selector ) );
                return this;
            } else {
                // 选择器
                push.apply( this, $.select( selector ) );
                return this;
            }
        }

        // 处理 dom 元素: nodeType
        if ( selector.nodeType ) {
            // 如果是 DOM 元素, 应该将其包装成 一个 $ 的对象
            // 但是 $ 对象本质有是一个伪数组

            // this[ 0 ] = selector;
            // this.length = 1;

            push.call( this, selector );

            return this;
        }

        // 处理 $ 元素: 
        // 1> 使用 constructor
        // 2> 使用 自定义的一个属性
        // 暂时使用 第一种做法
        // if ( selector.constructor == $ ) {
        if ( selector.type === '$' ) {
            // 1, 直接返回传入的 $ 对象
            // return selector;
            console.log( '新的判断方法' )

            // 2, 将传入 $ 对象中的每一个元素 一一加到 this 中, 构成一个新的 对象.
            push.apply( this, selector );

            return this;
        }


        // 处理 函数
        if ( typeof selector == 'function' ) {

        }

    };

    init.prototype = $.fn;


})( window );

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

为了实现不用new链式调用


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...