var $$ = ajQuery = function(selector) {
return new ajQuery.fn.init(selector);
}
ajQuery.fn = ajQuery.prototype = {
name: 'aaron',
init: function(selector) {
this.selector = selector;
return this;
},
constructor: ajQuery
}
/******************2个构造器关联的关键****************************/
ajQuery.fn.init.prototype = ajQuery.fn;
ajQuery.fn.say = function() {
$("#aaron").html(this.name);
}
$$().say()
/******************jquery extend 插件接口设计****************************/
ajQuery.extend = ajQuery.fn.extend = function() {
var options, src, copy,
target = arguments[0] || {},
i = 1,
length = arguments.length;
//只有一个参数,就是对jQuery自身的扩展处理
//extend,fn.extend
if (i === length) {
target = this; //调用的上下文对象jQuery/或者实例
i--;
}
for(; i < length; i++){
//从i开始取参数,不为空开始遍历
if((options = arguments[i]) != null){
for(name in options){
copy = options[name];
//覆盖拷贝
target[name] = copy;
}
}
}
return target;
}
//jQuery 静态方法接口
jQuery.extend({
Deferred:function(func){
...省略代码....
return deferred
},
when:function(func){
...省略代码....
return deferred.promise();
}
})
//jQuery 实例方法接口
ajQuery.fn.extend({
setName: function(myName) {
this.myName = myName
return this;
},
getName: function() {
$("#aaron").html(this.myName)
return this;
}
});
$$().setName('demo').getName();
console.log('讲解一下上面的代码:因为extend的核心功能就是通过扩展收集功能(类似于mix混入),所以就会存在收集对象(target)与被收集的数据,因为jQuery.extend并没有明确实参,而且是通过arguments来判断的,所以这样处理起来很灵活。arguments通过判断传递参数的数量可以实现函数重载。其中最重要的一段target = this,通过调用的方式我们就能确实当前的this的指向,所以这时候就能确定target了。最后就很简单了,通过for循环遍历把数据附加到这个target上了。当然在这个附加的过程中我们还可以做数据过滤、深拷贝等一系列的操作了。');