http://www.thinkful.com/learn/javascript-best-practices-2/

 

避免大量嵌套

达到一定程度的嵌套后代码将变得不可读。

多重循环是个非常糟糕的主意,它意味着你要同时兼顾好几个迭代器变量(i, j, k, l, m…)。

function renderProfiles(o){

   var out = document.getElementById('profiles');

   for(var i=0;i<o.members.length;i++){

      var ul = document.createElement('ul');

      var li = document.createElement('li');

      li.appendChild(document.createTextNode(o.members[i].name));

      var nestedul = document.createElement('ul');

      for(var j=0;j<o.members[i].data.length;j++){

         var datali = document.createElement('li');

         datali.appendChild(

            document.createTextNode(

               o.members[i].data[j].label + ' ' +

               o.members[i].data[j].value

            )

         );

         nestedul.appendChild(detali);

      }

      li.appendChild(nestedul);

   }

   out.appendChild(ul);

}

你可以用一些专门的工具方法来避免大量嵌套和多重循环。

function renderProfiles(o){

   var out = document.getElementById('profiles');

   for(var i=0;i<o.members.length;i++){

      var ul = document.createElement('ul');

      var li = document.createElement('li');

      li.appendChild(document.createTextNode(data.members[i].name));

      li.appendChild(addMemberData(o.members[i]));

   }

   out.appendChild(ul);

}

function addMemberData(member){

   var ul = document.createElement('ul');

   for(var i=0;i<member.data.length;i++){

      var li = document.createElement('li');

      li.appendChild(

         document.createTextNode(

            member.data[i].label + ' ' +

            member.data[i].value

         )

      );

   }

   ul.appendChild(li);

   return ul;

}

考虑一下那些低端的编辑器和小屏幕吧。

优化循环

在JavaScript中,处理循环是非常慢的。

大部分时间我们都在做着毫无意义的事情。

不要在每次循环的时候都去读一次数组的长度,而是应该把这个长度存储在一个变量里。

var names = ['George',

'Ringo',

'Paul',

'John'];

for(var i=0;i<names.length;i++){

   doSomethingWith(names[i]);

}

/************************/

var names = ['George',

'Ringo',

'Paul',

'John'];

for(var i=0,j=names.length;i<j;i++){    //译注:这里初始化是var i=0, j=names.length;

   doSomethingWith(names[i]);

}

应该把大量的计算代码置于循环之外,首当其冲的是DOM操作,甚至包括正则表达式。

你可以在循环中创建DOM节点,但是要避免在循环中把它们插入到文档中。

保持最低限度的DOM访问

如果有可能的话尽量不要访问DOM。

原因: 操作DOM既缓慢又存在各种各样的浏览器兼容问题。

解决办法: 自己写一个,要么使用一个第三方的助手方法把一个数据集合(dataset)批量转化成HTML。

你可以往让这个数据集合里尽可能多地包含数据,然后调用该方法一次性渲染全部元素。

不要依赖某些浏览器的特定功能

不要指望浏览器的个别行为能在其他地方正常工作……

相比使用hack我们更应该做的是去分析问题的细节。

大多数情况下,你会发现你需要的额外的功能是因为你没有设计好你的接口导致的。

不要相信任何数据

好的代码不会相信传递进来的任何数据。

·不要相信HTML文档。

任何人都可以干预HTML代码,比如用Firebug。

·不要相信传给你的方法的参数都是正确的数据格式。.

先用typeof 检测后再做其他事情。

·不要指望DOM元素是可用的。

在修改它们之前先确保它们的确是你想要的。

·永远不要用JavaScript代码来保护你的秘密。

JavaScript是很容易被破解的代码 :)

添加不含内容的功能代码

如果你发现自己用JavaScript创建了很多很多的HTML,那么你可能正在做着错误的事。

使用DOM来创建内容是很不方便的,用innerHTML 也是很古怪的(IE中操作会因错误而终止),并且这么做也很难跟踪你所创建的代码的质量。

如果你真的有大量的界面需要用JavaScript来处理,那么把这些界面元素放到静态的HTML文件中再通过Ajax加载进来。

这样你的HTML才方便维护和定制。

站在巨人的肩上

JavaScript本身是很有趣的,但是要为浏览器编写JS代码却并不那么轻松,所以,从选择一个好的JavaScript库开始吧。

JavaScript库专门为统一浏览器行为,修补浏览器漏洞而建立,它让你编写的代码更有可预见性。

好的库会帮助你编写可以在不同浏览器里都正常运行的代码,节约你的维护成本。

开发代码并非线上代码

线上代码是为机器写的。

开发代码是为人写的。

·在发布前对你的代码进行校验、压缩和优化。

·不要过早的优化,也不要过分严厉地对待团队其他成员。

·如果我们节省下编码时间,我们就会有更多的时间优化我们的代码并把他们转化成线上的机器代码。

 


翻译仅供学习所用,如有不妥之处还请不鄙指正。

转载请注明英文原文出处:http://www.thinkful.com/learn/javascript-best-practices-2/

转载请注明中文译文出处:http://www.codingserf.com/index.php/2013/09/javascript-best-practices-part-2/