当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 编写复杂环境下不出错的Javascript代码

Javascript
JavaScript 序列化对象实现代码
替代window.event.srcElement效果的可兼容性的函数
div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容
IE和Firefox下event事件杂谈
javascript option onclick事件ie解决方案 兼容ie,firefox
javascript demo 基本技巧
用js实现层随着内容大小动态渐变改变 推荐
JS 的应用开发初探(mootools)
JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)
JQuery Tips(4) 一些关于提高JQuery性能的Tips
jQuery 淡入淡出、展开收缩菜单实现代码
js控制div及网页相关属性的代码
javascript 翻页测试页(动态创建标签并自动翻页)
Js获取table当前tr行的值的代码
IE 上下滚动展示模仿Marquee机制
jQuery解决iframe高度自适应代码
jQuery 连续列表实现代码
利用jQuery的$.event.fix函数统一浏览器event事件处理
Javascript和Ajax中文乱码吐血版解决方案
js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE

编写复杂环境下不出错的Javascript代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 166 ::
收藏到网摘: n/a

项目上线后,遇见一个很诡异的bug. 不断有用户反馈有问题,但开发和测试折腾了好久,都没找到重现条件。直到有个热心的用户跑过来,在用户的电脑上才发现问题所在:Flash版本过低,在js的某处判断了flash的版本,之后进入的代码分支中有这样一句:

YAHOO.util.Event.on(vipPopup, 'error', function () {...});

vipPopup在此处未定义,因此导致了出错。一旦找到出错点,解决起来就快了,不多说。

这问题让我想起一个一直想总结但一直没时间去总结的话题:如何让编写鲁棒的JavaScript代码?

鲁棒(Robust音译)的定义是:放在正确的环境能得到预期的结果,放在复杂的环境下也不会出错。很多JavaScript开发者还停留在裸写代码的时代,同时业界缺乏便捷低廉的前端测试方案,这导致项目上线后,某些bug在特定环境下才能触发,结果后续的bug定位就非常麻烦了。如果我们能在开发阶段,就让JavaScript代码鲁棒点,这样,即便测试覆盖不到某些分支,也不会因为异常而导致整个js代码坏掉。下面是我的一些经验

一、养成良好的编码习惯。良好的编码习惯有两个来源:一是自己的实践、摸索和经验的沉淀,二是他人的经验,比如阅读经典书籍,看优秀的代码。《重构:改善既有代码的设计》是一本绝好的书,无论是编译语言还是脚本,我们都应该尽量去除代码的坏味道,用胃去写,用鼻子去闻,提升自己的敏觉度。举一个常见的卫语句使用场景:
robust_js_3
就这么简单,只要有这个意识,养成了编码习惯,很自然的就能让你的代码更鲁棒健壮起来。《重构》等经典好书籍,同样适合前端开发,不要有畏惧心理,只要我们去琢磨去思考,就能运用到JavaScript程序中来。

好的编码习惯的培养,还需要多思多想,不断地从实践中总结得来。比如构建一些js的基础类库,就得非常仔细地考虑暴露的API. 举个例子:一个方法的返回值是Array, 就得考虑,返回值为空时,应该返回空数组还是null. 大部分情况下,返回空数组是合理的选择,因为调用处很可能是个循环语句。

或许在不久的将来,我们能看见《Refactoring to JavaScript》这类书籍的问世。当前,多读一些经典好书,总不会错的。

二、熟悉所用的框架。无论选择了哪个框架,抑或公司自己开发了一套框架,在使用时,一定要尽量做到知根知底,这能避免重复造轮子(框架里有的不必自己再去写,这一点,看似简单,要做到还真得费一番苦功夫),能让代码精炼优雅。比如上面提到的卫语句,并非任何地方都需要:

YAHOO.util.Event.on(el, 'click', function(ev) { if(!this) return; // do something
});

上面的卫语句就是多余的。因为YUI的实现里,对传入的参数el已经做了类似判断,保证el为null或空数组时,不会出错。

三、换用强劲的IDE辅助开发。EditPlus, EmEditor, Vim等文本编辑器的确很便捷,但当编写复杂的代码时,真的不建议继续用这些编辑器,是时候换成IDE了。看看Java和C#的开发环境吧,代码提示只是最低级的功能(其实这个有没有都无所谓),但IDE的重构和即时纠错等高级功能,对提高代码的质量是非常有帮助的。比如,如果上面的代码是用IntelliJ IDEA开发的,则在编写时就会有提示:
robust_js_1
这样,直接就能将错误扼杀在编码阶段。对于Java等编译型语言来说,这是非常自然的开发过程。对于脚本语言来说,一个好的IDE,也是非常有必要的。保持绿灯常量,一天的心情都会好起来。
robust_js_2

养成良好的编码习惯可以让我们的代码更健壮,熟悉所用的框架能让我们避免不必要的重复代码,强劲的IDE可以将错误直接扼杀在编码阶段。鲁棒的JavaScript不是梦,就在你手上。