資訊專欄INFORMATION COLUMN
摘要：作為前端最流行的類庫，沒有之一，源碼必須得讀一讀。本博將不定期更新源碼解讀內(nèi)容，如果解讀不正確的地方，還請同學(xué)們在評論中指正。這里使用的是改變的指向為實例。其實就是中常見的四判斷是否是數(shù)字函數(shù)用于檢查其參數(shù)是否是無窮大。
jQuery作為前端最流行的類庫，沒有之一，源碼必須得讀一讀。本博將不定期更新源碼解讀內(nèi)容，如果解讀不正確的地方，還請同學(xué)們在評論中指正。
本系列文章基于jquery-1.9.1.js。（編者注：雖然JQ已經(jīng)出到2.X，本文所述的方法是基本方法，沒有版本之差，對于學(xué)習(xí)有所幫助）
一、$.type() 判斷js數(shù)據(jù)類型用法：$.type(new Array()); //array
部份源碼(截取關(guān)鍵部份，請忽略源碼語法)：
//生成typelist的map
class2type = {}
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
//每個對象實例都有toString方法
core_toString = class2type.toString
//主方法
type: function( obj ) {
if ( obj == null ) {
return String( obj );
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[ core_toString.call(obj) ] || "object" :
typeof obj;
}
解讀：
1、class2type生成后的內(nèi)容為var class2type = {
"[object Boolean]":"boolean",
"[object Number]":"number",
"[object String]":"string",
"[object Function]":"function",
"[object Array]":"array",
"[object Date]":"date",
"[object RegExp]":"regexp",
"[object Object]":"object",
"[object Error]":"error"
}
2、core_toString使用的是對象實例的toString
所有繼隨自O(shè)bject的對象都有toString方法，為什么一定要使用object.toString，因為array,function雖然有toString方法，但該方法進行了重寫，array調(diào)用toString打印的數(shù)組成員用逗號隔開的字符串。這里使用的是{}.toString.call(obj);改變toString的this指向為object實例。jquery為什么使用的是class2type.toString.call，這樣就可以少聲明一個object。
var func = function(){};
var arr = [];
console.log({}.toString.call(func)); //[object Function]
console.log({}.toString.call(arr)); //[object Array]
這樣就得到class2type的鍵名，以此判斷數(shù)據(jù)類型。
二、$.each() 遍歷一個數(shù)組或?qū)ο蟆?/b>each()其實還是使用的for來進行循環(huán)的，除了方便外，因其做了一下簡單的封裝，所以效率還是要比for差，對于大型循環(huán)，盡量使用for.
三、$.trim() 去除字符串兩端的空格。rtrim = /^[suFEFFxA0]+|[suFEFFxA0]+$/g
core_version = "1.9.1"
//僅僅是使用字符串的trim方法
core_trim = core_version.trim
//主方法，首先嘗試使用字符串原生的trim方法（非IE支持）
//不支持的話，使用String.prototype.trim.call("uFEFFxA0")
//最后使用正則replace
trim: core_trim && !core_trim.call("uFEFFxA0") ?
function( text ) {
return text == null ?
"" :
core_trim.call( text );
} :
// 上述兩個方法不支持，使用自定義的方法，清空兩邊的空格或特殊字符
function( text ) {
return text == null ?
"" :
( text + "" ).replace( rtrim, "" );
}
該方法需要解釋的是，“uFEFF”和“xA0”。
某些軟件，在保存一個以UTF-8編碼的文件時，會在文件開始的地方插入三個不可見的字符（0xEF 0xBB 0xBF，即BOM），轉(zhuǎn)碼后是“uFEFF”，因此我們在讀取時需要自己去掉這些字符。
“xA0”其實就是HTML中常見的“ ”
四、$.isNumeric() 判斷是否是數(shù)字isNumeric: function( obj ) {
return !isNaN( parseFloat(obj) ) && isFinite( obj );
}
isFinite() 函數(shù)用于檢查其參數(shù)是否是無窮大。如果 number 是有限數(shù)字（或可轉(zhuǎn)換為有限數(shù)字），那么返回 true。否則，如果 number 是 NaN（非數(shù)字），或者是正、負(fù)無窮大的數(shù)，則返回 false。
五、$.isEmptyObject() 判斷對象是否為空isEmptyObject: function( obj ) {
var name;
for ( name in obj ) {
return false;
}
return true;
}
這個方法很好懂，就不多解釋
六、$.parseJSON() 將JSON字符串轉(zhuǎn)換為JSON對象// JSON RegExp
rvalidchars = /^[],:{}s]*$/,
rvalidbraces = /(?:^|:|,)(?:s*[)+/g,
rvalidescape = /(?:["/bfnrt]|u[da-fA-F]{4})/g,
rvalidtokens = /"[^"
]*"|true|false|null|-?(?:d+.|)d+(?:[eE][+-]?d+|)/g
parseJSON: function( data ) {
// 如果有原生的JSON對象支持，使用原生對象
if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}
if ( data === null ) {
return data;
}
if ( typeof data === "string" ) {
// 去掉兩端空格,制表符,bom
data = jQuery.trim( data );
if ( data ) {
// 保證輸入的字符串是可用的JSON字符串
if ( rvalidchars.test( data.replace( rvalidescape, "@" )
.replace( rvalidtokens, "]" )
.replace( rvalidbraces, "")) ) {
console.log(data);
return ( new Function( "return " + data ) )();
}
}
}
jQuery.error( "Invalid JSON: " + data );
}
這個方法主要是看上面幾個正則表達式，從字符串轉(zhuǎn)JSON對象，僅僅是使用return ( new Function( “return ” + data ) )();
七、$.globalEval() 在全局作用域執(zhí)行一段JS腳本// 在全局作用域執(zhí)行JS腳本
globalEval: function( data ) {
if ( data && jQuery.trim( data ) ) {
// 在IE中使用execScript
// 因為使用匿名函數(shù)，所以作用域使用的是window
( window.execScript || function( data ) {
window[ "eval" ].call( window, data );
} )( data );
}
}
jQuery該方法源于：Jim Driscoll
方法原理：eval作用域問題
var a = "window";
function b(){
eval("var a = "b"");
}
b();
alert(a); //a的結(jié)果為window；IE、chrome、FF結(jié)果一致
window.eval和eval不一樣的地方：
var a = "window";
function b(){
window.eval("var a = "b"");
}
b();
alert(a); //IE下還是a的結(jié)果還是window,chrome、FF的a的結(jié)果b
via Just Jason"s Blog
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85472.html
摘要：是現(xiàn)在最流行的工具庫。據(jù)統(tǒng)計，目前全世界的網(wǎng)站使用它。好，說了這么多我們就看看自己寫一個庫，有沒有你想想的那么難。寫法寫法三事件的監(jiān)聽四類操作的方法，用于為元素添加一個。 jQuery是現(xiàn)在最流行的JavaScript工具庫。據(jù)統(tǒng)計，目前全世界57.3%的網(wǎng)站使用它。也就是說，10個網(wǎng)站里面，有6個使用jQuery。如果只考察使用工具庫的網(wǎng)站，這個比例就會上升到驚人的91.7%。 因此...
摘要：而在構(gòu)造函數(shù)中，返回了的實例對象。在中直接返回過的實例，這里的是的真正構(gòu)造函數(shù)最后對外暴露入口時，將字符與對等起來。因此當(dāng)我們直接使用創(chuàng)建一個對象時，實際上是創(chuàng)建了一個的實例，這里的正真構(gòu)造函數(shù)是原型中的方法。 showImg(https://segmentfault.com/img/remote/1460000008749398); 早幾年學(xué)習(xí)前端，大家都非常熱衷于研究jQuery源...
摘要：學(xué)習(xí)有許多途徑，我們今天從的函數(shù)開始。本例中的代碼都來自于腳本庫。我們在通過函數(shù)注冊事件處理之前，完成了頁面檢測代碼的注冊。當(dāng)頁面完全加載之后，我們注冊的函數(shù)就被調(diào)用了。八參考的函數(shù)是如何工作的函數(shù)實現(xiàn)原理 如果你對$(document).ready()的理解也僅限于在DOM Tree繪制完畢后觸發(fā)，那么，你也應(yīng)該好好研究下ready的工作原理，因為，TST的面試官問過我這個問題。。。...
摘要：本文源碼為版本。的代碼結(jié)構(gòu)也是一個很經(jīng)典的定義結(jié)構(gòu)構(gòu)造函數(shù)實例修改函數(shù)原型共享實例方法，它提供事件通道上事件的訂閱撤消訂閱調(diào)用。 前言 cordova(PhoneGap) 是一個優(yōu)秀的經(jīng)典的中間件框架，網(wǎng)上對其源代碼解讀的文章確實不多，本系列文章試著解讀一下，以便對cordova 框架的原理理解得更深入。本文源碼為cordova android版本6.1.2。 源碼結(jié)構(gòu) 我們使用IDE...
摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發(fā)布第一篇文章，到月日發(fā)布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。 寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發(fā)中一些功能點的實現(xiàn)，比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里...
閱讀 3237·2023-04-26 01:39
閱讀 3383·2023-04-25 18:09
閱讀 1645·2021-10-08 10:05
閱讀 3266·2021-09-22 15:45
閱讀 2843·2019-08-30 15:55
閱讀 2424·2019-08-30 15:54
閱讀 3190·2019-08-30 15:53
閱讀 1352·2019-08-29 12:32
