JavaScript之链式结构序列化

一、概述

在JavaScript中，链式模式代码，太多太多，如下：

if_else:

if(...){
//TODO
}else if(...){
//TODO
}else{
//TODO
}

switch:

switch(name){
case ...:{
//TODO
break;
}
case ...:{
//TODO
break;
}
default:{
//TODO
}
}

疑问：诸如上述这些链式代码，倘若，我们想将其扁平化链式处理呢？如下：

//fn1,f2,f3为处理函数
_if(fn1)._elseIf(fn2)._else(fn3);

下面我们就来一起尝试实现下呗。

该篇博客原文地址:http://www.cnblogs.com/giggle/p/5878285.html

二、链式代码扁平化

假如，现在我们有如下链式代码：

if(name === 'Monkey'){
console.log('yes, I am Monkey');
}else if(name === 'Dorie'){
console.log('yes, I am Dorie');
}else{
console.log('sorry, over for ending!');
}

好了，现在我们一步一步将其"扁平化"。

其实看看上面的代码，不难发现，if…else这种格式，其实就是数据结构中的单链表，那么，初步利用JavaScript实现单链表，如下：

var thens = [];
thens.resolve = function(name){
for(var i = 0, len = this.length; i < len;i++){
if(this[i](name) !== 'next'){
break;
}
}
}
thens.push(f1, f2, f3);

其中f1，f2，f3为判断函数，并且我们假设，如果诸如f1、f2、f3返回’next’时，就继续往下查找，否则，停止往下查找。如下：

function f1(name){
if(name === 'Monkey'){
console.log('yes, I am Monkey');
}else{
return 'next';
}
}
function f2(name){
if(name === 'Dorie'){
console.log('yes, I am Dorie');
}else{
return 'next';
}
}
function f3(){
console.log('sorry, over for ending!');
}

好了，这就是链表的模式。

但是，我们的最终目的是想实现如下这样的呢？

//fn1,f2,f3为处理函数
_if(fn1)._elseIf(fn2)._else(fn3);

你可能会说，将上述代码改成如下这样，不就好了吗？！！

thens.push(f1).push(f2).push(f3).resolve();

But，JavaScript的push方法返回的是数组的新长度，而不是数组对象哦。

So，那我们只能新写一个add方法，效果和push一样，但是返回数组对象。如下：

thens.add = function(f){
if(typeof f === 'function'){
this.push(f);
return this;
}
}

测试代码如下：

function f1(name){
setTimeout(function(){
if(name === 'Monkey'){
console.log('yes, I am Monkey');
}else{
//处理后续链
this.resolve(name, 1);//1代表下一个需处理函数在数组中的位置
}
}.bind(this), 2000);
}
function f2(name){
if(name === 'Dorie'){
console.log('yes, I am Dorie');
}else{
return 'next';
}
}
function f3(){
console.log('sorry, over for ending!');
}
_if(f1)._elseIf(f2)._else(f3).resolve('',0);

View Code
哈哈，如果你了解Promise，是不是感觉这么相似呢。

是的，宗旨都一样，达到异步代码扁平化目的，不过这里的代码比Promise要简约得多啦。关于Promise详情见(here)。