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


Posted in Javascript onMarch 08, 2007

依稀还记得,在学习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或者修改别人的代码时,你是希望看到后一种写法的。

Javascript 相关文章推荐
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
js自定义瀑布流布局插件
May 16 Javascript
Vue-component全局注册实例
Sep 06 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
原型方法的不同写法居然会影响调试的解决方法
Mar 08 #Javascript
在js中使用"with"语句中跨frame的变量引用问题
Mar 08 #Javascript
JS类库Bindows1.3中的内存释放方式分析
Mar 08 #Javascript
使用IE的地址栏来辅助调试Web页脚本
Mar 08 #Javascript
JScript中的undefined和"undefined"的区别
Mar 08 #Javascript
JavaScript语句可以不以;结尾的烦恼
Mar 08 #Javascript
JScript中的"this"关键字使用方式补充材料
Mar 08 #Javascript
You might like
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
Python的时间模块datetime详解
2017/04/17 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
奥巴马就职演讲稿
2014/05/15 职场文书
广告业务员岗位职责
2015/02/13 职场文书
英文导游词
2015/02/13 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
Python first-order-model实现让照片动起来
2022/06/25 Python
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS