jQuery-2.0.3学习(1)

出处-Aaron

问题:
1:jQuery对象的构建方式是什么?
2:jQuery方法的调用方式是什么?


jQuery架构的核心:
// Define a local copy of jQuery(构造函数)
var jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
};
jQuery.fn = jQuery.prototype = {
  //原型上的方法和属性
};
jQuery.fn.init.prototype = jQuery.fn;

常规方法调用:
    //定义函数---类
    var GYH = function (selector, context) {
        this.selector = selector;
        this.context = context;
    };
    //定义方法---原型上
    GYH.prototype = {
        getSelector: function () {
            //...
        },
        getContext: function () {
            //...
        }
    };
    //实例化这个函数---类
    var gyh = new GYH('mySelector', 'myContext');
    //调用方法
    gyh.getSelector();
    gyh.getContext();

jQuery方法调用:
    $(selector).ready();        // jQuery(selector).ready();
    $(selector).css();        // jQuery(selector).css();
    $().noConflict();      // jQuery().noConflict();

jQuery没有使用new【实际上在构造函数内部使用new,我们实际调用的时候不需要new】

应该在构造函数的内部返回实例,如何使用呢?
    var GYH = function (selector, context) {
        //...
        return new GYH(selector, context);
    };
    GYH.prototype = {
        getSelector: function () {
            //...
        },
        getContext: function () {
            //...
        }
    };
    GYH('mySelector', 'myContext'); // 显然这样的调用陷入了死循环

jQuery是这样正确返回一个实例的:
    var GYH = function (selector) {
        return GYH.prototype.init();
    };
    GYH.prototype = {
        init: function () {
            return this;  // 原型中的this指向的是这个构造函数的一个实例么???
        },
        getSelector: function () {
            //...
        }
    };
    GYH();//返回的是GYH的一个实例。不需要new。

image.png

上图可见:调用GYH()这个构造函数返回的是该构造函数的一个实例,那么init中的this指向GYH这个构造函数的一个实例。


为什么jQuery要将init函数也作为一个构造器?

image.png

这样每次调用jQuery构造函数都new出了一个新jquery实例对象,主要是分隔了this


这样分隔this带来的问题?
没有new init如下:

image.png

newinit如下:
image.png

可以看出,new问题就是:无法访问GYH这个构造器的原型(prototype)上面的属性和方法。


jQuery是这样解决的:

image.png

image.png

我们的例子也可以访问GYH原型上的属性和方法了:
image.png

为什么age属性返回的是18而不是20呢?
因为是先查找实例上的属性和方法,如果实例上没有,再沿着原型链上查找属性和方法。
解释一下jQuery.fn
其实没有什么用,只是对jQuery.prototype的引用。
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype


问题:jQuery的链式调用时如何实现的?

image.png

解决:方法内最后返回thisthis是什么?,this就是当前jQuery实例对象。
缺点:所有的方法都要返回对象本身。【不一定所有的方法都没有返回值的】
优点:代码更加优雅。


问题:如何写一个jQuery的扩展插件?
解决:jQuery.fn.extend();?来为jQuery实例对象扩展新的属性和方法。

image.png

jQuery.extend();是对jQuery本身的属性和方法进行了扩展;
jQuery.fn.extend();是对jQuery.fn也就是jQuery.prototype上的属性和方法进行了扩展。
上图貌似表明了jQuery.fn.extend();jQuery.extend();都是对同一个函数的引用,那么为什么会实现不同的功能呢???
答案:this的力量。不同的调用,在extend函数内的this的指向是不同的。
jQuery.extend();这样调用,extend函数内的this是指向jQuery构造器的。
jQuery.fn.extend();这样调用,extend函数内的this是指向jQuery.prototype即原型的。


  (function (window, undefined) {
        var
            rootjQuery,
            jQuery = function( selector, context ) {
                return new jQuery.fn.init( selector, context, rootjQuery );
            };
        jQuery.fn = jQuery.prototype = {
            init: function () {
                return this;
            }
        };
        jQuery.fn.init.prototype = jQuery.fn;
        jQuery.extend = jQuery.fn.extend = function() {
            console.log(this);
        };
        window.$ = jQuery;
    })(window);

    var obj = {a: 0};
    $.extend(obj);
    $.fn.extend(obj);

jQuery的extend函数的实现:【注意只传递一个参数的情况的分支,和this相关】
jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // extend jQuery itself if only one argument is passed
    if ( length === i ) {
        target = this;
        --i;
    }

    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
};

简单的对象复制:


image.png

复杂的对象复制-----浅复制


image.png

复杂的对象复制-----深复制


image.png

jQuery扩展插件的实现方式:
1、通过jQuery.extend();
----->【在jQuery上添加了一个静态方法】
----->【定义方式:$.extend({myPlugin: function(){...}})
----->【调用方式:$.myPlugin();】
----->【作用:定义一些辅助方法比较方便,比如打印日志什么的】

$.extend({
    log: function(message) {
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth() + 1, //!JavaScript中月分是从0开始的
            d = now.getDate(),
            h = now.getHours(),
            min = now.getMinutes(),
            s = now.getSeconds(),
            time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
        console.log(time + '----------------My App: ----------------' + message);
    }
})
$.log('initializing...'); //调用
$.log('debugging...');

image.png

----->【缺点:无法利用jQuery强大的选择器带来的便利】
2、通过jQuery.fn.myPlugin = function(){...};
----->【在jQuery原型对象上新添加了一个方法】
----->【定义方式:jQuery.fn.myPlugin = function(){...};

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,717评论 2 17
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,237评论 24 450
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,321评论 0 2
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 1,140评论 0 0
  • JavaScript 介绍js的基本数据类型。 Undefined、Null、Boolean、Number、St...
    cuikangjie阅读 468评论 0 3