乐趣区

web前端面试题jQuery篇持续更新

jiezi

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 浅拷贝，拷贝对象 A 时，对象 B 将拷贝 A 的所有字段，如果字段是内存地址，B 将拷贝地址，若果字段是基元类型，B 将复制其值。它的缺点是如果你改变了对象 B 所指向的内存地址，你同时也改变了对象 A 指向这个地址的字段。
$.extend(a,b)
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 实现的，
on 是封装了一个兼容的事件绑定方法，在选择元素上绑定一个或多个事件的事件处理函数
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
差别：
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到 document DOM 节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理，性能优于.live()
.on()则是最新的 1.9 版本整合了之前的三种方式的新事件绑定机制

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 方向的插件。

退出移动版