jQuery链式操作如何实现以及为什么要用链式操作
2024-05-06 14:19:53
供稿：网友
两个问题
1.jQuery的链式操作是如何实现的？
2.为什么要用链式操作？
大家认为这两个问题哪个好回答一点呢？
链式操作
原理相信百度一下一大把，实际上链式操作仅仅是通过对象上的方法最后
return this
把对象再返回回来，对象当然可以继续调用方法啦，所以就可以链式操作了。那么，简单实现一个：
代码如下:
//定义一个JS类
function Demo() {
}
//扩展它的prototype
Demo.prototype ={
setName:function (name) {
this.name = name;
return this;
},
getName:function () {
return this.name;
},
setAge:function (age) {
this.age = age;
return this;
}
};
////工厂函数
function D() {
return new Demo();
}
//去实现可链式的调用
D().setName("CJ").setAge(18).setName();
但……为什么要用呢？
一般的解释：
节省代码量，代码看起来更优雅。
例如如果没有链式，那么你可能需要这样写代码：
代码如下:
document.getElementById("ele").dosomething();
document.getElementById("ele").dootherthing();
这个代码中调用了两次document.getElementById来获取DOM树的元素，这样消耗比较大，而且要写两行，而链式只要写一行，节省了代码……
但我们也可以用缓存元素啊。比如：
代码如下:
var ele = document.getElementById("ele");
ele.dosomething();
ele.dootherthing();
而且两行并没有比一行多多少代码，甚至相应的封装反而使得代码更多了。
最糟糕的是所有对象的方法返回的都是对象本身，也就是说没有返回值，这不一定在任何环境下都适合。
举个例子，我们想弄一个超大整数BigInteger（意思是如果用Javascript的Number保存可能会溢出的整数），顺便扩展他的运算方法，会适合用链式操作么？
例如运算31415926535 * 4 - 271828182，如果设计成链式风格的方法可能会是这样的：
代码如下:
var result = (new BigInteger("31415926535")).multiply(new BigInteger("4")).subtract(new BigInteger("271828182")).val();
console.log("result == " + result);
这看起来似乎也很优雅，但是如果我们想要中间的结果怎么办呢？或许会写成这样：
代码如下:
var bigInteger = new BigInteger("31415926535");
var result1 = bigInteger.multiply(new BigInteger("4")).val();
var result2 = bigInteger.subtract(new BigInteger("271828182")).val();
console.log("result1 == " + result1 + ", result2 == " + result2);
这似乎一点也不优雅了，和不用链式操作没啥不同嘛！
那么如果要求是原来的BigInteger不能改变呢？好吧，链式操作似乎不能满足这个需求了。
那么到底为什么要用链式操作呢？
为了更好的异步体验
Javascript是无阻塞语言，所以他不是没阻塞，而是不能阻塞，所以他需要通过事件来驱动，异步来完成一些本需要阻塞进程的操作。
