实现一个自制jQuery框架
理解jquery
jquery常用方法如下
$("body") //选择对象返回对象
$("body").foo() //对选中每个对象使用方法
$.ajax() //调用特定模块
那么要要实现jquery从什么入手呢？
分步实现类jquery库nQuery
- 我们创建一个构造函数
var nQuery = function (selector, context) {
console.log("我是nQuery")
}
nQuery() //我是nQuery
此时可以调用nQuery方法
- 下面要让nQuery像jquery那样使用$就能调用
var nQuery = function (selector, context) {
console.log("我是nQuery")
}
window.$ = window.nQuery = nQuery
$() //我是nQuery
ok现在我们已经可以使用方便的方法来调用它了。
- 接下来我们要为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原型上的方法了
- 现在我们的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方法
- 上面的方法虽然�实现了，但是不够漂亮，接下来对上面的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
- 实现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的骨架了，后面需要什么方法就可以在这上面增加方法了
