jQuery-2.0.3學(xué)習(xí)(1)

出處-Aaron

問題:
1:jQuery對(duì)象的構(gòu)建方式是什么搭独?
2:jQuery方法的調(diào)用方式是什么?


jQuery架構(gòu)的核心:
// Define a local copy of jQuery(構(gòu)造函數(shù))
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;

常規(guī)方法調(diào)用:
    //定義函數(shù)---類
    var GYH = function (selector, context) {
        this.selector = selector;
        this.context = context;
    };
    //定義方法---原型上
    GYH.prototype = {
        getSelector: function () {
            //...
        },
        getContext: function () {
            //...
        }
    };
    //實(shí)例化這個(gè)函數(shù)---類
    var gyh = new GYH('mySelector', 'myContext');
    //調(diào)用方法
    gyh.getSelector();
    gyh.getContext();

jQuery方法調(diào)用:
    $(selector).ready();        // jQuery(selector).ready();
    $(selector).css();        // jQuery(selector).css();
    $().noConflict();      // jQuery().noConflict();

jQuery沒有使用new【實(shí)際上在構(gòu)造函數(shù)內(nèi)部使用new折欠,我們實(shí)際調(diào)用的時(shí)候不需要new】

應(yīng)該在構(gòu)造函數(shù)的內(nèi)部返回實(shí)例患蹂,如何使用呢?
    var GYH = function (selector, context) {
        //...
        return new GYH(selector, context);
    };
    GYH.prototype = {
        getSelector: function () {
            //...
        },
        getContext: function () {
            //...
        }
    };
    GYH('mySelector', 'myContext'); // 顯然這樣的調(diào)用陷入了死循環(huán)

jQuery是這樣正確返回一個(gè)實(shí)例的:
    var GYH = function (selector) {
        return GYH.prototype.init();
    };
    GYH.prototype = {
        init: function () {
            return this;  // 原型中的this指向的是這個(gè)構(gòu)造函數(shù)的一個(gè)實(shí)例么城菊??碉克?
        },
        getSelector: function () {
            //...
        }
    };
    GYH();//返回的是GYH的一個(gè)實(shí)例凌唬。不需要new。

image.png

上圖可見:調(diào)用GYH()這個(gè)構(gòu)造函數(shù)返回的是該構(gòu)造函數(shù)的一個(gè)實(shí)例漏麦,那么init中的this指向GYH這個(gè)構(gòu)造函數(shù)的一個(gè)實(shí)例客税。


為什么jQuery要將init函數(shù)也作為一個(gè)構(gòu)造器?

image.png

這樣每次調(diào)用jQuery構(gòu)造函數(shù)都new出了一個(gè)新jquery實(shí)例對(duì)象撕贞,主要是分隔了this


這樣分隔this帶來的問題更耻?
沒有new init如下:

image.png

newinit如下:
image.png

可以看出,new問題就是:無法訪問GYH這個(gè)構(gòu)造器的原型(prototype)上面的屬性和方法捏膨。


jQuery是這樣解決的:

image.png

image.png

我們的例子也可以訪問GYH原型上的屬性和方法了:
image.png

為什么age屬性返回的是18而不是20呢秧均?
因?yàn)槭窍炔檎覍?shí)例上的屬性和方法食侮,如果實(shí)例上沒有,再沿著原型鏈上查找屬性和方法目胡。
解釋一下jQuery.fn
其實(shí)沒有什么用锯七,只是對(duì)jQuery.prototype的引用。
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype


問題:jQuery的鏈?zhǔn)秸{(diào)用時(shí)如何實(shí)現(xiàn)的讶隐?

image.png

解決:方法內(nèi)最后返回this起胰。this是什么?巫延,this就是當(dāng)前jQuery實(shí)例對(duì)象效五。
缺點(diǎn):所有的方法都要返回對(duì)象本身÷澹【不一定所有的方法都沒有返回值的】
優(yōu)點(diǎn):代碼更加優(yōu)雅畏妖。


問題:如何寫一個(gè)jQuery的擴(kuò)展插件?
解決:jQuery.fn.extend();?來為jQuery實(shí)例對(duì)象擴(kuò)展新的屬性和方法疼阔。

image.png

jQuery.extend();是對(duì)jQuery本身的屬性和方法進(jìn)行了擴(kuò)展戒劫;
jQuery.fn.extend();是對(duì)jQuery.fn也就是jQuery.prototype上的屬性和方法進(jìn)行了擴(kuò)展。
上圖貌似表明了jQuery.fn.extend();jQuery.extend();都是對(duì)同一個(gè)函數(shù)的引用婆廊,那么為什么會(huì)實(shí)現(xiàn)不同的功能呢迅细??淘邻?
答案:this的力量茵典。不同的調(diào)用,在extend函數(shù)內(nèi)的this的指向是不同的宾舅。
jQuery.extend();這樣調(diào)用统阿,extend函數(shù)內(nèi)的this是指向jQuery構(gòu)造器的。
jQuery.fn.extend();這樣調(diào)用筹我,extend函數(shù)內(nèi)的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函數(shù)的實(shí)現(xiàn):【注意只傳遞一個(gè)參數(shù)的情況的分支,和this相關(guān)】
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;
};

簡(jiǎn)單的對(duì)象復(fù)制:


image.png

復(fù)雜的對(duì)象復(fù)制-----淺復(fù)制


image.png

復(fù)雜的對(duì)象復(fù)制-----深復(fù)制


image.png

jQuery擴(kuò)展插件的實(shí)現(xiàn)方式:
1蔬蕊、通過jQuery.extend();
----->【在jQuery上添加了一個(gè)靜態(tài)方法】
----->【定義方式:$.extend({myPlugin: function(){...}})
----->【調(diào)用方式:$.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...'); //調(diào)用
$.log('debugging...');

image.png

----->【缺點(diǎn):無法利用jQuery強(qiáng)大的選擇器帶來的便利】
2袁串、通過jQuery.fn.myPlugin = function(){...};
----->【在jQuery原型對(duì)象上新添加了一個(gè)方法】
----->【定義方式:jQuery.fn.myPlugin = function(){...};

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末概而,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子囱修,更是在濱河造成了極大的恐慌,老刑警劉巖王悍,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件破镰,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)鲜漩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門源譬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人孕似,你說我怎么就攤上這事踩娘。” “怎么了喉祭?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵养渴,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我泛烙,道長(zhǎng)理卑,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任蔽氨,我火速辦了婚禮藐唠,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘鹉究。我一直安慰自己宇立,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布自赔。 她就那樣靜靜地躺著妈嘹,像睡著了一般。 火紅的嫁衣襯著肌膚如雪匿级。 梳的紋絲不亂的頭發(fā)上蟋滴,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音痘绎,去河邊找鬼津函。 笑死,一個(gè)胖子當(dāng)著我的面吹牛孤页,可吹牛的內(nèi)容都是我干的尔苦。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼行施,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼允坚!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蛾号,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤稠项,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后鲜结,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體展运,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡活逆,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拗胜。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蔗候。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖埂软,靈堂內(nèi)的尸體忽然破棺而出锈遥,到底是詐尸還是另有隱情,我是刑警寧澤勘畔,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布所灸,位于F島的核電站,受9級(jí)特大地震影響咖杂,放射性物質(zhì)發(fā)生泄漏庆寺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一诉字、第九天 我趴在偏房一處隱蔽的房頂上張望懦尝。 院中可真熱鬧,春花似錦壤圃、人聲如沸陵霉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽踊挠。三九已至,卻和暖如春冲杀,著一層夾襖步出監(jiān)牢的瞬間效床,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國打工权谁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留剩檀,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓旺芽,卻偏偏與公主長(zhǎng)得像沪猴,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子采章,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品运嗜,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式悯舟。簡(jiǎn)單...
    舟漁行舟閱讀 7,779評(píng)論 2 17
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,430評(píng)論 24 450
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式担租。設(shè)計(jì)者無需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,349評(píng)論 0 2
  • @轉(zhuǎn)自GitHub 介紹js的基本數(shù)據(jù)類型抵怎。Undefined翩活、Null阱洪、Boolean便贵、Number菠镇、Strin...
    YT_Zou閱讀 1,163評(píng)論 0 0
  • JavaScript 介紹js的基本數(shù)據(jù)類型。 Undefined承璃、Null利耍、Boolean、Number盔粹、St...
    cuikangjie閱讀 475評(píng)論 0 3