Summarize and share some jQuery-based front-end interviews (including mobile terminal FAQs)

This article summarizes some front-end interviews based on jQuery to share with you. It contains common interview questions about jQuery and common mobile questions. I hope it will be helpful to everyone!

Related recommendations: 2022 Big Front-End Interview Questions Summary (Collection)

jQuery front-end interview - including mobile terminal FAQ

1. Have you seen the source code of JQuery? Can you give a brief overview of its implementation principle?

jquery source code is encapsulated in a self-execution environment of an anonymous function, which helps to prevent global pollution of variables. Then by passing in the window object parameters, the window object can be used as a local variable. , the advantage is that when accessing the window object in jquery, there is no need to return the scope chain to the top-level scope, so that the window object can be accessed faster. Similarly, passing in the undefined parameter can shorten the scope chain when looking for undefined. [Recommended learning: jQuery video tutorial]

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

• jquery encapsulates some prototype properties and methods in jquery.prototype. In order to shorten the name, it is assigned to jquery.fn, this is a very vivid way of writing.
• There are some array or object methods that are often used. jQuery saves them as local variables to improve access speed.
• The chain call implemented by jquery can save code, and the same object is returned, which can improve code efficiency.
• The advantage of jquery is chain operations and implicit iteration

2. What object does this return from the init method of jQuery.fn refer to? Why return this?

The returned this refers to the jquery object after the current operation. In order to realize the chain operation of jquery

3. How to use jquery Convert array to json string and then back again?

Use jquery global method $.parseJSON this method

4. What is the implementation principle of jQuery’s attribute copy (extend) and how to implement it Deep copy?

①、$.extend shallow copy in jQuery

$.extend shallow copy in jQuery, when copying object A, object B will copy all fields of A , if the field is a memory address, B will copy the address, if the field is a primitive type, B will copy its value. Its disadvantage is that if you change the memory address pointed by object B, you also change the field of object A pointing to this address.

$.extend(a,b)

②、$.extend deep copy in jQuery

$.extend deep copy in jQuery. This method will completely copy all the data. The advantage is B There is no mutual dependence on A (A and B are completely disconnected). The disadvantage is that the copy speed is slower and the cost is higher.

$.extend(true,a,b)

5. What is the difference between jquery.extend and jquery.fn.extend?

①, jQuery.extend(object);

• It is to add a class method to the jQuery class, which can be understood as adding a static method. For example:

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])Extend an object with one or more other objects and return the extended object .

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

• Result: settings == { validate: true, limit: 5, name: “bar” }

②、jQuery.fn.extend( object);

• #$.fn?
• $.fn refers to the namespace of jQuery. The members on fn (method function and attribute property) will affect the jQuery instance Every one works.
• Looking at the jQuery code, it is not difficult to find.

jQuery.fn = jQuery.prototype = {
　　　 init: function( selector, context ) {//....　
};

• OriginaljQuery.fn = jQuery.prototype
• So, it is an extension of jQuery.prototype, which is to add " member function". Instances of the jQuery class can use this "member function".

③、Difference

• jQuery.fn.extend(object); extends jQuery object method
• jQuery.extend extends jQuery global method

6. How is jQuery’s queue implemented? Where can queues be used?

In the core of jQuery, there is a set of queue control methods. This set of methods consists of three methods: queue()/dequeue()/clearQueue(). It needs to be executed continuously and sequentially. The control of the function can be said to be concise and comfortable. It is mainly used in the animate () method, ajax and other events that need to be executed in chronological order.

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. Let’s talk about the functions in Jquery What are the differences between bind(), live(), delegate() and on()?

bind(), live(), and delegate() in jquery are all implemented based on on

encapsulates a compatible event binding method that binds one or more events to the event processing function on the selected element Bind event handlers for specific events of each matching elementAppend an event handler to all matching elements, even if the element is added laterAdd one or more event handlers to the specified element (a child element of the selected element) and specify the function to run when these events occur

Method	Description
##on
bind(type,[ data],fn)
live(type,[data], fn)
delegate(selector, [type],[data],fn)

Difference:

.bind() is directly bound to the element

MethodDescription is directly bound Set on the element is bound to the element through bubbling. More suitable for list types, bound to document DOM nodes. The advantage of .bind() is that it supports dynamic data is a more accurate small-scale use of event agents. The performance is better than .live() is the latest version 1.9 that integrates the previous three methods. Event binding mechanism

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

.bind()
.live()
.delegate()
.on()

方法	说明
.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前端教程）

The above is the detailed content of Summarize and share some jQuery-based front-end interviews (including mobile terminal FAQs). For more information, please follow other related articles on the PHP Chinese website!