1,JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?
jquery源碼封裝在一個匿名函數的自執行環境中,有助於防止變量的全局污染,然後通過傳入window對象參數,可以使window對象作爲局部變量使用,好處是當jquery中訪問window對象的時候,就不用將作用域鏈退回到頂層作用域了,從而可以更快的訪問window對象。同樣,傳入undefined參數,可以縮短查找undefined時的作用域鏈。
(function( window, undefined ) {
//用一個函數域包起來,就是所謂的沙箱
//在這裏邊var定義的變量,屬於這個函數域內的局部變量,避免污染全局
//把當前沙箱需要的外部變量通過函數參數引入進來
//只要保證參數對內提供的接口的一致性,你還可以隨意替換傳進來的這個參數
window.jQuery = window.$ = jQuery;
})( window );
jquery將一些原型屬性和方法封裝在了jquery.prototype中,爲了縮短名稱,又賦值給了jquery.fn,這是很形象的寫法。
有一些數組或對象的方法經常能使用到,jQuery將其保存爲局部變量以提高訪問速度。
jquery實現的鏈式調用可以節約代碼,所返回的都是同一個對象,可以提高代碼效率。
jquery的優勢就是鏈式操作,隱式迭代
2,jQuery.fn的init方法返回的this指的是什麼對象?爲什麼要返回this?
返回的this指的就是當前操作後的jquery對象,爲了實現jquery的鏈式操作
3,jquery中如何將數組轉化爲json字符串,然後再轉化回來?
使用jquery全局方法$.parseJSON這個方法
4,jQuery 的屬性拷貝(extend)的實現原理是什麼,如何實現深拷貝?
jQuery中的$.extend淺拷貝,拷貝對象A時,對象B將拷貝A的所有字段,如果字段是內存地址,B將拷貝地址,若果字段是基元類型,B將複製其值。它的缺點是如果你改變了對象B所指向的內存地址,你同時也改變了對象A指向這個地址的字段。
$.extend(a,b)
jQuery中的$.extend深拷貝,這種方式會完全拷貝所有數據,優點是B與A不會相互依賴(A,B完全脫離關聯), 缺點是拷貝的速度更慢,代價更大。
$.extend(true,a,b)
5,jquery.extend 與 jquery.fn.extend的區別?
jQuery.extend(object); 它是爲jQuery類添加類方法,可以理解爲添加靜態方法。如:
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b;
});
jQuery.min(2,3); // 2
jQuery.max(4,5); // 5
jQuery.extend(target, object1, [objectN])用一個或多個其他對象來擴展一個對象,返回被擴展的對象。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
結果:settings == { validate: true, limit: 5, name: "bar" }
jQuery.fn.extend(object);
$.fn是什麼?
$.fn是指jQuery的命名空間,fn上的成員(方法function及屬性property),會對jQuery實例每一個有效。
查看jQuery代碼,就不難發現。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
};
原來 jQuery.fn = jQuery.prototype.
所以,它是對jQuery.prototype進得擴展,就是爲jQuery類添加“成員函數”。jQuery類的實例可以使用這個“成員函數”。
jQuery.fn.extend(object); 擴展jQuery對象方法
jQuery.extend 擴展jQuery全局方法
6,jQuery 的隊列是如何實現的?隊列可以用在哪些地方?
jQuery核心中, 有一組隊列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個方法組成, 它對需要連續按序執行的函數的控制可以說是簡明自如, 主要應用於animate ()方法, ajax以及其他要按時間順序執行的事件中.
var _slideFun = [
function() {
$('.one').delay(500).animate({
top: '+=270px'
},500, _takeOne);
},
function() {
$('.two').delay(300).animate({
top: '+=270px'
},500, _takeOne);
}
];
$('#demo').queue('slideList', _slideFun);
var _takeOne = function() {
$('#demo').dequeue('slideList');
};
_takeOne();
7,談一下Jquery中的bind(),live(),delegate(),on()的區別?
jquery中bind(),live(),delegate()都是基於on實現的,
on是封裝了一個兼容的事件綁定方法,在選擇元素上綁定一個或多個事件的事件處理函數
bind(type,[data],fn) 爲每個匹配元素的特定事件綁定事件處理函數
live(type,[data],fn) 給所有匹配的元素附加一個事件處理函數,即使這個元素是以後再添加進來的
delegate(selector,[type],[data],fn) 指定的元素(屬於被選元素的子元素)添加一個或多個事件處理程序,並規定當這些事件發生時運行的函數
差別:
.bind()是直接綁定在元素上
.live()則是通過冒泡的方式來綁定到元素上的。更適合列表類型的,綁定到document DOM節點上。和.bind()的優勢是支持動態數據。
.delegate()則是更精確的小範圍使用事件代理,性能優於.live()
.on()則是最新的1.9版本整合了之前的三種方式的新事件綁定機制
8,JQuery一個對象可以同時綁定多個事件,這是如何實現的?
jquery中事件綁定的函數中傳遞多個事件參數,執行事件的時候判斷執行事件的類型
9,針對 jQuery性能的優化方法?
*基於Class的選擇性的性能相對於Id選擇器開銷很大,因爲需遍歷所有DOM元素。
*頻繁操作的DOM,先緩存起來再操作。用Jquery的鏈式調用更好。
比如:var str=$("a").attr("href");
*for (var i = size; i < arr.length; i++) {}
for 循環每一次循環都查找了數組 (arr) 的.length 屬性,在開始循環的時候設置一個變量來存儲這個數字,可以讓循環跑得更快:
for (var i = size, length = arr.length; i < length; i++) {}
10,Jquery與jQuery UI 有啥區別?
(1) jQuery是一個js庫,主要提供的功能是選擇器,屬性修改和事件綁定等等。
(2) jQuery UI則是在jQuery的基礎上,利用jQuery的擴展性,設計的插件。提供了一些常用的界面元素,諸如對話框、拖動行爲、改變大小行爲等等。
(3) jQuery本身注重於後臺,沒有漂亮的界面,而jQuery UI則補充了前者的不足,他提供了華麗的展示界面,使人更容易接受。既有強大的後臺,又有華麗的前臺。jQuery UI是jQuery插件,只不過專指由jQuery官方維護的UI方向的插件。