Fassen Sie einige jQuery-basierte Front-End-Interviews zusammen und teilen Sie sie (einschließlich FAQs zu mobilen Endgeräten).

Dieser Artikel fasst einige Front-End-Interviews basierend auf jQuery zusammen, um sie mit Ihnen zu teilen. Er enthält häufige Interviewfragen zu jQuery und häufige Fragen zu Mobilgeräten.

Verwandte Empfehlungen: 2022 Big Front-end Interview Questions Summary (Sammlung)

jQuery Front-end Interview – einschließlich häufig gestellter Fragen für Mobilgeräte

1 Code von JQuery? Können Sie einen kurzen Überblick über das Umsetzungsprinzip geben?

jquery-Quellcode ist in einer selbstausführenden Umgebung einer anonymen Funktion gekapselt, was dazu beiträgt, eine globale Verschmutzung von Variablen zu verhindern. Durch Übergabe des Fensterobjektparameters kann das Fensterobjekt als lokale Variable verwendet werden Der Vorteil besteht darin, dass beim Zugriff auf das Fenster im JQuery-Objekt die Bereichskette nicht an den Bereich der obersten Ebene zurückgegeben werden muss, sodass schneller auf das Fensterobjekt zugegriffen werden kann. Ebenso kann die Übergabe des undefinierten Parameters die Gültigkeitskette verkürzen, wenn nach undefiniert gesucht wird. [Empfohlenes Lernen: jQuery-Video-Tutorial

    (function( window, undefined ) {
         //用一个函数域包起来，就是所谓的沙箱
         //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
         //把当前沙箱需要的外部变量通过函数参数引入进来
         //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
        window.jQuery = window.$ = jQuery;
    })( window );

jquery kapselt einige Prototypeigenschaften und -methoden in jquery.prototype. Um den Namen zu verkürzen, wird er jquery.fn zugewiesen .
• Es gibt einige Array- oder Objektmethoden, die häufig als lokale Variablen gespeichert werden, um die Zugriffsgeschwindigkeit zu verbessern.
• Der von jquery implementierte Kettenaufruf kann Code speichern und dasselbe Objekt zurückgeben, was die Codeeffizienz verbessern kann.
• Der Vorteil von jQuery sind Kettenoperationen und implizite Iteration

2 Auf welches Objekt bezieht sich diese Rückgabe von der Init-Methode von jQuery.fn? Warum das zurückgeben?

Die Rückgabe bezieht sich auf das JQuery-Objekt nach der aktuellen Operation. Um die Kettenoperation von JQuery zu realisieren

3. Wie konvertiere ich ein Array in einen JSON-String und konvertiere es dann zurück?

Verwenden Sie die globale JQuery-Methode $.parseJSON

4 Was ist das Implementierungsprinzip der Attributkopie (Extend) von jQuery und wie implementiert man Deep Copy?

①, $.extend flache Kopie in jQuery

$.extend flache Kopie in jQuery: Beim Kopieren von Objekt A kopiert Objekt B alle Felder von A. Wenn das Feld eine Speicheradresse ist, kopiert B die Adresse . Wenn das Feld ein primitiver Typ ist, kopiert B seinen Wert. Der Nachteil besteht darin, dass Sie, wenn Sie die Speicheradresse ändern, auf die Objekt B zeigt, auch das Feld von Objekt A ändern, das auf diese Adresse zeigt.

$.extend(a,b)

②, $.extend tiefe Kopie in jQuery

$.extend tiefe Kopie in jQuery, diese Methode kopiert alle Daten vollständig. Der Vorteil besteht darin, dass B und A nicht voneinander abhängig sind (A, B sind Der Nachteil besteht darin, dass die Kopiergeschwindigkeit langsamer und die Kosten höher sind.

$.extend(true,a,b)

5. Was ist der Unterschied zwischen jquery.extend und jquery.fn.extend?

①, jQuery.extend(object);

Es dient dazu, der jQuery-Klasse eine Klassenmethode hinzuzufügen, was als Hinzufügen einer statischen Methode verstanden werden kann. Zum Beispiel:

• 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])Erweitern Sie ein Objekt mit einem oder mehreren anderen Objekten und geben Sie das erweiterte Objekt zurück.
• 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

  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();

• Ergebnis: Einstellungen == { Validieren: wahr, Limit: 5, Name: „bar“ }

②, jQuery.fn.extend(object);

• $.fn Was ist?
• $.fn bezieht sich auf den jQuery-Namespace und die Mitglieder von fn (Methodenfunktion und Attributeigenschaft) sind für jede jQuery-Instanz gültig.

Schauen Sie sich den jQuery-Code an und er ist nicht schwer zu finden.

var str=$("a").attr("href");
for (var i = size; i < arr.length; i++) {}

Es stellt sich heraus, dass jQuery.fn = jQuery.prototype

Es handelt sich also um eine Erweiterung von jQuery.prototype, die der jQuery-Klasse „Mitgliedsfunktionen“ hinzufügen soll. Instanzen der jQuery-Klasse können diese „Member-Funktion“ verwenden.

③, Unterschied

jQuery.fn.extend(object); erweitert die jQuery-Objektmethode

jQuery.extend erweitert die globale jQuery-Methode

🎜🎜🎜6. Wie wird die jQuery-Warteschlange implementiert? Wo können Warteschlangen genutzt werden? 🎜🎜🎜🎜Im Kern von jQuery gibt es eine Reihe von Methoden zur Warteschlangensteuerung, die aus drei Methoden bestehen: queue()/dequeue()/clearQueue() die kontinuierlich und nacheinander ausgeführt werden müssen, werden hauptsächlich in der animate()-Methode, Ajax und anderen Ereignissen verwendet, die in chronologischer Reihenfolge ausgeführt werden müssen.🎜🎜

for (var i = size, length = arr.length; i < length; i++) {}

🎜🎜7 Sprechen wir über bind(), live(). , Delegate(), On() in Jquery der Unterschied? 🎜🎜🎜🎜bind(), live() und delegate() in jquery werden alle basierend auf on🎜 implementiert

Methode	Beschreibung
onon	是封装了一个兼容的事件绑定方法，在选择元素上绑定一个或多个事件的事件处理函数
bind(type,[data],fn)	为每个匹配元素的特定事件绑定事件处理函数
live(type,[data],fn)	给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
delegate(selector,[type],[data],fn)	指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

差别：

.bind()是直接绑定在元素上

ist eine Ereignisbindungsmethode, die eine kompatible Ereignisbindungsmethode kapselt und ein oder mehrere Ereignisse an das ausgewählte Element bindet bind(type,[data],fn)

方法	说明
.bind()	是直接绑定在元素上
.live()	则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据
.delegate()	则是更精确的小范围使用事件代理，性能优于.live()
.on()

Bind-Ereignishandlerfunktion 🎜🎜🎜🎜live(type,[data] für ein bestimmtes Ereignis jedes übereinstimmenden Elements ], fn)🎜🎜Hängen Sie einen Ereignishandler an alle übereinstimmenden Elemente an, auch wenn das Element später hinzugefügt wird🎜🎜🎜🎜delegate(selector,[type],[data],fn )🎜 🎜Fügen Sie dem angegebenen Element (einem untergeordneten Element des ausgewählten Elements) einen oder mehrere Ereignishandler hinzu und geben Sie die Funktion an, die ausgeführt werden soll, wenn diese Ereignisse auftreten🎜🎜🎜🎜

Unterschied:

. bind() ist direkt an das Element gebunden

🎜🎜🎜🎜🎜Methode🎜🎜Beschreibung🎜🎜🎜🎜🎜🎜.bind()🎜🎜 Es ist direkt an das Element gebunden🎜🎜 🎜🎜.live()🎜🎜 wird durch Sprudeln an das Element gebunden. Eher geeignet für Listentypen, die an Dokument-DOM-Knoten gebunden sind. Der Vorteil von .bind() besteht darin, dass es dynamische Daten unterstützt🎜🎜🎜🎜.delegate()🎜🎜 ist ein genauerer Proxy für kleine Ereignisse und seine Leistung ist besser als .live() 🎜🎜🎜🎜 .on()🎜🎜Die neueste Version 1.9 integriert die vorherigen drei Methoden des neuen Ereignisbindungsmechanismus🎜🎜🎜🎜

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() 的区别。

方法	说明
.get	是jquery中将jquery对象转换为原生对象的方法
[]	是采用了获取数组值的方式将jquery对象转换为原生对象的方法
eq()	是获取对象列表中的某一个jquery dom对象

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();        //函数执行
}
});
}
};

（学习视频分享：web前端教程）

Das obige ist der detaillierte Inhalt vonFassen Sie einige jQuery-basierte Front-End-Interviews zusammen und teilen Sie sie (einschließlich FAQs zu mobilen Endgeräten).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!