jQuery

1. 你覺得jQuery或zepto原始碼有哪些寫的好的地方

jquery原始碼封裝在一個匿名函式的自執行環境中，有助於防止變數的全域性汙染，然後通過傳入window物件引數，可以使window物件作為區域性變數使用，好處是當jquery中訪問window物件的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window物件。同樣，傳入undefined引數，可以縮短查詢undefined時的作用域鏈
(function( window, undefined ) {

     //用一個函式域包起來，就是所謂的沙箱

     //在這裡邊var定義的變數，屬於這個函式域內的區域性變數，避免汙染全域性

     //把當前沙箱需要的外部變數通過函式引數引入進來

     //只要保證引數對內提供的介面的一致性，你還可以隨意替換傳進來的這個引數

    window.jQuery = window.$ = jQuery;

})( window );
 

jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法
有一些陣列或物件的方法經常能使用到，jQuery將其儲存為區域性變數以提高訪問速度
jquery實現的鏈式呼叫可以節約程式碼，所返回的都是同一個物件，可以提高程式碼效率

2. jQuery 的實現原理？

(function(window, undefined) {})(window);
jQuery 利用 JS 函式作用域的特性，採用立即呼叫表示式包裹了自身，解決名稱空間和變數汙染問題

window.jQuery = window.$ = jQuery;

在閉包當中將 jQuery 和 $ 繫結到 window 上，從而將 jQuery 和 $ 暴露為全域性變數

3. jQuery.fn 的 init 方法返回的 this 指的是什麼物件？ 為什麼要返回 this？

jQuery.fn 的 init 方法 返回的 this 就是 jQuery 物件
使用者使用 jQuery() 或 $() 即可初始化 jQuery 物件，不需要動態的去呼叫 init 方法
jQuery.extend 與 jQuery.fn.extend 的區別？

$.fn.extend() 和 $.extend() 是 jQuery 為擴充套件外掛提拱了兩個方法
$.extend(object); // 為jQuery新增“靜態方法”（工具方法）
$.extend({
　　min: function(a, b) { return a < b ? a : b; },
　　max: function(a, b) { return a > b ? a : b; }
});
$.min(2,3); // 2
$.max(4,5); // 5
$.extend([true,] targetObject, object1[, object2]); // 對targt物件進行擴充套件
var settings = {validate:false, limit:5};
var options = {validate:true, name:"bar"};
$.extend(settings, options); // 注意：不支援第一個引數傳 false
// settings == {validate:true, limit:5, name:"bar"}
$.fn.extend(json); // 為jQuery新增“成員函式”（例項方法）

$.fn.extend({
alertValue: function() {
$(this).click(function(){
alert($(this).val());
});
}
});

$("#email").alertValue();

4. jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？

淺拷貝（只複製一份原始物件的引用） var newObject = $.extend({}, oldObject);

深拷貝（對原始物件屬性所引用的物件進行進行遞迴拷貝） var newObject = $.extend(true, {}, oldObject);

5. jQuery 的佇列是如何實現的？佇列可以用在哪些地方？

jQuery 核心中有一組佇列控制方法，由 queue()/dequeue()/clearQueue() 三個方法組成。
主要應用於 animate()，ajax，其他要按時間順序執行的事件中
var func1 = function(){alert('事件1');}
var func2 = function(){alert('事件2');}
var func3 = function(){alert('事件3');}
var func4 = function(){alert('事件4');}

// 入棧佇列事件
$('#box').queue("queue1", func1); // push func1 to queue1
$('#box').queue("queue1", func2); // push func2 to queue1

// 替換佇列事件
$('#box').queue("queue1", []); // delete queue1 with empty array
$('#box').queue("queue1", [func3, func4]); // replace queue1

// 獲取佇列事件（返回一個函式陣列）
$('#box').queue("queue1"); // [func3(), func4()]

// 出棧佇列事件並執行
$('#box').dequeue("queue1"); // return func3 and do func3
$('#box').dequeue("queue1"); // return func4 and do func4

// 清空整個佇列
$('#box').clearQueue("queue1"); // delete queue1 with clearQueue
jQuery 中的 bind(), live(), delegate(), on()的區別？

bind 直接繫結在目標元素上
live 通過冒泡傳播事件，預設document上，支援動態資料
delegate 更精確的小範圍使用事件代理，效能優於 live
on 是最新的1.9版本整合了之前的三種方式的新事件繫結機制
是否知道自定義事件？ jQuery 裡的 fire 函式是什麼意思，什麼時候用？

事件即“釋出/訂閱”模式，自定義事件即“訊息釋出”，事件的監聽即“訂閱訂閱”
JS 原生支援自定義事件，示例：
document.createEvent(type); // 建立事件
event.initEvent(eventType, canBubble, prevent); // 初始化事件
target.addEventListener('dataavailable', handler, false); // 監聽事件
target.dispatchEvent(e); // 觸發事件
jQuery 裡的 fire 函式用於呼叫 jQuery 自定義事件列表中的事件

6. jQuery 通過哪個方法和 Sizzle 選擇器結合的？

Sizzle 選擇器採取 Right To Left 的匹配模式，先搜尋所有匹配標籤，再判斷它的父節點
jQuery 通過 $(selecter).find(selecter); 和 Sizzle 選擇器結合

7. jQuery 中如何將陣列轉化為 JSON 字串，然後再轉化回來？

// 通過原生 JSON.stringify/JSON.parse 擴充套件 jQuery 實現
$.array2json = function(array) {
return JSON.stringify(array);
}

$.json2array = function(array) {
// $.parseJSON(array); // 3.0 開始，已過時
return JSON.parse(array);
}

// 呼叫
var json = $.array2json(['a', 'b', 'c']);
var array = $.json2array(json);

8. jQuery 一個物件可以同時繫結多個事件，這是如何實現的？

$("#btn").on("mouseover mouseout", func);

$("#btn").on({
mouseover: func1,
mouseout: func2,
click: func3
});

9. 針對 jQuery 的優化方法？

快取頻繁操作DOM物件
儘量使用id選擇器代替class選擇器
總是從#id選擇器來繼承
儘量使用鏈式操作
使用時間委託 on 繫結事件
採用jQuery的內部函式data()來儲存資料
使用最新版本的 jQuery

10. jQuery 的 slideUp 動畫，當滑鼠快速連續觸發, 動畫會滯後反覆執行，該如何處理呢?

在觸發元素上的事件設定為延遲處理：使用 JS 原生 setTimeout 方法
在觸發元素的事件時預先停止所有的動畫，再執行相應的動畫事件：$('.tab').stop().slideUp();

11. jQuery UI 如何自定義元件？

通過向 $.widget() 傳遞元件名稱和一個原型物件來完成
$.widget("ns.widgetName", [baseWidget], widgetPrototype);

12. jQuery 與 jQuery UI、jQuery Mobile 區別？

jQuery 是 JS 庫，相容各種PC瀏覽器，主要用作更方便地處理 DOM、事件、動畫、AJAX

jQuery UI 是建立在 jQuery 庫上的一組使用者介面互動、特效、小部件及主題

jQuery Mobile 以 jQuery 為基礎，用於建立“移動Web應用”的框架

13.jQuery 和 Zepto 的區別？ 各自的使用場景？

jQuery 主要目標是PC的網頁中，相容全部主流瀏覽器。在移動裝置方面，單獨推出 jQuery Mobile
Zepto 從一開始就定位移動裝置，相對更輕量級。它的 API 基本相容 jQuery，但對PC瀏覽器相容不理想