Résumez et partagez quelques interviews frontales basées sur jQuery (y compris les FAQ sur les terminaux mobiles)

Cet article résume quelques entretiens front-end basés sur jQuery à partager avec vous. Il contient des questions d'entretien courantes sur jQuery et des questions mobiles courantes. J'espère qu'il sera utile à tout le monde !

Recommandations associées : Résumé des grandes questions d'entretien frontal 2022 (collection)

Entretien frontal jQuery - y compris les questions fréquemment posées sur mobile

1. le code de JQuery ? Pouvez-vous donner un bref aperçu de son principe de mise en œuvre ?

Le code source de jquery est encapsulé dans un environnement d'auto-exécution d'une fonction anonyme, ce qui permet d'éviter la pollution globale des variables. Ensuite, en passant le paramètre d'objet window, l'objet window peut être utilisé comme variable locale. L'avantage est que lors de l'accès à la fenêtre dans l'objet jquery, il n'est pas nécessaire de renvoyer la chaîne de portée à la portée de niveau supérieur, afin que l'objet fenêtre soit accessible plus rapidement. De même, transmettre le paramètre undefined peut raccourcir la chaîne de portée lors de la recherche d'undéfini. [Apprentissage recommandé : Tutoriel vidéo jQuery]

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

• jquery encapsule certaines propriétés et méthodes du prototype dans jquery.prototype Afin de raccourcir le nom, il est attribué à jquery.fn. .
• Certaines méthodes de tableau ou d'objet sont souvent utilisées. jQuery les enregistre en tant que variables locales pour améliorer la vitesse d'accès.
• L'appel en chaîne implémenté par jquery peut enregistrer du code et le même objet est renvoyé, ce qui peut améliorer l'efficacité du code.
• L'avantage de jquery réside dans les opérations en chaîne et l'itération implicite

2. À quel objet ce retour de la méthode init de jQuery.fn fait-il référence ? Pourquoi rendre ça ?

Le retour this fait référence à l'objet jquery après l'opération en cours Afin de réaliser l'opération en chaîne de jquery

3 Comment convertir un tableau en chaîne json dans jquery puis le reconvertir ?

Utilisez la méthode globale jquery $.parseJSON

4. Quel est le principe d'implémentation de la copie d'attribut (extend) de jQuery et comment implémenter la copie approfondie ?

①, $.extend copie superficielle dans jQuery

$.extend copie superficielle dans jQuery, lors de la copie de l'objet A, l'objet B copiera tous les champs de A. Si le champ est une adresse mémoire, B copiera l'adresse . Si le champ est de type primitif, B copiera sa valeur. Son inconvénient est que si vous changez l'adresse mémoire pointée par l'objet B, vous changez également le champ de l'objet A pointant vers cette adresse.

$.extend(a,b)

②, $.extend deep copy dans jQuery

$.extend deep copy dans jQuery, cette méthode copiera complètement toutes les données, l'avantage est que B et A ne dépendront pas l'un de l'autre (A, B sont Association complètement séparée), l'inconvénient est que la vitesse de copie est plus lente et le coût est plus élevé.

$.extend(true,a,b)

5. Quelle est la différence entre jquery.extend et jquery.fn.extend ?

①, jQuery.extend(object);

• Il s'agit d'ajouter une méthode de classe à la classe jQuery, ce qui peut être compris comme l'ajout d'une méthode statique. Par exemple :

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])Étendez un objet avec un ou plusieurs autres objets et renvoyez l'objet étendu. 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();

• Résultat : paramètres == { valider : vrai, limite : 5, nom : "bar" }

②, jQuery.fn.extend(object);

• $.fn Qu'est-ce que ?
• $.fn fait référence à l'espace de noms de jQuery. Les membres sur fn (fonction de méthode et propriété d'attribut) seront valides pour chaque instance de jQuery.

Regardez le code jQuery et ce n'est pas difficile à trouver.

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

Il s'avère que jQuery.fn = jQuery.prototype

C'est donc une extension de jQuery.prototype, qui consiste à ajouter des "fonctions membres" à la classe jQuery. Les instances de la classe jQuery peuvent utiliser cette « fonction membre ».

③, différence

jQuery.fn.extend(object); étend la méthode d'objet jQuery

jQuery.extend étend la méthode globale jQuery🎜🎜🎜🎜6. Comment la file d'attente de jQuery est-elle implémentée ? Où peut-on utiliser les files d'attente ? 🎜🎜🎜🎜Au cœur de jQuery, il existe un ensemble de méthodes de contrôle de file d'attente. Cet ensemble de méthodes se compose de trois méthodes : queue()/dequeue()/clearQueue(). qui doivent être exécutés de manière continue et séquentielle, principalement utilisé dans la méthode animate (), ajax et d'autres événements qui doivent être exécutés dans l'ordre chronologique.🎜🎜

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

🎜🎜7. , délégué(), on() dans Jquery la différence ? 🎜🎜🎜🎜bind(), live() et délégué() dans jquery sont tous implémentés sur la base de on🎜

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

差别：

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

est une méthode de liaison d'événement qui encapsule une méthode de liaison d'événement compatible et lie un ou plusieurs événements à l'élément sélectionné Fonction bind(type,[data],fn)

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

🎜Fonction de gestionnaire d'événements Bind 🎜🎜🎜🎜live(type,[data] pour un événement spécifique de chaque élément correspondant ], fn)🎜🎜Ajouter un gestionnaire d'événements à tous les éléments correspondants, même si l'élément est ajouté ultérieurement🎜🎜🎜🎜delegate(selector,[type],[data],fn )🎜 🎜Ajoutez un ou plusieurs gestionnaires d'événements à l'élément spécifié (un élément enfant de l'élément sélectionné) et spécifiez la fonction à exécuter lorsque ces événements se produisent🎜🎜🎜🎜

Différence :

. bind() est directement lié à l'élément

🎜🎜🎜🎜🎜Méthode🎜🎜Description🎜🎜🎜🎜🎜🎜.bind()🎜🎜 Il est directement lié à l'élément🎜🎜 🎜🎜.live()🎜🎜 est lié à l'élément par bouillonnement. Plus adapté aux types de liste, liés aux nœuds DOM de document. L'avantage de .bind() est qu'il prend en charge les données dynamiques🎜🎜🎜🎜.delegate()🎜🎜 est un proxy d'événement à petite échelle plus précis et ses performances sont meilleures que .live() 🎜🎜🎜🎜 .on()🎜🎜La dernière version 1.9 intègre les trois méthodes précédentes du nouveau mécanisme de liaison d'événements🎜🎜🎜🎜

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前端教程）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!