实现一个自制jQuery框架

实现一个自制jQuery框架

理解jquery

jquery常用方法如下

$("body")   //选择对象返回对象
$("body").foo() //对选中每个对象使用方法
$.ajax()    //调用特定模块

那么要要实现jquery从什么入手呢？

分步实现类jquery库nQuery

1. 我们创建一个构造函数

var nQuery = function (selector, context) {
    console.log("我是nQuery")
}

nQuery()    //我是nQuery

此时可以调用nQuery方法

2. 下面要让nQuery像jquery那样使用$就能调用

var nQuery = function (selector, context) {
    console.log("我是nQuery")
}
window.$ = window.nQuery = nQuery

$() //我是nQuery

ok现在我们已经可以使用方便的方法来调用它了。

3. 接下来我们要为nQuery增加功能

var nQuery = function (selector, context) {
    return nQuery.prototype
}

nQuery.prototype = {
    foo: function () {
        console.log("我是方法一")
    },
    bad: function () {
        console.log("我是方法二")
    }
}

window.$ = window.nQuery = nQuery

$().foo()   //我是方法一
$().bad()   //我是方法二

此时，运行$()返回nQuery的原型，又在nQuery的原型上增加了方法，此时可以使用jquery的方法调用nQuery原型上的方法了

4. 现在我们的nQuery已经可以调用方法了，但是它所有的方法都写在原型上，每个实例都是调用的相同的方法，数据没有私密性，下面来改进以下

var nQuery = function (selector, context) {
    return new nQuery.prototype.foo(selector, context)
}

nQuery.prototype = {
    foo: function () {
        //nothing
    },
    bad: function () {
        console.log("我是方法二")
    },
    good: function () {
        console.log("我是方法三")
    }
}

//让foo的原型等于nQuery的原型，这样每次new的对象都可以调用nQuery圆型的方法。切每次调用$()时候返回的对象既有自己私有的属性，也可调用公共的方法
nQuery.prototype.foo.prototype = nQuery.prototype

window.$ = window.nQuery = nQuery

$().good()  //我是方法三
$() //foo {}    此时返回的是一个新对象，这个对象指向nQuery原型中foo方法

5. 上面的方法虽然�实现了，但是不够漂亮，接下来对上面的nQuery进行优化

var nQuery = function (selector, context) {
    return new nQuery.prototype.init(selector, context)
}

nQuery.prototype = {
    constructor: nQuery,
    init: function (selector, context) {
        this.selector = selector
        this.context = context
    }
}

nQuery.prototype.init.prototype = nQuery.prototype

//使用extent方法时，把obj里边的属性放到this里边，当nQuery调用的时候，会把obj的this绑定到nQuery的this上，让obj可以使用nQuery的原型
nQuery.extent = nQuery.prototype.extent = function (obj) {
    for (var key in obj) {
        this[key] = obj[key]
    }
}

//这里是$.ajax()类调用方法
nQuery.extent({
    isArray: Array.isArray,
    ajax: function () {
        console.log("ajax")
    }
})

nQuery.prototype.extent({
    addClass: function () {
        console.log("addClass...")
    },
    sayHello: function () {
        console.log("hello")
    }
})

//这里是$().addClass()调用方法

//写在这里方便对nQuery进行拓展


// //学习jquery用$符和nQuery直接引用nQuery
window.nQuery = window.$ = nQuery

6. 实现Jquery的链式调用

$(".div").addClass().attr()

jQuery支持以上方法，它是怎么实现的呢？
其实每次调用�例如addClass()这样的函数时，它会在函数调用完时候返回一个this，如下代码

nQuery.prototype.extent({
    addClass: function () {
        console.log("addClass...")

        return this
    },
    sayHello: function () {
        console.log("hello")

        return this
    }
})

这样便可实现�jquery的链式调用了

好了以上我们实现了jquery的骨架了，后面需要什么方法就可以在这上面增加方法了