JS问题整理与思考--模拟jQuery的原型

• 1.创建jQuery方法
• 2.jQuery方法返回jQuery.fn.init的实例
• 3.构造函数jQuery.fn.init的方法
• 4.jQuery.fn.init的原型指向jQuery.fn
• 5.jQuery.fn 创建操作方法

    (function (window) {
    var jQuery = function (selector) {
        return new jQuery.fn.init(selector)
    }
    jQuery.fn = {
        css:function (key, value) {
            alert('css')
        }
    }
    var init = jQuery.fn.init = function(selector) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))

        var i,len = dom ? dom.length : 0
        for(i=0;i < len;i++){
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector
    }
    init.prototype = jQuery.fn

    window.$ = jQuery
})(window)

为什么要多存在一步jQuery.fn?

• 只有$会暴露在window全局变量，init方法并不能直接在全局访问。
• 将插件扩展统一到$.fn.xxx这一个接口方便使用