成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jQuery源碼分析1-jQuery對象的初始化

qiangdada / 1321人閱讀

摘要:那么為什么要在參數(shù)列表中增加呢這樣做也有兩個目的因為有些低版本的瀏覽器中是可以被重新賦值的,在自調(diào)用匿名函數(shù)的作用域內(nèi),確保是真的未定義。

1、命名空間

為什么要使用命名空間?

在一些語言中會看到有命名空間的概念,可在js中并沒有,但是可以通過閉包來實現(xiàn)。在js閉包中定義的變量會被保存到一個作用域且不會污染全局變量,在程序運行完之后也不會被銷毀。

我們可以看到,jQuery的做法就是使用了一個匿名函數(shù)形成一個閉包,然后該匿名函數(shù)自調(diào)用,所有的代碼都在這個閉包中完成,這樣就不會對全局變量污染,但是無法在其他地方訪問該閉包內(nèi)的變量,所以我們可以將window對象傳入該匿名函數(shù),然后將jQuery對象進行暴露,并且在暴露jQuery對象時,給jQuery對象賦了一個別名 $ ,這樣就可以通過暴露的 jQuery 或者 $ 訪問閉包內(nèi)的其他變量了。

(function(window,undefined){
    //code
    
    if ( typeof window === "object" && typeof window.document === "object" ) {
        window.jQuery = window.$ = jQuery;
    }
})(window);

我們可以看到在這個匿名函數(shù)自調(diào)用時,傳入了window對象,這樣做不僅是為了暴露接口,還有兩個原因:

使得window由全局變量變?yōu)榫植孔兞浚?dāng)在jQuery代碼塊中訪問window對象時,不需要將作用域鏈回退到頂層作用域,這樣可以更快的訪問window。

將window作為參數(shù)傳入,可以在壓縮代碼時進行優(yōu)化。

那么為什么要在參數(shù)列表中增加undefined呢?這樣做也有兩個目的:

1、因為有些低版本的瀏覽器中Undefined是可以被重新賦值的,在自調(diào)用匿名函數(shù)的作用域內(nèi),確保undefined是真的未定義。因為undefined能夠被重寫,賦予新的值。

undefined = "now it"s defined";
alert( undefined );
//我們會發(fā)現(xiàn)在有些低版本的瀏覽器會彈出 "now it"s defined" 的字符串

2、在jquery經(jīng)常要判斷一個值是否為undefined,在壓縮時將undefinde壓縮一字母u,這樣可以節(jié)省大量的空間。

2、一些變量的申明
 _jQuery = window.jQuery
    _$ = window.$

在申明變量時,jQuery先將window對象下的jQuery和$存儲到臨時變量_jQuery和_$中,這是為了防止命名沖突,防止在導(dǎo)入其他庫的時候命名出現(xiàn)重復(fù)導(dǎo)致一個庫無法被調(diào)用,比如prototype也使用 $ 作為接口的。

class2type = {},
core_deletedIds = [],
core_version = "2.0.3",
core_concat = core_deletedIds.concat,
core_push = core_deletedIds.push,
core_slice = core_deletedIds.slice,
core_indexOf = core_deletedIds.indexOf,
core_toString = class2type.toString,
core_hasOwn = class2type.hasOwnProperty,
core_trim = core_version.trim,

class2type、core_deletedIds、core_version就代表三種變量類型,對象、數(shù)組、字符串。然后將這三種變量類型常用的方法進行存儲,再利用call和apply進行方法的借用。
另一方面,調(diào)用實例arr的方法concat時,首先需要辨別當(dāng)前實例arr的類型是Array,在內(nèi)存空間中尋找Array的concat內(nèi)存入口,把當(dāng)前對象arr的指針和其他參數(shù)壓入棧,跳轉(zhuǎn)到concat地址開始執(zhí)行。 當(dāng)保存了concat方法的入口core_concat時,完全就可以省去前面兩個步驟,從而提升一些性能。

后面還申明了一些正則表達式,在后面用到的時候再一一講解,正則表達式真是一個讓人懵逼的東西。

3、嚴格模式
//"use strict";

開頭有一句"use strict",表示使用js的嚴格模式。

因為這是ES5中新增的內(nèi)容,所以低版本的瀏覽器不兼容,低版本的jq默認是不執(zhí)行嚴格模式的。高版本的jq中默認是執(zhí)行嚴格模式的。

在查看jq源碼時,注釋中的有些括號里有#符號開頭的字符,例如(#13335)。
這是對jq版本升級后一些bug的說明,可以在jq官網(wǎng)查看

4、初始化一個jQuery對象
jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context, rootjQuery );
}

可以看到j(luò)Query對象其實相當(dāng)于一個對jQuery.fn.init對象進行實例化的工廠,每次調(diào)用jQuery時,就返回了一個init對象的實例,這樣就實現(xiàn)了免new調(diào)用jQuery對象。

那么這個jQuery.fn.init到底是一個什么東西呢?

jQuery.fn = jQuery.prototype = {  //96行
    init: function(selector, context, rootjQuery) {}
}
jQuery.fn.init.prototype = jQuery.fn;  //283行

可以看到j(luò)Query.fn 就是jQuery對象的原型,然后讓jQuery.fn.init.prototype = jQuery.fn,這樣就相當(dāng)于讓init繼承了jQuery對象上的方法。所以調(diào)用jQuery時,返回的init的實例就相當(dāng)于繼承了jQuery原型上的所有方法,我靠,怎么能這么繞。

但是為什么在調(diào)用jQuery時不直接返回一個jQuery對象,還要先返回init的實例,然后讓init來繼承jQuery的方法呢(我為什么要問這么白癡的問題)?

首先,如果讓jQuery返回jQuery的話這樣就會形成一個死循環(huán),其次如果返回init實例,init又是jQuery原型下的一個方法,init中的this就是jQuery對象,這樣就能輕松的實現(xiàn)鏈式調(diào)用,只要在每個方法中返回this,也就是返回了jQuery對象。

剛開始總會有瑕疵,慢慢加油(我不是雞湯,認真臉)。

感興趣的話可以看看我的github,不妨給個star。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/86657.html

相關(guān)文章

  • jQuery源碼分析2-JQ對象添加一些方法和屬性

    摘要:節(jié)點修改對象的屬性,這就相當(dāng)于把對象轉(zhuǎn)成了一個類數(shù)組,最后返回,可用于鏈式調(diào)用。如果傳入的是單標(biāo)簽,且第二個參數(shù)是一個純對象例如則把后面對象的屬性一一添加到創(chuàng)建的這個節(jié)點的屬性上。 我們先看看jQuery的原型中初始化了哪些屬性和方法: jQuery.fn = jQuery.prototype = { jquery: core_version, //jquery版本號 ...

    TANKING 評論0 收藏0
  • jQuery源碼解析之$().animate()(上)

    摘要:前言需要先看源碼解析之和一舉例的寬度先變成,再變成,最后變成這是在異步調(diào)用中,進行同步調(diào)用動畫是異步的就是連續(xù)調(diào)用二作用通過樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)源碼之前有說過是的方法源碼行是否是空對象,方法執(zhí)行單個動畫的封裝的本質(zhì)是執(zhí)行 showImg(https://segmentfault.com/img/remote/1460000019594521); 前言:需要先看 jQue...

    Batkid 評論0 收藏0
  • FE.SRC-逐行分析jQuery2.0.3源碼-完整筆記

    摘要:根據(jù)項目選型決定是否開啟。為了壓縮,可維護為了支持從而使用代替變量存儲防沖突會用到,形如版本號聲明最終調(diào)用的是這個原型實際上。功能檢測統(tǒng)一兼容性問題。 概覽 (function (){ (21 , 94) 定義了一些變量和函數(shù) jQuery=function(); (96 , 293) 給jQuery對象添加一些方法和屬性; (285 , 347) ...

    Lin_R 評論0 收藏0
  • FE.SRC-逐行分析jQuery2.0.3源碼-完整筆記

    摘要:根據(jù)項目選型決定是否開啟。為了壓縮,可維護為了支持從而使用代替變量存儲防沖突會用到,形如版本號聲明最終調(diào)用的是這個原型實際上。功能檢測統(tǒng)一兼容性問題。 概覽 (function (){ (21 , 94) 定義了一些變量和函數(shù) jQuery=function(); (96 , 293) 給jQuery對象添加一些方法和屬性; (285 , 347) ...

    褰辯話 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<