在JavaScript中遭遇级联表达式陷阱

简介:
依稀还记得,在学习C语言的库函数时,很多字符串操作相关的函数都会返回和结果相关的指针。其实这个返回值很多时候都并不是非常必要,因为在我们的传入的参数中,十有八九已包含了这个指针。而加上这个返回值的最大好处就是,可以让我们方便的书写出级联表达式。但是这些年的实际工作中,越发觉得级联表达式是个魔鬼馅饼。

    比如在C语言中,我们熟悉的字符串操作函数strcpy,strcat等,它们的原形一般是:
None.gifextern char *strxxx(char *dest, char *src);

    返回值char*其实就是调用参数中的*dest,这样一来就可以方便的写出级联表达式,如下:
None.gif char *title = "Mr. ";
None.gif char *name = "birdshome";
None.gif int len = strlen(strcat(title, name));

    在面向对象编程中,通过方法返回对象,我们可以编写链式表达式。虽然不管是级联表达式也好,还是链式表达式也好,都可以让我们在编写代码的方便一些,不过如果使用不当,也会非常郁闷。特别是对于级联表达式,如果函数嵌套过多,不易理解不说,debug也会很郁闷。

    下面这个JavaScript的级联语句,就让我郁闷了很久。。。
None.gifdimInfo.push(StringHelper.ArrayToString(item.m_DimensionName,
None.gif   item.m_DimensionUniqueName, item.m_AnalysisStatus,
None.gif   (item.m_IsParameterized ? 'checked' : ''), item.m_DimensionType ), levelTypes);

    而正确的语句因该是下面这个:
None.gifdimInfo.push(StringHelper.ArrayToString(item.m_DimensionName,
None.gif   item.m_DimensionUniqueName, item.m_AnalysisStatus,
None.gif   (item.m_IsParameterized ? 'checked' : ''), item.m_DimensionType, levelTypes ));

    问题就出在倒数第二个括号上" )"上,本来这个括号应该在参数levelTypes之后,结果没有注意弄到了levelTypes前面去了,这种书写上的错误,要一眼看出来很难很难。更郁闷的是,JavaScript对函数的参数个数,以及有没有参数都一点不感兴趣,所以这个错误的语句完全可以运行"正常",只是数据传到后台后,怎么也得不到需要的值,总是undefined。

    另外,还有复合参数调用的语句,如果能适当的展开也会给我们带来很多好处,比如代码:
None.gif var rect = dashboard.getBoundingClientRect();
None.gif this.InsertNewRoom(dashboard, event.clientX-rect.left-1, event.clientY-rect.top, event);

    将复合参数展开后的代码为:
None.gif var rect = dashboard.getBoundingClientRect();
None.gif var innerX = event.clientX-rect.left-1;
None.gif var innerY = event.clientY-rect.top;
None.gif this.InsertNewRoom(dashboard, innerX, innerY, event);

    虽然这个展开的代码没有添加任何额外的逻辑,但是添加了临时变量innerX和innerY的语句显然比复合参数的语句要易于理解的多。这样代码虽然多了,但是却使代码有了self-documented特性,同时也没有改变代码的逻辑和效率。我相信在debug或者修改别人的代码时,你是希望看到后一种写法的。


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
|
4月前
|
JavaScript 前端开发 开发者
从0开始学习JavaScript--JavaScript 表达式与运算符
JavaScript中的表达式和运算符是构建逻辑、进行计算的基础。本文将深入研究JavaScript中各类表达式,包括算术表达式、关系表达式、逻辑表达式,以及运算符的使用方法,并通过丰富的示例代码来帮助读者更全面地了解和运用这些概念。
|
4月前
|
JavaScript 前端开发
JavaScript 什么是三元表达式?
JavaScript 什么是三元表达式?
|
8月前
|
JavaScript 前端开发
JS条件表达式
JS条件表达式
|
9月前
|
JavaScript Java
酷似js的java函数简写——lambda表达式
酷似js的java函数简写——lambda表达式
|
6月前
|
JavaScript 前端开发
12Vue - 模板语法(插值-使用JavaScript表达式)
12Vue - 模板语法(插值-使用JavaScript表达式)
19 0
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
6月前
|
JavaScript
JS三元表达式
JS三元表达式
41 0
|
3月前
|
JavaScript 前端开发
第5节:Vue3 JavaScript 表达式
第5节:Vue3 JavaScript 表达式
32 0
|
3月前
|
前端开发 JavaScript
【面试题】 JavaScript中高级语法--?? 表达式 的作用
【面试题】 JavaScript中高级语法--?? 表达式 的作用
|
4月前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式