美文网首页WEB前端程序开发Web前端之路前端面试题
web前端面试题-jQuery篇(持续更新...)

web前端面试题-jQuery篇(持续更新...)

作者: 终身成长人格 | 来源:发表于2019-11-07 17:40 被阅读0次

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

    相关文章

      网友评论

        本文标题:web前端面试题-jQuery篇(持续更新...)

        本文链接:https://www.haomeiwen.com/subject/ecwvbctx.html