JavaScript 鏈式結(jié)構(gòu)序列化詳解
一、概述
在JavaScript中，鏈式模式代碼，太多太多，如下：
if_else:
if(...){
//TODO
}else if(...){
//TODO
}else{
//TODO
}
switch:
switch(name){
case ...:{
//TODO
break;
}
case ...:{
//TODO
break;
}
default:{
//TODO
}
}
疑問：諸如上述這些鏈式代碼，倘若，我們想將其扁平化鏈式處理呢？如下：
//fn1,f2,f3為處理函數(shù)
_if(fn1)._elseIf(fn2)._else(fn3);
下面我們就來一起嘗試實現(xiàn)下唄。
二、鏈式代碼扁平化
假如，現(xiàn)在我們有如下鏈式代碼：
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!');
}
好了，現(xiàn)在我們一步一步將其"扁平化"。
其實看看上面的代碼，不難發(fā)現(xiàn)，if…else這種格式，其實就是數(shù)據(jù)結(jié)構(gòu)中的單鏈表，那么，初步利用JavaScript實現(xiàn)單鏈表，如下：
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為判斷函數(shù)，并且我們假設，如果諸如f1、f2、f3返回'next'時，就繼續(xù)往下查找，否則，停止往下查找。如下：
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!');
}
好了，這就是鏈表的模式。
但是，我們的最終目的是想實現(xiàn)如下這樣的呢？
//fn1,f2,f3為處理函數(shù)
_if(fn1)._elseIf(fn2)._else(fn3);
你可能會說，將上述代碼改成如下這樣，不就好了嗎？??！
thens.push(f1).push(f2).push(f3).resolve();
But，JavaScript的push方法返回的是數(shù)組的新長度，而不是數(shù)組對象哦。
So，那我們只能新寫一個add方法，效果和push一樣，但是返回數(shù)組對象。如下：
thens.add = function(f){
if(typeof f === 'function'){
this.push(f);
return this;
}
}
測試代碼如下：
var thens = [];
thens.add = function(f){
if(typeof f === 'function'){
this.push(f);
return this;
}
}
thens.resolve = function(name){
for(var i = 0, len = this.length; i < len;i++){
if(this[i](name) !== 'next'){
break;
}
}
}
thens.add(f1).add(f2).add(f3).resolve();
但是，這樣有個缺點，我們是將add、resolve方法綁定在全局變量thens中的，總不能每次創(chuàng)建一個數(shù)組時，都復制粘貼一遍方法吧，所以重構(gòu)代碼如下：
function Slink(){
this.thens = [];
this.thens.add = function(f){
if(typeof f === 'function'){
this.push(f);
return this;
}
}
this.thens.resolve = function(name){
for(var i = 0, len = this.length; i < len;i++){
if(this[i](name) !== 'next'){
break;
}
}
}
}
顯然，add，resolve這種公共方法，在每次實例化時，都創(chuàng)建一遍是不科學的，so，利用prototype在原有的基礎上繼續(xù)變形，如下：
function Slink(){
this.thens = [];
}
Slink.prototype = {
add: function(f){
if(typeof f === 'function'){
this.thens.push(f);
return this;
}
},
resolve: function(name){
for(var i = 0, len = this.thens.length; i < len; i++){
if(this.thens[i](name) !== 'next'){
break;
}
}
}
}
測試代碼如下：
var thens = new Slink();
thens.add(f1).add(f2).add(f3);
thens.resolve();
不錯，但是這樣，我們每次都得手動new一個Slink，有點麻煩，所以，我們將new Slink這個過程，封裝到函數(shù)中，如同jQuery一樣，如下：
function $go(f){
return new Slink(f);
}
function Slink(f){
this.thens = [];
this.thens.push(f);
}
Slink.prototype = {
add: function(f){
if(typeof f === 'function'){
this.thens.push(f);
return this;
}
},
resolve: function(name){
for(var i = 0, len = this.thens.length; i < len; i++){
if(this.thens[i](name) !== 'next'){
break;
}
}
}
}
測試代碼如下：
$go(f1).add(f2).add(f3).resolve();
好了，大功告成，接下來就是語法糖滴問題咯，整理代碼如下：
function _if(f){
return new Slink(f);
}
function Slink(f){
this.thens = [];
this.thens.push(f);
}
Slink.prototype = {
_elseIf: function(f){
if(typeof f === 'function'){
this.thens.push(f);
return this;
}
},
_else: function(f){
return this._elseIf(f);
},
resolve: function(name){
for(var i = 0, len = this.thens.length; i < len; i++){
if(this.thens[i](name) !== 'next'){
break;
}
}
return this;
}
}
測試代碼如下：
_if(f1)._elseIf(f2)._else(f3).resolve();
當然，除開利用數(shù)組這種方式，還可以利用閉包，實現(xiàn)鏈式扁平化效果，如下：
var func = Function.prototype;
func._else = func._elseIf = function(fn){
var _this = this;
return function(){
var res = _this.apply(this,arguments);
if(res==="next"){ //值為Boolean
return fn.apply(this,arguments);
}
return res;
}
}
測試代碼如下：
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!');
}
f1._elseIf(f2)._else(f3)('Dorie');
三、異步代碼鏈式扁平化
在上面我們討論的都是同步過程，倘若，鏈式調(diào)用函數(shù)中有異步情況呢？
什么意思？如下：
function f1(name){
setTimeout(function(){
if(name === 'Monkey'){
console.log('yes, I am Monkey');
}else{
return 'next';
}
}, 2000);
}
function f2(name){
if(name === 'Dorie'){
console.log('yes, I am Dorie');
}else{
return 'next';
}
}
function f3(){
console.log('sorry, over for ending!');
}
我們將f1利用setTimeout變成了異步，按照上述代碼的邏輯，應該是等f1完全執(zhí)行完畢（包括setTimeout執(zhí)行）后，判斷是否執(zhí)行f2，但真的如此嗎？
測試代碼如下：
_if(f1)._elseIf(f2)._else(f3).resolve();
執(zhí)行代碼的結(jié)果就是，什么也不輸出。
Why？
因為JavaScript是單線程嘛。詳情見（here）
那該怎么解決呢？
由于有異步代碼，且必須在異步代碼后處理后續(xù)的鏈，那么我們就等待異步代碼執(zhí)行完畢后，才執(zhí)行后續(xù)的鏈嘛，如下：
function f1(name){
setTimeout(function(){
if(name === 'Monkey'){
console.log('yes, I am Monkey');
}else{
//處理后續(xù)鏈
this.resolve(name, 1);//1代表下一個需處理函數(shù)在數(shù)組中的位置
}
}.bind(this), 2000);
}
好了，由于在函數(shù)中，我們使用了this，其代表Slink對象，且改變了resolve方法，固，需細微調(diào)整Slink構(gòu)造函數(shù)和原型鏈，如下：
function Slink(f){
this.thens = [];
this.thens.push(f.bind(this));
}
Slink.prototype = {
_elseIf: function(f){
if(typeof f === 'function'){
this.thens.push(f.bind(this));
return this;
}
},
_else: function(f){
return this._elseIf(f.bind(this));
},
resolve: function(name, flag){
for(var i = flag, len = this.thens.length; i < len; i++){
if(this.thens[i](name) !== 'next'){
break;
}
}
return this;
}
}
測試代碼如下：
function f1(name){
setTimeout(function(){
if(name === 'Monkey'){
console.log('yes, I am Monkey');
}else{
//處理后續(xù)鏈
this.resolve(name, 1);//1代表下一個需處理函數(shù)在數(shù)組中的位置
}
}.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);
哈哈，如果你了解Promise，是不是感覺這么相似呢。
是的，宗旨都一樣，達到異步代碼扁平化目的，不過這里的代碼比Promise要簡約得多啦。關于Promise詳情見(here)。
感謝閱讀此文，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
Javascript - 全面理解 caller，callee，call，apply
Javascript - 全面理解 caller，callee，call，apply...2007-01-01
這篇文章主要介紹了JS和jQuery的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
JavaScript中prototype為對象添加屬性的誤區(qū)介紹
prototype為對象添加屬性的的過程中有些誤區(qū)，在本文將為大家詳細介紹下，感興趣的朋友可不要錯過2013-10-10
Javascript客戶端腳本的設計和應用...2006-08-08
只要指定條件為 true，循環(huán)就可以一直執(zhí)行代碼，2007-04-04
本篇文章解釋了 javascript 中的兩種值類型：原始值（primitive）和對象（object），以及混合使用兩種類型時的注意事項2013-04-04
這篇文章主要介紹了轉(zhuǎn)換字符串為json對象的方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
舉例說明如何為JavaScript的方法參數(shù)設置默認值
這篇文章主要介紹了舉例說明如何為JavaScript的方法參數(shù)設置默認值,參數(shù)默認值的設置是JS入門學習中的基礎知識,需要的朋友可以參考下2015-11-11
無符號右移運算符 (>>>)是右移表達式的位，不保留符號。2009-04-04
深入理解JavaScript系列（33）：設計模式之策略模式詳解
這篇文章主要介紹了深入理解JavaScript系列（33）：設計模式之策略模式詳解,策略模式定義了算法家族,分別封裝起來,讓他們之間可以互相替換,此模式讓算法的變化不會影響到使用算法的客戶,需要的朋友可以參考下2015-03-03