手动实现jquery

目前jQuery生存空间越来越小,但是在实际的生产项目由于历史遗留问题jquery仍然被大量使用。
这几天在歇息时仔细看看了它的实现,发现里面还是有很多值得我学习的地方,对理解js基础知识以及编程思路有很大的帮助。

  • 首先jq它为我们只提供了一个JQuery和$两个入口函数,并且在加载完后就能引用,所以最外层肯定和其他框架一样是一个立即执行函数。看代码
    1
    2
    3
    4
    5
    6
    (function(windown){
    function jQuery(selector){

    }
    window.$ = window.jQuery = jQuery;
    })(windown)

这样就可以给用户提供一个jQuery函数了,并且把选择器当成参数传进去

  • 函数内部拿到了选择器,接下来就要拿到 dom对象,然后改变对象的属性了。Jquery并没有在Jquery函数中直接获取,而是在另外一个函数获取。具体看代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    (function(window){
    function Fn(selector){

    }
    Fn.prototype = {
    init(selector){
    var elements = document.querySelectorAll(selector);
    for( var i = 0 ; i < elements.length ; i++ ){
    this[i] = elements[i];
    this.length++;
    }
    },
    length : 0
    }

    function jQuery(selector){
    return new Fn(selector)
    }
    window.$ = window.jQuery = jQuery;
    })(window)

怎么样是不是很巧妙,这样就可以在函数内部形成高内聚和不浪费运行内存的形式。

分享