jquery 链式语法如何实现,底层代码?
$("#Test").css('color','red').show(200).removeClass('style');
上面例子就是链式操作,为id=test 的对象进行三项操作;
链式调用的原理
在对象上的方法最后 加上return this
把对象再返回回来,对象就继续调用方法了,所以就可以链式操作了。
var obj={};
obj.a=function(){
console.log("a")
return this
}
obj.b=function(){
console.log("n")
return this
}
obj.a().b();
function add (num) {
var count = num;
var _b = function(l){
count += l;
return _b
}
_b.valueOf = function(){
return count
}
return _b
}
var c = add(1)(2)(3);
console.log(c) //6
下面我们来详细分析一下代码:
1.首先,在add方法内部,我们是通过私有的_b方法实现的加法,而不是在add方法自身实现的,这里涉及到了函数式编程,这个概念我们就不在此做展开了,有兴趣的童鞋可以自己研究一下,可以说这是一种很不错的开发模式;add第一次执行后,返回了_b方法
2.在返回的_b方法中我们形成了对count的闭包,这样我们可以实现累计加和;还有一点需要注意,就是_b方法每次执行时都返回了它自身,这就实现了链式
3.最后,也是比较关键的,就是在输出add的结果,即add(1)(2)(3)的结果时,如何让它输出count,这里涉及了valueOf和toString方法的知识,还是那句话,感兴趣的童鞋可以自己研究一下;在这里最后能够正确输出6的原理是:_b是Function,是Object的一种特殊形式,当我们做类似打印console等操作时,会自动调用其valueOf方法(其实底层实现没有我说的这么简单,哈哈,但是大概是这么个意思),所以我们重写了valueOf方法来达到返回count的目的