链式调用我们平常用到很多,比如jQuery中的$(ele).show().find(child).hide(),再比如angularjs中的$http.get(url).success(fn_s).error(fn_e)。但这都是已经包装好的链式调用,我们只能体会链式调用带来的方便,却不知道形成这样一条函数链的原理是什么。

  随着链式调用的普及,实现的方案也越来越多。最常见的,是jQuery直接返回this的方式,underscore的可选式的方式,和lodash惰性求值的方式。我们分别来了解,并逐个完成它们的demo。

  我们从最简单的开始,直接返回this是最常见的方式,也是所有方式的基础。我们实现一个简单的链式运算类,首先它得有个字段保留结果。

function A(num) {
this.value = num || 0; //不做传参校验了
}

  然后添加进行运算并返回this的方法。

A.prototype.add = function(a) {this.value += a; return this;}
A.prototype.reduce = function(a) {this.value -= a; return this;}

  最后为了显示正常修改两个继承的方法。

A.prototype.valueOf = function() {return this.value;}
A.prototype.toString = function() {return this.value + '';}

  进行验证。

var a = new A(2);
alert(a.add(1).reduce(2))

  这个demo应该简单到不用对任何代码进行说明,我们快速来到第二个,就是underscore中用到chain。underscore规定了两种调用方式,_.forEach(arr, fn);_.map(arr, fn);和_.chain(arr).forEach(fn).map(fn)。

  我们先实现前面一种调用方式,因为这里不是讲解underscore,所以我们只是简单实现forEach和map的功能,不对对象而仅对数组进行处理。

var _ = {};
_.forEach = function(array, fn) {
array.forEach(function(v, i, array) {
fn.apply(v, [v, i, array]);
})
};
_.map = function(array, fn) {
return array.map(function(v, i, array) {
return fn.apply(v, [v, i, array]);
})
};

  上面的代码很简单,直接调用ES5中数组原型的方法。接下来问题就来了,要实现链式调用,我们首先要做什么?我们看到第二种调用方式中,所有的操作无论是forEach还是map都是在_.chain(arr)上调用的,所以_.chain(arr)应该是返回了一个对象,这个对象上有和_上相同的方法,只是实现上传参由2个变成了1个,因为原来的第一个参数永远是_.chain中传入的参数的拷贝。

  好了,确定_.chain(arr)要返回一个对象了,那这个对象的构造函数怎么写呢?我们借用一个现成的变量来保存这个构造函数,就是_。函数也是对象,所以当_由对象变成函数,不会影响原来的逻辑,而这个函数要传入一个array,并返回一个新的对象。所以上面的代码应该改成这样。

var _ = function(array) {
this._value = Array.prototype.slice.apply(array);
}
_.forEach = function(array, fn) {
array.forEach(function(v, i, array) {
fn.apply(v, [v, i, array]);
})
};
_.map = function(array, fn) {
return array.map(function(v, i, array) {
return fn.apply(v, [v, i, array]);
})
};
_.chain = function(array) {
return new _(array);
}

  新的构造函数有了,但它生成的对象除了_value就是一片空白,我们要怎么把原本_上的方法稍加修改的移植到_生成的对象上呢?代码如下:

for(var i in _) { //首先我们要遍历_
if(i !== 'chain') { //然后要去除chain
_.prototype[i] = (function(i) { //把其他的方法都经过处理赋给_.prototype
return function() { //i是全局变量,我们要通过闭包转化为局部变量
var args = Array.prototype.slice.apply(arguments); //取出新方法的参数,其实就fn一个
args.unshift(this._value); //把_value放入参数数组的第一位
if(i === 'map') { //当方法是map的时候,需要修改_value的值
this._value = _[i].apply(this, args);
}else { //当方法是forEach的时候,不需要修改_value的值
_[i].apply(this, args);
}
return this;
}
})(i);
}
}

  最后我们模仿underscore使用value返回当前的_value。

_.prototype.value = function() {
return this._value;
}

  进行验证。

var a = [1, 2, 3];
_.forEach(a, function(v){console.log(v);})
alert(_.map(a, function(v){return ++v;}))
alert(_.chain(a).map(function(v){return ++v;}).forEach(function(v){console.log(v);}).value())

  以上是underscore中用到的链式调用的简化版,应该不难理解。那最复杂的来了,lodash惰性调用又是怎样的呢?首先我来解释下什么是惰性调用,比如上面的_.chain(arr).forEach(fn).map(fn).value(),当执行到chain(arr)的时候,返回了一个对象,执行到forEach的时候开始轮询,轮询完再返回这个对象,执行到map的时候再次开始轮询,轮询完又返回这个对象,最后执行到value,返回对象中_value的值。其中每一步都是独立的,依次进行的。而惰性调用就是,执行到forEach的时候不执行轮询的操作,而是把这个操作塞进队列,执行到map的时候,再把map的操作塞进队列。那什么时候执行呢?当某个特定的操作塞进队列的时候开始执行之前队列中所有的操作,比如当value被调用时,开始执行forEach、map和value。

  惰性调用有什么好处呢,为什么把一堆操作塞在一起反倒是更优秀的方案的?我们看传统的链式操作都是这样的格式,obj.job1().job2().job3(),没错整个函数链都是job链,如果这时候有一个简单的需求,比如连续执行100遍job1-3,那么我们就要写100遍,或者用for把整个链条断开100次。所以传统链式操作的缺点很明显,函数链中都是job,不存在controller。而一旦加上controller,比如上面的需求我们用简单的惰性调用来实现,那就是obj.loop(100).job1().job2().job3().end().done()。其中loop是声明开启100次循环,end是结束当前这次循环,done是开始执行任务的标志,代码多么简单!

  现在我们实现一下惰性链式调用,由于lodash就是underscore的威力加强版,大体架构都差不多,而上面已经有underscore的基本链式实现,所以我们脱离lodash和underscore的其他代码,仅仅实现一个类似的惰性调用的demo。

  首先我们要有一个构造函数,生成可供链式调用的对象。之前提到的,任何controller或者job的调用都是把它塞入任务队列,那么这个构造函数自然要有一个队列属性。有了队列,肯定要有索引指明当前执行的任务,所以要有队列索引。那么这个构造函数暂时就这样了

function Task() {
this.queen = [];
  this.queenIndex = 0;
}

  如果我们要实现loop,那么还要有个loop的总次数和当前loop的次数,而如果一次loop结束,我们要回到任务队列哪里呢?所以还要有个属性记录loop开始的地方。构造函数最终的形态如此:

function Task() {
this.queen = [];
this.queenIndex = 0;
this.loopCount = 0;
this.loopIndex = 0;
this.loopStart = 0;
}

  现在我们开始实现controller和job,比如上面这个例子中说到的:job()、loop()、end()、done()。它们应该都包含两种形态,一种是本来的业务逻辑,比如job的业务就是do something,而loop的控制逻辑就是记录loopCount和loopStart,end的控制逻辑就是loopIndex+1和检查loopIndex看是否需要回到loopStart的位置再次遍历。而另一种形态是不管业务逻辑是什么,把业务逻辑对应的代码统一塞进任务队列,这种形态可以称之为第一种形态的包装器。

  如果我们最终的调用格式是new Task().loop(100).job().end().done(),那么方法链上的方法肯定是包装器,这些方法自然应该放在Task.prototype上,那第一种形态的方法何去何从呢?那就放在Task.prototype.__proto__上吧。我们这样写

var _task_proto = {
loop: function(num) {
this.loopStart = this.queenIndex;
this.loopCount = num;
},
job: function(str) {
console.log(str);
},
end: function() {
this.loopIndex++;
if(this.loopIndex < this.loopCount) {
this.queenIndex = this.loopStart;
}else {
this.loopIndex = 0;
}
},
done: function() {
console.log('done');
}
};
Task.prototype.__proto__ = _task_proto;

  然后在遍历_task_proto在Task.prototype上生成包装器,并让每个包装器返回this以供链式调用(看见没,其实每一种链式调用的方式都要这么做)

  for(var i in _task_proto) {
(function(i) {
var raw = Task.prototype[i];
Task.prototype[i] = function() {
this.queen.push({
name: i,
fn: raw,
args: arguments
}); //保存具体的实现方法、名字和参数到任务队列
    return this;
};
})(i);
}

  现在问题来了,我们什么时候开始执行具体的任务,又怎样让任务有条不紊的执行和跳转呢?这时候我们要在Task.prototype上定义一个新的方法,这个方法专门用来控制任务的执行的,因为任务队列是依次执行并由索引定位的,跟迭代器有那么一点相像,我们定义这个新的方法叫next

Task.prototype.next = function() {
var task = this.queen[this.queenIndex]; //取出新的任务
task.fn.apply(this, task.args); //执行任务中指向的具体的实现方法,并传入之前保存的参数
if(task.name !== 'done') {
this.queenIndex++;
this.next(); //如果没执行完,任务索引+1并再次调用next
}else {
this.queen = [];
this.queenIndex = 0; //如果执行完了,清空任务队列,重置任务索引
}
}

  添加了next,我们需要在done的包装器上加点东西以便让任务队列开始执行,修改之前生成包装器的代码

  for(var i in _task_proto) {
(function(i) {
var raw = Task.prototype[i];
Task.prototype[i] = function() {
this.queen.push({
name: i,
fn: raw,
args: arguments
}); //保存具体的实现方法、名字和参数到任务队列
if(i === 'done') {
this.next();
}
return this;
};
})(i);
}

  最后我们进行验证。

var t = new Task();
console.log('1')
t.job('fuck').loop(3).job('world').end().loop(3).job('world').end().job('!').done();
console.log('2')
t.job('fuck').loop(3).job('world').job('!').end().done();
console.log('3')
t.job('fuck').loop(3).job('world').job('!').end().job('!');

  好了,链式调用玩到这里了。这几个demo尤其是惰性调用稍加改造后,功能可以大大加强,但是这里就不再讨论了。

最新文章

  1. Leetcode # 169, 229 Majority Element I and II
  2. 解读Unity中的CG编写Shader系列三
  3. 配置CENTOS YUM更新源
  4. (转)Linux下安装rar fou linux
  5. FreeSWITCH 1.6关于视频通话的一些测试
  6. 小米2S 连接Ubuntu Android Studio
  7. Ios 弹框 MJPopup,KxMenu
  8. Poj 2262 / OpenJudge 2262 Goldbach&#39;s Conjecture
  9. 第一个MVC模式的程序
  10. 支持https的压力测试工具
  11. 【转】Lucene.NET详细使用与优化详解
  12. 关闭sublime自动检测更新提示
  13. lua 操作数据库
  14. 201621123043 《Java程序设计》第11周学习总结
  15. Scala Option类型
  16. webToImage (网页转图片)模块试用分享
  17. AngularJS单页面路由配置恩,理解了就很简单啦
  18. C#_委托
  19. Spring Websocket实现文本、图片、声音、文件下载及推送、接收及显示(集群模式)
  20. Elasticsearch安装与环境配置

热门文章

  1. C++ STL set详解
  2. React Native 系列(五) -- 组件间传值
  3. POJ-1861-NETWORK 解题报告
  4. 605. Can Place Flowers种花问题【leetcode】
  5. React Native 系列(九) -- Tab标签组件
  6. Linux - 简明Shell编程06 - 循环语句(Loop)
  7. HDU 1231 最大连续子序列:水dp
  8. 关于CSS格式与布局中的基础知识的简单操作
  9. Get host name and port(Object-c)
  10. C#使用Xamarin开发可移植移动应用(5.进阶篇显示弹出窗口与通讯中心)附源码