1.jQuery運(yùn)用了沙箱模型时捌,使用閉包來(lái)隔離變量藕筋,制造出塊級(jí)作用域揣云,防止全局變量污染。
(function(window,undefined){
/*源碼*/
})(window)
2.jQuery在閉包內(nèi)導(dǎo)出局部變量為window的全局變量斜筐,對(duì)外暴露出$和jQuery兩個(gè)關(guān)鍵字龙致。
window.jQuery = window.$ = jQuery;
3.jQuery選擇器的實(shí)現(xiàn)原理及其原型對(duì)象。
jQuery最核心的功能就是選擇器顷链。選擇器簡(jiǎn)單來(lái)說(shuō)就是找到DOM對(duì)象的工具目代。
在jQuery源碼中,可以發(fā)現(xiàn),jQuery對(duì)象其實(shí)就是init對(duì)象
jQuery = function(selector,context){
return new jQuery.fn.init(selector,context);
}
在源碼中可以發(fā)現(xiàn)榛了,jQuery.fn就是jQuery對(duì)象的原型
jQuery.fn = jQuery.prototype;
jQuery.fn.init.prototypt = jQuery.fn;
由上可知在讶,init對(duì)象和jQuery對(duì)象有相同的原型,所以在上面return init霜大,就與jQuery對(duì)象有相同的屬性和方法了构哺。
引申問(wèn)題:
1.jQuery.fn的init方法返回的this指的是什么對(duì)象?為什么要返回this战坤?
init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc;
// Handle $(""), $(null), or $(undefined)
if ( !selector ) {
console.log(this); // this是個(gè)空的類數(shù)組對(duì)象曙强,這是為什么?
return this;
}
這里返回的this就是jQuery.fn(=jQuery.prototype)途茫,也就是一個(gè)jQuery原型的實(shí)例碟嘴。
返回this是因?yàn)橐蓪?duì)于對(duì)象的操作,所以需要生成這個(gè)DOM元素的jQuery實(shí)例囊卜。
2.jquery中如何將數(shù)組轉(zhuǎn)化為json字符串娜扇,然后再轉(zhuǎn)化回來(lái)?
1.原生JSON方法:
var arr = [1,2,3,4,5,6];
var jsonStr = JSON.stringify(arr);
console.log(jsonStr);//"[1,2,3,4,5,6]"
var arr_ = JSON.parse(jsonStr);
console.log(arr_);//obj:[1, 2, 3, 4, 5, 6]
console.log("arr = ? arr_:");
console.log(arr == arr_);//false
2.jQuery定義了parseJSON()方法栅组,但沒(méi)有定義stringify()方法雀瓢,所以后者要自己添加
jQuery.parseJSON = function( data ) {
return JSON.parse( data + "" );
};
自己添加stringify
$.fn.stringify = function() {
return JSON.stringify(this);
}
var jsonStr = $([1,2,3]).stringify();
alert(jsonStr);//"{"0":1,"1":2,"2":3,"length":3}"
3.jQuery 的屬性拷貝(extend)的實(shí)現(xiàn)原理是什么,如何實(shí)現(xiàn)深拷貝玉掸?
復(fù)制屬性或者方法要區(qū)分是基本類型(復(fù)制)還是引用類型(復(fù)制了指針)致燥。
深復(fù)制就是要把對(duì)象類型或者數(shù)組類型的屬性依次遍歷,重新賦給新生成的對(duì)象排截,
基本類型:Number嫌蚤、String、Boolean断傲、null脱吱、Undefined不存在深淺復(fù)制的問(wèn)題,復(fù)制都是深復(fù)制认罩。
引用類型:Object(一般的對(duì)象箱蝠、Array)這個(gè)區(qū)分淺復(fù)制(復(fù)制指針,修改會(huì)改變?cè)瓉?lái)的)垦垂,深復(fù)制(從新生成一個(gè)對(duì)象或者數(shù)組宦搬,依次復(fù)制每個(gè)元素,或者JSON對(duì)象方法劫拗,轉(zhuǎn)成字符串间校,再轉(zhuǎn)回來(lái)就回程一個(gè)新的對(duì)象)
4.針對(duì) jQuery 的優(yōu)化方法?
1页慷、總是使用#id去尋找element.
在jQuery中最快的選擇器是ID選擇器 ($('#someid')). 這是因?yàn)樗苯佑成錇镴avaScript的getElementById()方法憔足。
2胁附、在Classes前面使用Tags
在jQuery中第二快的選擇器就是Tag選擇器 ($('head')). 而這是因?yàn)樗苯佑成涞絁avaScript的getElementsByTagName()方法。
注意:在jQuery里Class選擇器是最慢的一個(gè)選擇器;在IE中它循環(huán)整個(gè)DOM滓彰】仄蓿可能的話盡量避免使用它。不要在ID前面 加Tags揭绑。
3弓候、緩存jQuery對(duì)象,對(duì)于同一個(gè)dom的多個(gè)操作的時(shí)候他匪,最好緩存到一個(gè)變量上弓叛,就像len = arr.length; 避免多次超找或者計(jì)算。
提示:使用$前輟表示我們的本地變量是一個(gè)jQuery包集诚纸。記住,不要在你的應(yīng)該程序里出現(xiàn)一次以上的jQuery重復(fù)的選擇操作陈惰。 額外提示:延遲存儲(chǔ)jQuery對(duì)象結(jié)果畦徘。
4、更好的利用鏈抬闯,連式操作井辆,避免多寫代碼,或者查詢溶握。
5杯缺、使用子查詢
jQuery允許我們?cè)谝粋€(gè)包集上附加其它的選擇器。因?yàn)槲覀円呀?jīng)在本地變量里保存了父對(duì)象這樣會(huì)減少以后在選擇器上的性能開銷睡榆。
主要使用find實(shí)現(xiàn):
var $traffic_light = $('#traffic_light'),
$active_light = $traffic_light.find('input.on'),
$inactive_lights = $traffic_light.find('input.off');
提示:可以用逗號(hào)隔開一次定義多個(gè)本地變量萍肆,這樣可以節(jié)省一些字節(jié)。
6胀屿、限制直接對(duì)DOM操作
7塘揣、事件委托(又名:冒泡事件)
除非特別說(shuō)明,每一個(gè)JavaScript事件(如click, mouseover 等)在DOM結(jié)構(gòu)樹上都會(huì)冒泡到它的父元素上宿崭。如果我們想讓很多elements(nodes)調(diào)用同一個(gè)function這是非常有用的亲铡。
8、消除查詢浪費(fèi)
9葡兑、遵從$(windows).load
10奖蔓、壓縮JS
5.jQuery 的隊(duì)列是如何實(shí)現(xiàn)的?隊(duì)列可以用在哪些地方讹堤?
jQuery核心中, 有一組隊(duì)列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個(gè)方法組成, 它可以控制需要連續(xù)按序執(zhí)行的函數(shù),
主要應(yīng)用于animate()方法, ajax以及其他要按時(shí)間順序執(zhí)行的事件中.
了解部分:
queue(name,[callback]): 當(dāng)只傳入一個(gè)參數(shù)時(shí), 它返回并指向第一個(gè)匹配元素的隊(duì)列(將是一個(gè)函數(shù)數(shù)組,隊(duì)列名默認(rèn)是fx);
當(dāng)有兩個(gè)參數(shù)傳入時(shí), 第一個(gè)參數(shù)還是默認(rèn)為fx的的隊(duì)列名,
第二個(gè)參數(shù)又分兩種情況, 當(dāng)?shù)诙€(gè)參數(shù)是一個(gè)函數(shù)時(shí), 它將在匹配的元素的隊(duì)列最后添加一個(gè)函數(shù). 當(dāng)?shù)诙€(gè)參數(shù)是一個(gè)函數(shù)數(shù)組時(shí),它將匹配元素的隊(duì)列用新的一個(gè)隊(duì)列來(lái)代替(函數(shù)數(shù)組).可能, 這個(gè)理解起來(lái)有點(diǎn)暈.
dequeue(name): 這個(gè)好理解, 就是從隊(duì)列最前端移除一個(gè)隊(duì)列函數(shù), 并執(zhí)行它.移除然后執(zhí)行吆鹤,知道全部執(zhí)行完成。
clearQueue([queueName]):這是1.4新增的方法. 清空對(duì)象上尚未執(zhí)行的所有隊(duì)列. 參數(shù)可選,默認(rèn)為fx. 但個(gè)人覺(jué)得這個(gè)方法沒(méi)多大用, 用queue()方法傳入兩個(gè)參數(shù)的第二種參數(shù)即可實(shí)現(xiàn)clearQueue方法.