美文网首页我爱编程
jQuery源码的简单理解及其引申的相关问题的解答

jQuery源码的简单理解及其引申的相关问题的解答

作者: getElementsByMK | 来源:发表于2017-07-11 16:54 被阅读0次

    1.jQuery运用了沙箱模型,使用闭包来隔离变量,制造出块级作用域,防止全局变量污染。

        (function(window,undefined){
            /*源码*/
        })(window)
    

    2.jQuery在闭包内导出局部变量为window的全局变量,对外暴露出$和jQuery两个关键字。

        window.jQuery = window.$ = jQuery;
    

    3.jQuery选择器的实现原理及其原型对象。

    jQuery最核心的功能就是选择器。选择器简单来说就是找到DOM对象的工具。
    在jQuery源码中,可以发现,jQuery对象其实就是init对象

        jQuery = function(selector,context){
            return new jQuery.fn.init(selector,context);
        }
    

    在源码中可以发现,jQuery.fn就是jQuery对象的原型

        jQuery.fn = jQuery.prototype;
        jQuery.fn.init.prototypt = jQuery.fn;
    

    由上可知,init对象和jQuery对象有相同的原型,所以在上面return init,就与jQuery对象有相同的属性和方法了。

    引申问题:

    1.jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?

        init: function( selector, context, rootjQuery ) {
            var match, elem, ret, doc;
    
            // Handle $(""), $(null), or $(undefined)
            if ( !selector ) {
          
                console.log(this);    // this是个空的类数组对象,这是为什么?
            
                return this;
            }
    

    这里返回的this就是jQuery.fn(=jQuery.prototype),也就是一个jQuery原型的实例。
    返回this是因为要生成对于对象的操作,所以需要生成这个DOM元素的jQuery实例。

    2.jquery中如何将数组转化为json字符串,然后再转化回来?

    1.原生JSON方法:

        var arr = [1,2,3,4,5,6];
        var jsonStr = JSON.stringify(arr);
        console.log(jsonStr);//"[1,2,3,4,5,6]"
        var arr_ = JSON.parse(jsonStr);
        console.log(arr_);//obj:[1, 2, 3, 4, 5, 6]
        console.log("arr = ? arr_:");
        console.log(arr == arr_);//false
    

    2.jQuery定义了parseJSON()方法,但没有定义stringify()方法,所以后者要自己添加

        jQuery.parseJSON = function( data ) {
            return JSON.parse( data + "" );
        };
    

    自己添加stringify

        $.fn.stringify = function() {
        return JSON.stringify(this);
        }
    
        var jsonStr = $([1,2,3]).stringify();
        alert(jsonStr);//"{"0":1,"1":2,"2":3,"length":3}"
    

    3.jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?

    复制属性或者方法要区分是基本类型(复制)还是引用类型(复制了指针)。

    深复制就是要把对象类型或者数组类型的属性依次遍历,重新赋给新生成的对象,

    基本类型:Number、String、Boolean、null、Undefined不存在深浅复制的问题,复制都是深复制。

    引用类型:Object(一般的对象、Array)这个区分浅复制(复制指针,修改会改变原来的),深复制(从新生成一个对象或者数组,依次复制每个元素,或者JSON对象方法,转成字符串,再转回来就回程一个新的对象)

    4.针对 jQuery 的优化方法?

    1、总是使用#id去寻找element.

    在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。

    2、在Classes前面使用Tags

    在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。

    注意:在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面 加Tags。

    3、缓存jQuery对象,对于同一个dom的多个操作的时候,最好缓存到一个变量上,就像len = arr.length; 避免多次超找或者计算。

    提示:使用$前辍表示我们的本地变量是一个jQuery包集。记住,不要在你的应该程序里出现一次以上的jQuery重复的选择操作。 额外提示:延迟存储jQuery对象结果。

    4、更好的利用链,连式操作,避免多写代码,或者查询。

    5、使用子查询

    jQuery允许我们在一个包集上附加其它的选择器。因为我们已经在本地变量里保存了父对象这样会减少以后在选择器上的性能开销。

    主要使用find实现:

    var $traffic_light = $('#traffic_light'), 
     
    $active_light = $traffic_light.find('input.on'), 
     
    $inactive_lights = $traffic_light.find('input.off');
    

    提示:可以用逗号隔开一次定义多个本地变量,这样可以节省一些字节。

    6、限制直接对DOM操作

    7、事件委托(又名:冒泡事件)

    除非特别说明,每一个JavaScript事件(如click, mouseover 等)在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。

    8、消除查询浪费

    9、遵从$(windows).load

    10、压缩JS

    5.jQuery 的队列是如何实现的?队列可以用在哪些地方?

    jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它可以控制需要连续按序执行的函数,

    主要应用于animate()方法, ajax以及其他要按时间顺序执行的事件中.

    了解部分:
    queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);

    当有两个参数传入时, 第一个参数还是默认为fx的的队列名,

    第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕.
    dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.移除然后执行,知道全部执行完成。
    clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.

    相关文章

      网友评论

        本文标题:jQuery源码的简单理解及其引申的相关问题的解答

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