链式模式:通过在对象方法中将当前对象返回,实现对同一个对象多个方法的链式调用。从而简化对该对象的多个方法的多次调用,对该对象的多次引用。
jquery是基于原型继承,每个原型下的方法都返回当前对象this,让当前对象一直在原型的最高层,这样就可以实现链式调用。我们来试着创建一个模仿的链式调用的方法.
var jquery = function(seletor, context) {
this.init(seletor, context)
}
jquery.fn = jquery.prototype = { //简化写法,再写query.prototype就能省点力气直接写jquery.fn
constructor: jquery,
length: 0,
init: function(seletor, context) {
//定义上下文简化版(*^__^*)
if (context instanceof jquery) { //判断上下文是否是jquery的实例
context = context[0]
} else {
context = context || document; //指定选择范围
//判断上下文是否为字符串
context = typeof context == 'string' ? querySelector(context) || context
}
this.context = context; //保存上下文
if (~seletor.indexOf('#')) { //判断补码是否为0,是则类,反之id选择
this.length = 1;
this[0] = context.querySelector(seletor);
} else { //类选择
var i = 0,
selectArr = context.querySelectorAll(seletor),
len = selectArr.length;
for (; i < len; i++) {
this[i] = selectArr[i]
}
this.length = len
}
return this;
},
size: function() {
return this.length
}
}
我们在页面上创建元素
<div id="aa"></div>
<div class="cc">1</div>
<div class="cc">2</div>
var $cc = new jquery('#cc');
console.log($cc) //=>jquery {0: div.cc, 1: div.cc, length: 2}
console.log($cc.size()) //=>2
但是我们发现跟真正的jquery有很大差别, 真正的jquery没有显示的new一个构造函数。我们试着修改上面的函数
var jquery = function(seletor, context) {
return new jquery.fn.init(seletor, context)
}
//然后执行
var $cc = jquery('#cc');
console.log($cc) //=>jquery {0: div.cc, 1: div.cc, length: 2}
console.log($cc.size()) //=>$cc.size is not a function
为什么会报错呢?因为这里new jquery.prototype.init,因为这里返回的this指向的是init.prototype,而不是jquery.prototype,init的prototype上并没有size这个方法。但是想一想,如果new jquery.prototype.init,返回的this指向jquery.prototype,那么不就能调用jquery.prototype的size方法吗?真正的jquery源码中是这样的解决这个问题.
jquery.fn.init.prototype = jquery.fn
加上这句话再次运行就不会报错啦。
真正的jquery有许多方法,有直接对jquery对象上挂载方法如:$.ajax,也有对选择器扩展的一些方法,如$(seletor).attr(),$(seletor).css...等等,也有许多jquery上的插件定义的方法。那么我们如何来拓展呢?在真正的jquery中,如果写过jquery插件或者了解过源码,那么你会知道,是通过extend这个方法来拓展jquery一些方法。我们来动手试试吧!
jquery.extend = jquery.fn.extend = function() {
var i = 1,
len = arguments.length,
target = arguments[0], //拷贝的目标对象
deep, //是否深拷贝标志
j;
/*只有一个参数*/
if (i == len) { //如$.extend({a:1}) 运行后得到$.a =1
target = this
i--
}
if (typeof arguments[0] == 'boolean') {
//如果深拷贝,如$.extend(true,{},{a:1,b:{c:2}},{d:3})
deep = true
i == 2
target = arguments[1] || {}
}
for (; i < len; i++) {
for (j in arguments[i]) {
var copy = arguments[i][j], //拷贝对象的值
src = target[i]; //拷贝到目标对象的值
var type = {}.toString.call(copy)
//深拷贝
if (deep && (type == '[object Object]' || type == '[object Array]')) {
if (!Array.isArray(src)) {
src = src || {}
} else {
src = src || []
}
target[j] = $.extend(deep, src, copy) //递归循环
} else if (copy != undefined) {
target[j] = copy
}
}
}
return target
}
让我们来动手试一试!运行效果
/*单个对象*/
var a = {
a: 1
}
jquery.extend(a)
console.log(jquery.a)
var b = {
b: 2,
c: {
d: 3
},
}
/*多个对象*/
var c = jquery.extend(a, b)
console.log(c)
c.c.d = 4
console.log(b.c.d)
var e = {
b: 2,
c: {
d: 3
},
}
/*深拷贝*/
var f = jquery.extend(true, a, e)
f.c.d = 4
console.log(e.c.d)
运行成功后我们来为我们的jquery添加上方法,click,和attr
jquery.fn.extend({
on: (function(doc) {
if (doc.addEventListener) {
return function(type, fn) {
var i = this.length - 1
for (; i >= 0; i--) {
this[i].addEventListener(type, fn, false)
}
return this
}
} else if (doc.attachEvent) {
return function(type, fn) {
var i = this.length - 1;
for (; i >= 0; i--) {
this[i].attachEvent('on' + type, fn);
}
return this
}
} else {
return function(type, fn) {
var i = this.length - 1;
for (; i >= 0; i--) {
this[i]['on' + type] = fn
}
return this
}
}
})(document),
attr: function() {
var arg = arguments,
len = arg.length;
if (len < 1) return false
if (len == 1) {
return this[0].getAttribute(arg[0])
} else if (len == 2) {
for (var i in arg[0]) {
for (var j = this.length - 1; j >= 0; j--) {
this[j].setAttribute(arg[0], arg[1])
}
}
return this
}
}
})
jquery('.cc').on('click', function() {
console.log(this)
})
jquery('.cc').attr('class','aa')
console.log(jquery('.cc').attr('class'))
以上就是javascript设计模式的链式模式的学习喔。以上皆为demo版jquery代码~