總結分享一些基於jQuery的前端面試（含行動端常見問題）

相關推薦：

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淺拷貝

jQuery中的$.extend淺拷貝，拷貝物件A時，物件B將拷貝A的所有欄位，如果欄位是記憶體地址，B將拷貝地址，若果欄位是基元型別，B將複製其值。它的缺點是如果你改變了物件B所指向的記憶體地址，你同時也改變了物件A指向這個地址的欄位。

$.extend(a,b)

②、jQuery中的$.extend深拷貝

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實現的

差別：

.bind()是直接繫結在元素上

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方向的外掛。

11、jQuery和Zepto的區別？各自的使用場景？

zepto主要用在移動裝置上，只支援較新的瀏覽器，好處是程式碼量比較小，效能也較好。
jquery主要是相容性好，可以跑在各種pc，移動上，好處是相容各種瀏覽器，缺點是程式碼量大，同時考慮相容，效能也不夠好。

zepto和jQuery選擇器實現方法不一樣，jQuery使用正則，zepto是使用querySelectAll
zepto針對行動端程式，Zepto還有一些基本的觸控事件可以用來做觸控式螢幕互動，如：

①、tap事件

tap，singleTap，doubleTap，longTap

②、Swipe事件

swipe，swipeLeft，swipeRight，swipeUp，swipeDown

12、Zepto的點透問題如何解決？

①、「點透」是什麼

你可能碰到過在列表頁面上建立一個彈出層，彈出層有個關閉的按鈕，你點了這個按鈕關閉彈出層後後，這個按鈕正下方的內容也會執行點選事件（或開啟連結）。這個被定義為這是一個「點透」現象。

②、點透的解決方法：

• 方案一：來得很直接github上有個fastclick可以完美解決

https://github.com/ftlabs/fastclick，引入fastclick.js，因為fastclick原始碼不依賴其他庫所以你可以在原生的js前直接加上

   window.addEventListener( "load", function() {
        FastClick.attach( document.body );
    }, false );

• 方案二：用touchend代替tap事件並阻止掉touchend的預設行為preventDefault()

• 方案三：延遲一定的時間(300ms+)來處理事件

13、行動端最小觸控區域是多大？

行動端最小觸控區域44*44px ，再小就容易點選不到或者誤點

14、jQuery 的slideUp動畫，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢?

每次動畫開始的時候先使用stop()函數停止當前未動完的動畫

15、行動端的點選事件的有延遲，時間是多久，為什麼會有？怎麼解決這個延時？

click 有300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。

16、你從jQuery學到了什麼？

首先明白了封裝的好處，
鏈式操作的原理
閉包的好處

17、請指出.get()，[]，eq() 的區別。

18、請指出$ 和$.fn 的區別，或者說出$.fn 的用途。

$代表的是jquery物件
$.fn是代表的jQuery.prototype
$.fn是用來給jquery物件擴充套件方法的

19、jQuery取到的元素和原生Js取到的元素有什麼區別

jQuery取到的元素是包含原生dom物件，和jQuery擴充套件的方法

20、原生JS的window.onload與Jquery的$(document).ready(function(){})有什麼不同？如何用原生JS實現Jq的ready方法？

①、window.onload()

window.onload()方法是必須等到頁面內包括圖片的所有元素載入完畢後才能執行。

②、$(document).ready()

$(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。

function ready(fn){
if(document.addEventListener) {        //標準瀏覽器
document.addEventListener('DOMContentLoaded', function() {
//登出事件, 避免反覆觸發
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
fn();            //執行函數
}, false);
}else if(document.attachEvent) {        //IE
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn();        //函數執行
}
});
}
};

（學習視訊分享：）

以上就是總結分享一些基於jQuery的前端面試（含行動端常見問題）的詳細內容，更多請關注TW511.COM其它相關文章！