您当前的位置: 首页 > 技术文章 > 前端开发

如何编写高质量的Javascript代码(2)

作者:licqi 时间:2011-03-09阅读数:人阅读
    for循环 在for循环中你会去迭代一些数组元素或者一些HTML元素。for循环常常如此:
[js]for (var i = 0; i < myarray.length; i++) { // do something with myarray[i] } [/js]
    这样写的问题在于,每一次迭代的时候都会计算数组的长度,尤其在这个参数不是一个数组而是一组HTML元素的时候会降低你的程序的性能。 HTML元素的集合在页面上,这样每次都会去再页面上查找相应的元素,这是非常耗时的。所以对于for循环,你需要预先保存数组的长度,这样写:
[js]for (var i = 0, max = myarray.length; i < max; i++) { // do something with myarray[i] } [/js]
    这样缓存了参数的长度,在每次迭代的时候就不用再去查找计算了。 在查找HTML元素集合的时候,缓存参数长度可以带来可观的性能提升,Safari下面提高两倍的速度,在IE7下面提高190倍的速度。 需要注意的是,当你需要操作修改DOM元素的数量的时候,你肯定希望这个值是随时更新的而不是一个常量。 使用下面的单一var模式,你也可以把var提到循环之外:
[js]function looper() { var i = 0, max, myarray = []; // ... for (i = 0, max = myarray.length; i < max; i++) { // do something with myarray[i] } } [/js]
    这个模式可以增强整个代码的连续性,但是不好的一点是当你重构代码的时候复制粘贴就没那么容易了。例如:如果你想在其他函数中也使用这个循环,那你需要确定在新的函数中处理好了i和max(或许还需要删掉这个)。 这个函数还有两个点可以优化的: ◆可以少一个变量(不需要max) ◆递减到0,一个数字与0比较比这个数字与另外一个数字比较更快 所以就可以写为:
[js]var i, myarray = []; for (i = myarray.length; i--;) { // do something with myarray[i] } [/js] 针对第二点: [js]var myarray = [], i = myarray.length; while (i--) { // do something with myarray[i] } [/js]
    这是两个比较微小的点的优化。另外,JSLint可能对于i–会有意见。 for-in循环 for-in循环用来迭代非数组的对象。使用for-in循环通常也成为枚举。 从技术上来说,你也可以用for-in来循环数组,因为数组也是对象,但是不推荐。如果数组有一些自定义的扩展函数,那么就会出错。另外,对象属性的顺序在for-in循环中也是不确定的。所以最好还是用普通的循环来循环数组用for-in来循环对象。 在循环对象的过程中,使用hasOwnProperty()方法来检验是对象本身的属性还是原型链上的属性很重要。 看看下面的这个例子。
[js]// the object var man = { hands: 2, legs: 2, heads: 1 }; // somewhere else in the code // a method was added to all objects if (typeof Object.prototype.clone === "undefined") { Object.prototype.clone = function () {}; } [/js] 在这个例子中,我们有一个简单的称作man的对象字面量。在其他man定义之前或之后的地方,对象原型有一个很有用的clone()方法。因为原型链的原因,所有的对象都自动获得了这个方法。为了在枚举man对象的时候出现clone方法,你需要使用hasOwnProperty方法来区别。如果没有区别来自原型链的方法,那么就会有一些意想不到的事情发生: [js]// 1. // for-in loop for (var i in man) { if (man.hasOwnProperty(i)) { // filter console.log(i, ":", man[i]); } } /* result in the console hands : 2 legs : 2 heads : 1 */ // 2. // antipattern: // for-in loop without checking hasOwnProperty() for (var i in man) { console.log(i, ":", man[i]); } /* result in the console hands : 2 legs : 2 heads : 1 clone: function() */ [/js] 另外一种使用方法如下: [js]for (var i in man) { if (Object.prototype.hasOwnProperty.call(man, i)) { // filter console.log(i, ":", man[i]); } } [/js] 这样写的好处是可以防止man重新定义了hasOwnProperty方法导致的冲突。如果不想写这么长的一串,你也可以这样: [js]var i, hasOwn = Object.prototype.hasOwnProperty; for (i in man) { if (hasOwn.call(man, i)) { // filter console.log(i, ":", man[i]); } } [/js]
    严格意义上讲,不适用hasOwnProperty也不是什么错误。根据任务的难度和你对代码的自信程度,你也可以不用这个直接循环。但是当你不确定的时候,最好还是使用这个方法检测一下。 另外一种格式上的改变(不会通过jsLint的检查),去掉for的大括号,然后把if放在同一行。这样做的好处可以让循环体更加突出,缩进也就少一些:
[js]// Warning: doesn't pass JSLint var i, hasOwn = Object.prototype.hasOwnProperty; for (i in man) if (hasOwn.call(man, i)) { // filter console.log(i, ":", man[i]); } [/js]
    不要扩展内建的原型 扩展原型的构造函数,可以提供一些很强大的功能,但是有时候他太强大了。 有时候你会去扩展Object(),Array(),Fucntion()的原型方法,这样会导致可维护性的问题,因为这会让你的代码的移植性变差。其他的开发人员使用你的代码的时候,可能只需要原生的方法,并不需要额外的功能。 另外,你添加进去的方法,如果在循环的时候没有使用hasOwnProperty方法就会被遍历出来,这会让人很迷惑。 所以,最好还是不要扩展基本的对象。除非是下面的情况: ◆你确定在将来根据ECMAScript规范,浏览器会添加相应的原型方法,那么是可以的,你只不过是提前实现了这个功能。 ◆你确定的你要实现的方法不存在–或许有时候在代码的其他的地方实现了,或者有的浏览器支持,这都是不行的。 ◆有非常清晰的文档,并且与团队成员沟通过 如果在这些情况之下,那么你就可以添加,最好是下面这种形式:
[js]if (typeof Object.prototype.myMethod !== "function") { Object.prototype.myMethod = function () { // implementation... }; } [/js]
    switch模式 按照下面的风格写switch的话,可以提高你的代码可读性和健壮性:
[js]var inspect_me = 0, result = ''; switch (inspect_me) { case 0: result = "zero"; break; case 1: result = "one"; break; default: result = "unknown"; } [/js]
    需要注意下面几个方面: ◆将case和switch对齐。 ◆case的内容缩进 ◆每一个case之后都有一个清晰的break ◆避免顺序往下执行case,非要如此的话,文档一定要写清楚 ◆最后使用default,保证在没有命中case的情况下也有反馈 避免隐藏的类型转换 Javascript在你比较两个变量的时候会进行类型的转换,这就是为什么 false == 0或者”" == 0会返回true。 为了避免这种隐藏的类型转换带来的迷惑,最好使用===或者!==操作符来比较:
[js]var zero = 0; if (zero === false) { // not executing because zero is 0, not false } // antipattern if (zero == false) { // this block is executed... } [/js]
    还有另外一种流派持这样的观点:当==够用时使用===就是多余的。比如,当你使用typeof的时候你知道会返回string,所以没必要使用严格的检验。然而,JSLint要求严格检验;他最大程度使代码在阅读的时候减少歧义,(“这个==是故意呢还是疏漏?”)。 避免使用eval() 如果你在你的代码中使用eval(),那么要记住”eval() is evil”。这个方法会将传入的字符串当做js代码来执行。如果代码是在运行前就确定的,那么没有必要使用eval()。如果代码是在运行时动态确定的,那么也有其他更安全的办法。例如使用方括号形式访问元素的属性:
[js]// antipattern var property = "name"; alert(eval("obj." + property)); // preferred var property = "name"; alert(obj[property]); [/js]
    使用eval()还有安全问题,比如你运行网络上的一段代码,而这段代码又被别人篡改了。在处理Ajax请求返回的JSON数据的时候,最好还是使用浏览器内建的处理方法,如果对于低端的浏览器不支持的,可以从JSON.org上下载对应的处理库。 另外还要记住使用setTimeout、setInterval以及Function的构造函数的是,传入的字符串的参数,js的处理方法跟eval()类似,所以也要注意。因为,js会把你传入的字符串解析执行:
[js]// antipatterns setTimeout("myFunc()", 1000); setTimeout("myFunc(1, 2, 3)", 1000); // preferred setTimeout(myFunc, 1000); setTimeout(function () { myFunc(1, 2, 3); }, 1000); [/js]
    使用Function的构造函数,跟eval()差不多,也要注意。这是个非常有用的功能,但是常常被错用。如果你必须使用eval(),那么可以考虑new一个Function来替代。另外的一个好处就是,使用Function的构造函数,函数的作用域在本方法内,这样你使用var声明的变量就不会变成全局的。另外一个防止eval()生成全局变量的办法就是使用匿名函数。 看看下面这个例子,只有un变量最终是全局的:
[js]console.log(typeof un); // "undefined" console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined" var jsstring = "var un = 1; console.log(un);"; eval(jsstring); // logs "1" jsstring = "var deux = 2; console.log(deux);"; new Function(jsstring)(); // logs "2" jsstring = "var trois = 3; console.log(trois);"; (function () { eval(jsstring); }()); // logs "3" console.log(typeof un); // number console.log(typeof deux); // undefined console.log(typeof trois); // undefined [/js] eval()和Function构造函数的另一个区别就是eval()会影响到作用域,而Function则相当于一个沙盒。例如: [js](function () { var local = 1; eval("local = 3; console.log(local)"); // logs 3 console.log(local); // logs 3 }()); (function () { var local = 1; Function("console.log(typeof local);")(); // logs undefined }()); [/js]
    使用parseInt()转换处理数字 使用parseInt()你可以将字符串转为数字。这个方法支持第二个表示进制的参数,常常被忽略。问题常常在处理一段以0开始的字符串的时候。在ECMAS3标准中,以0开始表示八进制,但是在ES5中又改了,所以为了避免麻烦,最好还是标明第二个参数。
[js]var month = "06", year = "09"; month = parseInt(month, 10); year = parseInt(year, 10); [/js]
    在这个例子中,如果你使用parseInt(year),就会返回0,因为09被认为是8进制数字,然而9是非法的八进制字符,所以返回0。 其他的可以把字符串转为数字的方法有:
[js]+"08" // result is 8 umber("08") // 8 [/js] 这些通常都比parseInt()快一些,因为parseInt并不只是简单的转换。但是如果你的输入是”08 hello”这样的,那么parseInt()也会返回8,但是其他的方法就只能返回NaN。

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦