你覺(jué)得jQuery或zepto源碼有哪些寫的好的地方

• jquery源碼封裝在一個(gè)匿名函數(shù)的自執(zhí)行環(huán)境中，有助于防止變量的全局污染，然后通過(guò)傳入window對(duì)象參數(shù)，可以使window對(duì)象作為局部變量使用，好處是當(dāng)jquery中訪問(wèn)window對(duì)象的時(shí)候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問(wèn)window對(duì)象。同樣，傳入undefined參數(shù)，可以縮短查找undefined時(shí)的作用域鏈

 (function( window, undefined ) {

         //用一個(gè)函數(shù)域包起來(lái)，就是所謂的沙箱

         //在這里邊var定義的變量，屬于這個(gè)函數(shù)域內(nèi)的局部變量，避免污染全局

         //把當(dāng)前沙箱需要的外部變量通過(guò)函數(shù)參數(shù)引入進(jìn)來(lái)

         //只要保證參數(shù)對(duì)內(nèi)提供的接口的一致性，你還可以隨意替換傳進(jìn)來(lái)的這個(gè)參數(shù)

        window.jQuery = window.$ = jQuery;

    })( window );

• jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法
• 有一些數(shù)組或?qū)ο蟮姆椒ń?jīng)常能使用到，jQuery將其保存為局部變量以提高訪問(wèn)速度
• jquery實(shí)現(xiàn)的鏈?zhǔn)秸{(diào)用可以節(jié)約代碼，所返回的都是同一個(gè)對(duì)象，可以提高代碼效率

jQuery 的實(shí)現(xiàn)原理？

• (function(window, undefined) {})(window);

• jQuery 利用 JS 函數(shù)作用域的特性，采用立即調(diào)用表達(dá)式包裹了自身，解決命名空間和變量污染問(wèn)題

• window.jQuery = window.$ = jQuery;

• 在閉包當(dāng)中將 jQuery 和 $ 綁定到 window 上，從而將 jQuery 和 $ 暴露為全局變量

jQuery.fn 的 init 方法返回的 this 指的是什么對(duì)象？ 為什么要返回 this？

• jQuery.fn 的 init 方法 返回的 this 就是 jQuery 對(duì)象
• 用戶使用 jQuery() 或 $() 即可初始化 jQuery 對(duì)象，不需要?jiǎng)討B(tài)的去調(diào)用 init 方法

jQuery.extend 與 jQuery.fn.extend 的區(qū)別？

• $.fn.extend() 和 $.extend() 是 jQuery 為擴(kuò)展插件提拱了兩個(gè)方法
• $.extend(object); // 為jQuery添加“靜態(tài)方法”（工具方法）

$.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]); // 對(duì)targt對(duì)象進(jìn)行擴(kuò)展

var settings = {validate:false, limit:5};
var options = {validate:true, name:"bar"};
$.extend(settings, options);  // 注意：不支持第一個(gè)參數(shù)傳 false
// settings == {validate:true, limit:5, name:"bar"}

• $.fn.extend(json); // 為jQuery添加“成員函數(shù)”（實(shí)例方法）

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

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

jQuery 的屬性拷貝(extend)的實(shí)現(xiàn)原理是什么，如何實(shí)現(xiàn)深拷貝？

• 淺拷貝（只復(fù)制一份原始對(duì)象的引用）
  var newObject = $.extend({}, oldObject);

• 深拷貝（對(duì)原始對(duì)象屬性所引用的對(duì)象進(jìn)行進(jìn)行遞歸拷貝）
  var newObject = $.extend(true, {}, oldObject);

jQuery 的隊(duì)列是如何實(shí)現(xiàn)的？隊(duì)列可以用在哪些地方？

• jQuery 核心中有一組隊(duì)列控制方法，由 queue()/dequeue()/clearQueue() 三個(gè)方法組成。
• 主要應(yīng)用于 animate()，ajax，其他要按時(shí)間順序執(zhí)行的事件中

var func1 = function(){alert('事件1');}
var func2 = function(){alert('事件2');}
var func3 = function(){alert('事件3');}
var func4 = function(){alert('事件4');}

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

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

// 獲取隊(duì)列事件（返回一個(gè)函數(shù)數(shù)組）
$('#box').queue("queue1");  // [func3(), func4()]

// 出棧隊(duì)列事件并執(zhí)行
$('#box').dequeue("queue1"); // return func3 and do func3
$('#box').dequeue("queue1"); // return func4 and do func4

// 清空整個(gè)隊(duì)列
$('#box').clearQueue("queue1"); // delete queue1 with clearQueue

jQuery 中的 bind(), live(), delegate(), on()的區(qū)別？

• bind 直接綁定在目標(biāo)元素上
• live 通過(guò)冒泡傳播事件，默認(rèn)document上，支持動(dòng)態(tài)數(shù)據(jù)
• delegate 更精確的小范圍使用事件代理，性能優(yōu)于 live
• on 是最新的1.9版本整合了之前的三種方式的新事件綁定機(jī)制

是否知道自定義事件？ jQuery 里的 fire 函數(shù)是什么意思，什么時(shí)候用？

• 事件即“發(fā)布/訂閱”模式，自定義事件即“消息發(fā)布”，事件的監(jiān)聽(tīng)即“訂閱訂閱”
• JS 原生支持自定義事件，示例：

  document.createEvent(type); // 創(chuàng)建事件
  event.initEvent(eventType, canBubble, prevent); // 初始化事件
  target.addEventListener('dataavailable', handler, false); // 監(jiān)聽(tīng)事件
  target.dispatchEvent(e);  // 觸發(fā)事件

• jQuery 里的 fire 函數(shù)用于調(diào)用 jQuery 自定義事件列表中的事件

jQuery 通過(guò)哪個(gè)方法和 Sizzle 選擇器結(jié)合的？

• Sizzle 選擇器采取 Right To Left 的匹配模式，先搜尋所有匹配標(biāo)簽，再判斷它的父節(jié)點(diǎn)
• jQuery 通過(guò) $(selecter).find(selecter); 和 Sizzle 選擇器結(jié)合

jQuery 中如何將數(shù)組轉(zhuǎn)化為 JSON 字符串，然后再轉(zhuǎn)化回來(lái)？

// 通過(guò)原生 JSON.stringify/JSON.parse 擴(kuò)展 jQuery 實(shí)現(xiàn)
 $.array2json = function(array) {
    return JSON.stringify(array);
 }

 $.json2array = function(array) {
    // $.parseJSON(array); // 3.0 開(kāi)始，已過(guò)時(shí)
    return JSON.parse(array);
 }

 // 調(diào)用
 var json = $.array2json(['a', 'b', 'c']);
 var array = $.json2array(json);

jQuery 一個(gè)對(duì)象可以同時(shí)綁定多個(gè)事件，這是如何實(shí)現(xiàn)的？

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

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

針對(duì) jQuery 的優(yōu)化方法？

• 緩存頻繁操作DOM對(duì)象
• 盡量使用id選擇器代替class選擇器
• 總是從#id選擇器來(lái)繼承
• 盡量使用鏈?zhǔn)讲僮?/li>
• 使用時(shí)間委托 on 綁定事件
• 采用jQuery的內(nèi)部函數(shù)data()來(lái)存儲(chǔ)數(shù)據(jù)
• 使用最新版本的 jQuery

jQuery 的 slideUp 動(dòng)畫，當(dāng)鼠標(biāo)快速連續(xù)觸發(fā), 動(dòng)畫會(huì)滯后反復(fù)執(zhí)行，該如何處理呢?

• 在觸發(fā)元素上的事件設(shè)置為延遲處理：使用 JS 原生 setTimeout 方法
• 在觸發(fā)元素的事件時(shí)預(yù)先停止所有的動(dòng)畫，再執(zhí)行相應(yīng)的動(dòng)畫事件：$('.tab').stop().slideUp();

jQuery UI 如何自定義組件？

• 通過(guò)向 $.widget() 傳遞組件名稱和一個(gè)原型對(duì)象來(lái)完成
• $.widget("ns.widgetName", [baseWidget], widgetPrototype);

jQuery 與 jQuery UI、jQuery Mobile 區(qū)別？

• jQuery 是 JS 庫(kù)，兼容各種PC瀏覽器，主要用作更方便地處理 DOM、事件、動(dòng)畫、AJAX

• jQuery UI 是建立在 jQuery 庫(kù)上的一組用戶界面交互、特效、小部件及主題

• jQuery Mobile 以 jQuery 為基礎(chǔ)，用于創(chuàng)建“移動(dòng)Web應(yīng)用”的框架

jQuery 和 Zepto 的區(qū)別？ 各自的使用場(chǎng)景？

• jQuery 主要目標(biāo)是PC的網(wǎng)頁(yè)中，兼容全部主流瀏覽器。在移動(dòng)設(shè)備方面，單獨(dú)推出 jQuery Mobile
• Zepto 從一開(kāi)始就定位移動(dòng)設(shè)備，相對(duì)更輕量級(jí)。它的 API 基本兼容 jQuery，但對(duì)PC瀏覽器兼容不理想