常见的编码陷阱

常见的编码陷阱

不管你现在的编程技能有多么的高超，曾经你也是个亦步亦趋，不断的学习的初学者。在编程这条曲折的道路上，我想你肯定犯过一些低级的错误、遇见过一些普通的编码陷阱。本文作者跨越多个语言，818网站为大家总结了以下几条常规陷阱，并提供了解决方案。

JavaScript篇

1.不必要的DOM操作

例如下面这段代码：

1         //anti-pattern

2         for(vari=0;i<100;i++){

3         varli=$("<li>").html("Thisislistitem#"+(i+1));

4         $("#someUL").append(li);

5         }

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

6         varliststring="";

7         for(vari=100;i>0;i--){

8         liststring+="<li>Thisislistitem#"+(99-i);

9         }

10     document.getElementById("someUL").innerHTML(liststring);

正如上面所描述的一样，下面再提供一个方式，使用数组：

11     varliststring="<li>"

12     varlis=[];

13     for(vari=100;i>0;i--){

14     lis.push("Thisislistitem#"+(99-i));

15     }

16     liststring+=lis.join("</li><li>")+"</li>";

17     document.getElementById("someUL").innerHTML(liststring);

这是在JavaScript创建重复HTML最快最简单的方法，无需使用模板库或框架。

2.不一致的变量名和函数名

这个问题是非常重要的，尤其当你在别人的代码上工作时，一定要保持标识符（变量名和函

数名）一致，例如下面这段代码：

1         varfoo="bar";

2         varplant="green";

3         varcar="red";

通常，人们并不会设置变量名叫Something，这涉及到命名规则问题，命名应清晰明了，一目了然。很多编程语言地变量命名都使用大写。

下面是对函数的命名：

4         functionsubtractFive(number){

5         returnnumber-5;

6         }

语法结构清晰并且能起到解释性功能。

例如想要对给定的数字加5，仍采用上述命名模式，比如：

7         functionaddFive(number){

8         returnnumber+5;

9         }

有时，你会根据返回值命名，例如该函数要返回一个HTML字符串，那么可以命名为getTweetHTML()，如果函数只是做一些操作，无需返回值，那么可以在前面加一个do前缀。例如doFetchTweets()。

构造函数通常会遵循类原则，大写第一个字母：

10     functionDog(color){

11     this.color=color;

12     }

命名应带有描述性，比如操作型的函数在前面加do，另外要具备可读性和提示性。

点击查看全部及原文下载