web前端面試題-jQuery篇(持續更新...)

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方向的插件。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章