$()创建对象的实现
-
首先我们来看一下需求
- $("div")可以创建一个对象
- 该对象可以调用所有jq的元素公用方法
- 该对象的方法可以产生链式调用
-
思考过程
- $("div")中$是函数名,而$("div")是运行该函数,所以可以判断该函数返回值肯定是一个对象，该对象代表了jquery.
- $("div")可以调用所有元素的公用方法，所以可以知道，元素的方法都是绑定在jq原型上的.
- $("div")的方法可以链式调用，则说明每个方法返回值都是一个当前jquery对象。
-
模拟实现
下面用jQ的尝试实现下.
function jQ(selector,context){
// return a jQ instance
}
jQ.prototype={
constructor:jQ//修正构造函数
};
由于要求返回的对象可以使用公用方法，那我们直接返回原型吧。
function jQ(selector,context){
// return a jQ instance
return jQ.prototype;
}
jQ.prototype={
constructor:jQ//修正构造函数
};
这样我们返回的对象中就可以直接使用公用的方法了，但是问题来了，怎么保证可以传参数？而且返回的是原型指针，万一我修改了原型指针指向的对象，那不是所有jQ的公用方法都无法使用了，所以我们返回的值必须是new 出来的。
那我们试试new jQ呢？
function jQ(selector,context){
// return a jQ instance
return new jQ(selector,context);
}
jQ.prototype={
constructor:jQ//修正构造函数
};
感觉很完美，又有new，又能使用公用方法，是不是就这样好了呢？来，跑一跑看一下，哎哟，死循环了~为什么，哎哟，原来递归了，还没有终止条件,所以我们不能使用jQ作为构造函数，需要另外找一个构造函数.
所以最终版本思路是这样的，在原型上挂一个别的初始化函数，然后把参数给他，最后修改下他的原型修改成为jQ的原型。这样即保证了new，还保证了公用方法使用。
最终代码如下
function jQ (selector, context) {
return new rQuery.prototype.init(); //返回实例
}
rQuery.prototype = {
init: function() {
return this;
},
constructor:jQ//修正构造函数
};
rQuery.prototype.init.prototype = rQuery.prototype;
没想到吧，其实我也没想到，由此可见，代码是一个考验智商的活。
简单关系图如下:
Paste_Image.png
- 链式调用
对于链式调用，例如$("div").on().off();
这样的形式只要保证on和off函数中的return 是this就可以了，这边主要注意一个点:**哪个对象调用函数，函数中的this值就是那个对象**。
#### extend作为插座的实现 ####
- 这里面extend分为两种，$.fn.extend和$.extend，前一个是对实例方法的扩展，也就是在$的对象上扩展方法，其实本质就是在$的原型上添加方法，后一个就是对静态方法的扩展，也就是在$这个函数上扩展方法，当然能做到这一切得益于js是一门随意的语言-动态语言，且函数(方法)他又是对象还是变量，对象上的属性可以随意绑定和解绑，甚至函数名在初始化之后还能随意换，因为他只是一个指针名。
- 虽然作用不同，但是实现过程一致，具体实现过程如下
jQuery.extend = jQuery.fn.extend = function() {
var src, copyIsArray, copy, name, options, clone,
target = arguments[0] || {},
// 传入的参数，以第一个参数为目标对象（这里是 {drag: drag}）
i = 1,
length = arguments.length,
deep = false; // 深拷贝的参数
// Handle a deep copy situation
if ( typeof target === "boolean" ) {
// 如果第一个参数是 true/false，通常为 true
deep = target;
//deep 为 true/false target = arguments[1] || {};
// 将第二个参数作为目标对象
// skip the boolean and the target
i = 2;
// 跳过前两个参数，从第三个开始
}
// Handle case when target is a string or something (possible in deep copy)
if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
// 如果作为目标对象的参数不是对象类型
target = {};
}
// extend jQuery itself if only one argument is passed\
if ( length === i ) {
// 如果只有一个参数
target = this;
// 就将 jQuery(.fn) 自身作为目标对象（这里，因为只传入了 {drag: drag}，因此目标对象为 jQuery(.fn)，也就实现了向 jQuery 中添加对象（方法））
--i;
// i=0
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
if ( (options = arguments[ i ]) != null ) {
// 这里 options = {drag: drag}
// Extend the base object
for ( name in options ) {
src = target[ name ];
// 向目标对象（这里是 jQuery(.fn)) 中添加属性，并将属性值赋予变量 src，如果目标对象中没有该属性，那么此时 src = undefined（这里 src = undefined）
copy = options[ name ];
// copy = drag (drag方法)
// Prevent never-ending loop
if ( target === copy ) {
// 防止自引用 （这里防止将 jQuery(.fn) 添加到 jQuery(.fn) 中）
continue;
}
// Recurse if we're merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
// 如果是深拷贝(deep)，而且要拷贝的属性值为对象（这里deep = false，不做深拷贝）
if ( copyIsArray ) {
// 如果要拷贝的属性值是数组
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
// 要拷贝的属性值为普通对象
clone = src && jQuery.isPlainObject(src) ? src : {};
// clone 为目标对象中的属性值或空对象
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
// 递归
// Don't bring in undefined values
} else if ( copy !== undefined ) {
// 这里 drag() 非 undefined
target[ name ] = copy;
// 将属性添加到目标对象中（这里， jQuery(.fn)[drag] = drag）
}
}
}
}
网友评论