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

Javascript
javascript innerText和innerHtml应用
图像替换新技术 状态域方法
JavaScript 判断判断某个对象是Object还是一个Array
Extjs 几个方法的讨论
JavaScript 学习笔记(十五)
javascript 匿名函数的理解(透彻版)
Jquery 常用方法经典总结
jquery 批量上传图片实现代码
javascript中的array数组使用技巧
详细讲解JS节点知识
javascript让setInteval里的函数参数中的this指向特定的对象
javaScript 关闭浏览器 (不弹出提示框)
对字符串进行HTML编码和解码的JavaScript函数
javascript 三种编解码方式
js左侧多级菜单动态的解决方案
JavaScript 学习笔记(十六) js事件
JavaScript面向对象之静态与非静态类
javascript两段代码,两个小技巧
js中鼠标滚轮事件详解(firefox多浏览器)
js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 102 ::
收藏到网摘: 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不是梦,就在你手上。