在JavaScript中遭遇级联表达式陷阱
作者：
在JavaScript中遭遇级联表达式陷阱
依稀还记得，在学习C语言的库函数时，很多字符串操作相关的函数都会返回和结果相关的指针。其实这个返回值很多时候都并不是非常必要，因为在我们的传入的参数中，十有八九已包含了这个指针。而加上这个返回值的最大好处就是，可以让我们方便的书写出级联表达式。但是这些年的实际工作中，越发觉得级联表达式是个魔鬼馅饼。
比如在C语言中，我们熟悉的字符串操作函数strcpy，strcat等，它们的原形一般是： extern char *strxxx(char *dest, char *src);
返回值char*其实就是调用参数中的*dest，这样一来就可以方便的写出级联表达式，如下：
char *title = "Mr. ";
char *name = "birdshome";
int len = strlen(strcat(title, name));
在面向对象编程中，通过方法返回对象，我们可以编写链式表达式。虽然不管是级联表达式也好，还是链式表达式也好，都可以让我们在编写代码的方便一些，不过如果使用不当，也会非常郁闷。特别是对于级联表达式，如果函数嵌套过多，不易理解不说，debug也会很郁闷。
下面这个JavaScript的级联语句，就让我郁闷了很久。。。 dimInfo.push(StringHelper.ArrayToString(item.m_DimensionName,
item.m_DimensionUniqueName, item.m_AnalysisStatus,
(item.m_IsParameterized ? 'checked' : ''), item.m_DimensionType), levelTypes);
而正确的语句因该是下面这个： dimInfo.push(StringHelper.ArrayToString(item.m_DimensionName,
item.m_DimensionUniqueName, item.m_AnalysisStatus,
(item.m_IsParameterized ? 'checked' : ''), item.m_DimensionType, levelTypes));
问题就出在倒数第二个括号上")"上，本来这个括号应该在参数levelTypes之后，结果没有注意弄到了levelTypes前面去了，这种书写上的错误，要一眼看出来很难很难。更郁闷的是，JavaScript对函数的参数个数，以及有没有参数都一点不感兴趣，所以这个错误的语句完全可以运行"正常"，只是数据传到后台后，怎么也得不到需要的值，总是undefined。
另外，还有复合参数调用的语句，如果能适当的展开也会给我们带来很多好处，比如代码：
var rect = dashboard.getBoundingClientRect();
this.InsertNewRoom(dashboard, event.clientX-rect.left-1, event.clientY-rect.top, event);
将复合参数展开后的代码为： var rect = dashboard.getBoundingClientRect();
var innerX = event.clientX-rect.left-1;
var innerY = event.clientY-rect.top;
this.InsertNewRoom(dashboard, innerX, innerY, event);
虽然这个展开的代码没有添加任何额外的逻辑，但是添加了临时变量innerX和innerY的语句显然比复合参数的语句要易于理解的多。这样代码虽然多了，但是却使代码有了self-documented特性，同时也没有改变代码的逻辑和效率。我相信在debug或者修改别人的代码时，你是希望看到后一种写法的。
比如在C语言中，我们熟悉的字符串操作函数strcpy，strcat等，它们的原形一般是： extern char *strxxx(char *dest, char *src);
返回值char*其实就是调用参数中的*dest，这样一来就可以方便的写出级联表达式，如下：
char *title = "Mr. ";
char *name = "birdshome";
int len = strlen(strcat(title, name));
在面向对象编程中，通过方法返回对象，我们可以编写链式表达式。虽然不管是级联表达式也好，还是链式表达式也好，都可以让我们在编写代码的方便一些，不过如果使用不当，也会非常郁闷。特别是对于级联表达式，如果函数嵌套过多，不易理解不说，debug也会很郁闷。
下面这个JavaScript的级联语句，就让我郁闷了很久。。。 dimInfo.push(StringHelper.ArrayToString(item.m_DimensionName,
item.m_DimensionUniqueName, item.m_AnalysisStatus,
(item.m_IsParameterized ? 'checked' : ''), item.m_DimensionType), levelTypes);
而正确的语句因该是下面这个： dimInfo.push(StringHelper.ArrayToString(item.m_DimensionName,
item.m_DimensionUniqueName, item.m_AnalysisStatus,
(item.m_IsParameterized ? 'checked' : ''), item.m_DimensionType, levelTypes));
问题就出在倒数第二个括号上")"上，本来这个括号应该在参数levelTypes之后，结果没有注意弄到了levelTypes前面去了，这种书写上的错误，要一眼看出来很难很难。更郁闷的是，JavaScript对函数的参数个数，以及有没有参数都一点不感兴趣，所以这个错误的语句完全可以运行"正常"，只是数据传到后台后，怎么也得不到需要的值，总是undefined。
另外，还有复合参数调用的语句，如果能适当的展开也会给我们带来很多好处，比如代码：
var rect = dashboard.getBoundingClientRect();
this.InsertNewRoom(dashboard, event.clientX-rect.left-1, event.clientY-rect.top, event);
将复合参数展开后的代码为： var rect = dashboard.getBoundingClientRect();
var innerX = event.clientX-rect.left-1;
var innerY = event.clientY-rect.top;
this.InsertNewRoom(dashboard, innerX, innerY, event);
虽然这个展开的代码没有添加任何额外的逻辑，但是添加了临时变量innerX和innerY的语句显然比复合参数的语句要易于理解的多。这样代码虽然多了，但是却使代码有了self-documented特性，同时也没有改变代码的逻辑和效率。我相信在debug或者修改别人的代码时，你是希望看到后一种写法的。