2020年Web前端面试题及答案----jQuery篇

前言

vue的出现使得Jquery的地位越来越低，但是也难免有面试官会问到这些问题，话不多少，直接上干货

你觉得jQuery或zepto源码有哪些写的好的地方

jQuery的源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入窗口对象参数，可以使窗口对象作为局部变量使用，好处是当jQuery的中访问窗口对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问窗口对象。同样，传入未定义参数，可以缩短查找未定义时的作用域链

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

jQuery的将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。
有一些数组或对象的方法经常能使用到，jQuery的将其保存为局部变量以提高访问速度。
jQuery的实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。

jQuery的实现原理？

(function(window, undefined) {})(window);

jQuery利用JS函数作用域的特性，采用立即调用表达式包裹了自身，解决命名空间和变量污染问题

window.jQuery = window.$ = jQuery;

在闭包当中将jQuery和$绑定到window上，从而将jQuery和$暴露为全局变量

jQuery.fn的init方法返回的这指的是什么对象？为什么要返回这个？

jQuery.fn的init方法返回的这就是jQuery对象
用户使用jQuery（）或$（）即可初始化jQuery对象，不需要动态的去调用init方法

jQuery.extend与jQuery.fn.extend的区别？

$ .fn.extend（）和$ .extend（）是jQuery为扩展插件提拱了两个方法

$ .extend（对象）; //为jQuery添加“静态方法”（工具方法）
$.extend({
　　min: function(a, b) { return a < b ? a : b; },
　　max: function(a, b) { return a > b ? a : b; }
});
$.min(2,3); //  2
$.max(4,5); //  5
$ .extend（[true，] targetObject，object1 [，object2]）; //对targt对象进行扩展
var settings = {validate:false, limit:5};
var options = {validate:true, name:"bar"};
$.extend(settings, options);  // 注意：不支持第一个参数传 false
// settings == {validate:true, limit:5, name:"bar"}
$ .fn.extend（JSON）; //为jQuery添加“成员函数”（实例方法）
 
$.fn.extend({
   alertValue: function() {
      $(this).click(function(){
        alert($(this).val());
      });
   }
});
$("#email").alertValue();

jQuery的属性拷贝（extend）的实现原理是什么，如何实现深拷贝？

浅拷贝（只复制一份原始对象的引用） var newObject = $.extend({}, oldObject);
深拷贝（对原始对象属性所引用的对象进行进行递归拷贝） var newObject = $.extend(true, { }, oldObject);

JQuery的队列是如何实现的？队列可以用在哪些地方?

JQuery核心中有一组队列控制方法.由query( ) / dequeue( ) / clearQueue( )三个方法组成
主要应用于animate( )，ajax，其他要按时间顺序执行的事件中

var func1 = function(){alert('事件1');}
var func2 = function(){alert('事件2');}
var func3 = function(){alert('事件3');}
var func4 = function(){alert('事件4');}
// 入栈队列事件
$('#box').queue("queue1", func1);  // push func1 to queue1
$('#box').queue("queue1", func2);  // push func2 to queue1
// 替换队列事件
$('#box').queue("queue1", []);  // delete queue1 with empty array
$('#box').queue("queue1", [func3, func4]);  // replace queue1
// 获取队列事件（返回一个函数数组）
$('#box').queue("queue1");  // [func3(), func4()]
// 出栈队列事件并执行
$('#box').dequeue("queue1"); // return func3 and do func3
$('#box').dequeue("queue1"); // return func4 and do func4
// 清空整个队列
$('#box').clearQueue("queue1"); // delete queue1 with clearQueue

jQuery中的bind（），live（），delegate（），on（）的区别？

bind直接绑定在目标元素上
live通过冒泡传播事件，默认文件上，支持动态数据
委托更精确的小范围使用事件代理，性能优于live
on是最新的1.9版本整合了之前的三种方式的新事件绑定机制
jQuery一个对象可以同时绑定多个事件，这是如何实现的？
bind on delegate live进行多事件绑定的原理

针对jQuery的优化方法？

缓存频繁操作DOM对象
尽量使用ID选择器代替类选择器
总是从#ID选择器来继承
尽量使用链式操作
在绑定事件上使用时间委托
采用的jQuery的内部函数数据（）来存储数据
使用最新版本的jQuery