实现一个自制jQuery框架

实现一个自制jQuery框架

理解jquery

jquery常用方法如下

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

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

分步实现类jquery库nQuery

  1. 我们创建一个构造函数
var nQuery = function (selector, context) {
    console.log("我是nQuery")
}

nQuery()    //我是nQuery

此时可以调用nQuery方法

  1. 下面要让nQuery像jquery那样使用$就能调用
var nQuery = function (selector, context) {
    console.log("我是nQuery")
}
window.$ = window.nQuery = nQuery

$() //我是nQuery

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

  1. 接下来我们要为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原型上的方法了

  1. 现在我们的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方法
  1. 上面的方法虽然�实现了,但是不够漂亮,接下来对上面的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
  1. 实现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的骨架了,后面需要什么方法就可以在这上面增加方法了

你可能感兴趣的:(实现一个自制jQuery框架)