jquery的2.0.3版本源码系列(2):21行-94行定义了一些变量和函数 jQuery=function(){}
2.1.bug通過(guò)索引查詢
這里的#13335是bug的索引，如何查詢呢？
第一步，瀏覽器地址欄輸入"https://bugs.jquery.com/"。
第二步，在網(wǎng)頁(yè)的搜索框里輸入索引值，那么就可以查詢bug的更改歷史(changelogs)了。
2.2 "use strict"，不使用嚴(yán)格模式(20行)
代碼不規(guī)范就會(huì)報(bào)錯(cuò)。IE的低版本并不支持，火狐可能假死。所以，這一行是一條注釋，并不提倡使用。
"use strict";a=10;//報(bào)錯(cuò)，Uncaught ReferenceError: a is not defined。必須添加上var。還有很多嚴(yán)格模式的報(bào)錯(cuò)，不細(xì)說(shuō)。2.3.變量rootjQuery
根據(jù)注釋?// A central reference to the root jQuery(document)?說(shuō)明他是一個(gè)指向document的根對(duì)象。搜索一下rootjQuery，866行，?rootjQuery = jQuery(document);?接下來(lái)需要了解的是為什么要使用變量的形式，變量能將值語(yǔ)義化。?a=a+10;?這里并不知道10是什么東西，可是如果寫(xiě)成?var iSpeed=10;?那么可維護(hù)性和可讀性會(huì)更高。
2.4.變量readyList
根據(jù)注釋?// The deferred used on DOM ready?說(shuō)明他是一個(gè)DOM加載時(shí)使用的延遲對(duì)象。
2.5.判斷undefined的類型
代碼?core_strundefined = typeof undefined?究竟有什么意圖呢？這是在解決一個(gè)小眾的bug。比如要判斷a屬性有沒(méi)有被定義為window的屬性，可以使用?window.a=="undefined";?和?typeof window.a=="undefined";?兩種方式。可是第一種方式是有兼容問(wèn)題的，第二種才是全能的。正如注釋所說(shuō)，?// Support: IE9，For `typeof xmlNode.method` instead of `xmlNode.method !== undefined`?老版本的IE(6、7、8、9)在第一種方式上有兼容問(wèn)題，為什么注釋里寫(xiě)的是IE9，因?yàn)檫@里的源碼版本是2.0.3，所以就不談IE6、7、8。所以用typeof替代掉直接的邏輯判斷。
2.6.變量location、document和docEle的保存
// Use the correct document accordingly with window argument (sandbox)通過(guò)window參數(shù)來(lái)使用正確的document location = window.location,document = window.document,docElem = document.documentElement,現(xiàn)實(shí)中的沙箱，是一種兒童玩具，類如KFC中一個(gè)裝滿小球的容器，兒童可以在隨意玩耍，起到保護(hù)兒童的作用。所以可以理解為安全環(huán)境。從代碼的角度上說(shuō)好處是把某些要用的屬性用變量保存下來(lái)，那么壓縮的時(shí)候就會(huì)變成字母。location是網(wǎng)址對(duì)象，document是document對(duì)象，docEle是html元素。
2.7.變量_jQuery、_$的保存、class2Type對(duì)象、core_deletedIds數(shù)組的定義
?// Map over jQuery in case of overwrite?映射到j(luò)Query以覆蓋。?// Map over the $ in case of overwrite?映射到$以覆蓋。說(shuō)到這里，不得不說(shuō)，jQuery框架提供給外部的方法是$()和jQuery(),而兩個(gè)變量的作用是防止沖突。具體防沖突的方法在349行-817行的jQuery.extend()工具方法。class2type是$.type要用到的一個(gè)對(duì)象變量，用來(lái)存一些值。
?// List of deleted data cache ids, so we can reuse them?說(shuō)core_deletedIds是用來(lái)羅列刪除的數(shù)據(jù)緩存id,所以我們可以重復(fù)使用它們。太棒了！
2.8.core_打頭的局部變量存儲(chǔ)
?// Save a reference to some core methods?存儲(chǔ)一些core方法的引用。變量的存儲(chǔ)，方便使用(字符串更簡(jiǎn)潔)，而且方便壓縮。
core_version = "2.0.3",//存儲(chǔ)了版本號(hào) core_concat = core_deletedIds.concat,//數(shù)組的concat(合并)方法 core_push = core_deletedIds.push,//數(shù)組的push方法 core_slice = core_deletedIds.slice,//數(shù)組的slice方法 core_indexOf = core_deletedIds.indexOf,core_toString = class2type.toString,//對(duì)象的toString方法 core_hasOwn = class2type.hasOwnProperty,core_trim = core_version.trim,//trim是字符串的方法，去掉字符串首尾空格需要說(shuō)明的事trim方法。在老版本瀏覽器trim方法是沒(méi)有的，所以要通過(guò)正則把首尾空格去掉。高級(jí)瀏覽器就有trim方法了，所以可以直接來(lái)用。這里的jQuery版本2.0.3是放棄了IE6、7、8的，所以這里可以直接使用trim方法。
有首尾空格的代碼:alert("("+" 123456 "+")");?它的顯示效果是有空格的字符串。
使用了trim方法的代碼:?alert("("+" 123456 ".trim()+")");?,它的顯示效果是去掉首尾空格的。
2.9 jQuery函數(shù)
jQuery = function( selector, context ) {// The jQuery object is actually just the init constructor 'enhanced'//jQuery對(duì)象實(shí)際上，僅僅是初始化構(gòu)造器的增強(qiáng)版本。return new jQuery.fn.init( selector, context, rootjQuery );},
jQuery函數(shù)通過(guò)8826行的? window.jQuery=window.$=jQuery;?暴露給外部jQuery的接口。對(duì)外提供的接口就是?$()?或者?jQuery()?。可以看到j(luò)Query返回的是一個(gè)對(duì)象，所以后面可以接方法，包括鏈?zhǔn)秸{(diào)用，比如?$("#div1").css();?。我們看見(jiàn)jQuery.fn.init，因?yàn)樵?jQuery.fn = jQuery.prototype = {96行說(shuō)的是prototype是fn，所以就是在原型上找init函數(shù)。
普通的面向?qū)ο髮?xiě)法是通過(guò)protoype寫(xiě)init和css方法，為了調(diào)用css方法需要先用new方法寫(xiě)構(gòu)造器，然后使用init方法調(diào)用，最后才能調(diào)用到css方法。
function Aaa(){}Aaa.prototype.init=function(){//初始化 } Aaa.prototype.css=function(){}var al=new Aaa();al.init();al.css()jQuery的面向?qū)ο髮?xiě)法是非常巧妙的，最終讓$().css()能夠成功找到css方法。
function jQuery(){return new jQuery.prototype.init();}jQuery.prototype.init=function(){};jQuery.prototype.css=function(){}; jQuery.fn.init.prototype = jQuery.fn;//fn也就是protoype。283行。 jQuery().css();//調(diào)用jQuery()返回的是jQuery.prototype(jQuery原型)的init函數(shù)的原型構(gòu)造器。它呢由于283行的賦值，所以剛剛的值就是jQuery.prototype。
//如上，調(diào)用jQuery()。得到的結(jié)果是jQuery.prototype。所以css就可以通過(guò)jQuery().css()。
2.10 正則有關(guān)的變量
關(guān)于core_pnum的正則，?// Used for matching numbers?用來(lái)匹配數(shù)字的，比如正數(shù)啊、負(fù)數(shù)啊，有沒(méi)有小數(shù)點(diǎn)，以及科學(xué)計(jì)數(shù)法。到css方法的時(shí)候要設(shè)置寬和高，要用到數(shù)字。
?core_rnotwhite = /\S+/g,?這個(gè)正則呢，?// Used for splitting on whitespace?是當(dāng)字符串要用空格分割一下。? // A simple way to check for HTML strings // Prioritize #id over <tag> to avoid XSS via location.hash (#9521) // Strict HTML recognition (#11290: must start with <)?rquickExpr是一個(gè)簡(jiǎn)單的方式來(lái)檢查HTML字符串，前面部分是匹配標(biāo)簽，后面部分是匹配id。它可以用來(lái)防XSS注入。rsingleTag是匹配獨(dú)立的標(biāo)簽。
msPrefix的ms是IE瀏覽器前綴，它跟其他瀏覽器前綴有區(qū)別。css中的margin-left在html DOM的屬性是marginLeft。-webkit-margin-left在HTML DOM的屬性是webkitMarginLeft。而-ms-margin-left在html DOM的屬性是MsMarginLeft。rdashAlpha匹配的比如-2d，會(huì)修改為2d。
2.11 回調(diào)函數(shù)fcamelCase和completed
fcamelCase在jQuery.camelCase作為回調(diào)函數(shù)使用。completed是ready事件的處理器和自身的清除方法。轉(zhuǎn)載于:https://www.cnblogs.com/chenmeng2062/p/6728289.html
總結(jié)
以上是生活随笔為你收集整理的jquery的2.0.3版本源码系列(2):21行-94行定义了一些变量和函数 jQuery=function(){}的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Code Complete
- 下一篇： 富文本编辑器的配置使用