现在的位置: 首页 > javascript > 正文
小 中 大
一些javascript代码的小细节
2013年04月03日 ⁄ javascript ⁄ 共 2932字 ⁄ 评论数 2 ⁄ 被围观 5,548 views+

Javascript是一门非常灵活的语言，同一个功能可以有很多方法实现，有的时候我们实现了功能，却忘记了执行的效率。整理一下平时的小细节。
1.变量名、函数名、格式
命名规范就不说了。我想写代码的人都不是傻子，这个都是知道的。主要说下命名代表的意义，无论是函数名还是变量名，应该做到看名知意，这样自己看代码时也可以一样看出这段代码的意思，别人看代码时也容易理解，对于比较特别的地方应该加上注释，这个在团队合作中很重要，经常修改别人代码的人都知道当你修改别人代码的时候，首先要理解代码的作用，如果变量名和函数名乱写别人不得不花费很长时间理解你的意图。再说格式吧，一般javascript的框架有压缩版的，为什么没人喜欢看那个，因为那个变量名基本都是数字，你很难通过变量名函数名知道他的意图、再加上格式混乱、没有注释，你是不是头很大呢？既然有此感受，那你就不要自己写出来的代码和压缩过似的。看下面两种编码方式：

  1. function a(b,c){   
  2. this.d=b;   
  3. this.e=c;   
  4. }   
  5. a.prototype={   
  6. f:function(){   
  7. alert(this.d);   
  8. },   
  9. g:function(){   
  10. alert(this.e);   
  11. }   
  12. }  

上面的代码看了啥感觉。再看相同功能的下面的代码

  1. /**  
  2.  * User: Administrator  
  3.  * Date: 13-04-02  
  4.  * Time: 下午12:56  
  5.  * Describe:创建一个人员函数  
  6.  */  
  7. function Person(name,age){   
  8.     this.name=name;   
  9.     this.age=age;   
  10. }   
  11. //添加方法   
  12. Person.prototype={   
  13.     sayName:function(){   
  14.         alert(this.name);   
  15.     },   
  16.     sayAge:function(){   
  17.         alert(this.age);   
  18.     }   
  19. }  

两个代码都是是同样的功能，但阅读效率却差很远。不是有个笑话么，一个编码很乱的程序员、看到自己以前写的代码、大喊一声这是哪个傻X写的代码。
2.比较布尔值
就是把bool类型的变量和true或false比较，直接上代码,如下:

  1. if (isNot==true)   
  2. {   
  3.     //....执行代码   
  4.     alert("是");   
  5. }else  
  6. {   
  7.     //....执行代码   
  8.     alert("否")   
  9. }  

你还没看出问题么，那好，看下面的代码:

  1. if (isNot)   
  2. {   
  3.     //....执行代码   
  4.     alert("是");   
  5. }else  
  6. {   
  7.     //....执行代码   
  8.     alert("否")   
  9. }  

看出来了吧，isNot已经是bool类型了，没必要再进行比较了。

3.bool的返回
函数中返回为bool类型时，多余的判断 ，如下代码：

  1. function IsNotEmpty(strVlaue){   
  2.     if(strVlaue.toString()=="")   
  3.     {   
  4.         return true;   
  5.     }else  
  6.     {   
  7.         return false;   
  8.     }   
  9. }  

看不出问题的话，请往下看:

  1. function IsNotEmpty(strVlaue){   
  2.     return (strVlaue.toString()=="");   
  3. }  

因为strVlaue.toString()==""已经是bool类型了，可以直接返回，没有必要用if判断后返回
4.不必要的DOM操作
多次操作DOM时，能免则免，例如如下代码：

  1. for (var i = 0; i < 100; i++){   
  2.     var li = $("<li>").html("This is list item #" + (i+1));   
  3.     $("#oul").append(li);   
  4. }  

这段代码对DOM进行了100次修改，并且创建了100个不必要的jQuery对象。正确的做法是使用一个文档片段，或者创建一个字符串，把100个元素赋给该字符串。然后附加到HTML中。这样就只需运行DOM一次

  1. var liststring = "";   
  2. for (var i = 100; i > 0; i--){   
  3.     liststring += "<li>This is list item #" + (99- i)+"</li>";   
  4. }   
  5. document.getElementById("oul").innerHTML=liststring;  

或者如下:

  1. var lis = [];   
  2. for (var i = 100; i > 0; i--){   
  3.     lis.push("<li>This is list item #" + (99- i)+"</li>");   
  4. }   
  5. var liststring= lis.join();   
  6. document.getElementById("oul").innerHTML=liststring;  

在好多类库里面拼接HTML代码使用的就是数据拼接，怎么做不重要，重要的是思想，尽量最少的操作DOM
5.不必要的DOM访问
当代码中需要多次访问元素的状态信息，在状态不变的情况下我们可以将其暂存到变量中，这样可以避免多次访问dom带来内存的开销，典型的例子就是:

  1. var lis = document.getElementByTagName("li");   
  2. for(var i=1;i<lis.length;i++){   
  3.     //***   
  4. }   
  5. //上述方式会在每一次循环都去访问dom元素，我们可以简单将代码优化如下   
  6. var lis = document.getElementByTagName("li");   
  7. for(var i=1,j=lis.length ;i<j;i++){   
  8.     //***   
  9. }  

6.对全局代码的访问
我们在编码过程中多多少少会使用到一些全局变量（window,document,自定义全局变量等等），了解javascript作用域链的人都知道，在局部作用域中访问全局变量需要一层一层遍历整个作用域链直至顶级作用域，而局部变量的访问效率则会更快更高，因此在局部作用域中高频率使用一些全局对象时可以将其导入到局部作用域中，例如：

  1. //1、作为参数传入模块   
  2. (function(window,$){   
  3.       var _document = window.document;   
  4. })(window,jQuery);   
  5.   
  6. //2、暂存到局部变量   
  7. function a(){   
  8.     var tempDocument = document;   
  9.     var _window = window.global;   
  10. }  

所谓新手和高手的区别就在于细节，所以想成为高手。我们就得总结积累一些细节的东西。

返回

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. javascript中的 && 和 || 运算符
  2. Highcharts源码分析之wrap函数
  3. 获取页面选中内容文本(兼容input和textarea)
  4. async.js 接口文档以及测试用例
  5. jQuery禁用浏览器快捷键
  6. jQuery的html()函数和原生innerHTML属性比较
  7. 实例访问原型对象
  8. JS中的逗号操作符
技巧:propertygrid组件formatter字段内容
jQuery easyui layout 布局脚本收缩bug
panel扩展:doBorderConf方法灵活设置边框
jQuery获取DOM绑定事件问题

目前有 2 条留言 其中：访客:1 条, 博主:1 条


  1. 管理员     世纪之光 : 2013年04月07日09:44:38  -49楼 @回复 回复

    总结得不错，我有时候会把变量跟boolean值比较，一般都是用===，直接最为条件判断的话，可能的情况太多。

    • 乐于助人的小和尚 : 2015年03月27日11:15:00  地下1层 @回复 回复

      可以加个!在前面就好了比如（!数字的）

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×