24 javascript best practices for beginner(only 23 finally)

原文是英文,链接: http://net.tutsplus.com/tutorials/JavaScript-ajax/24-JavaScript-best-practices-for-beginners/

这篇是jquery的:http://yanhaijing.com/jquery/2013/12/05/%E9%AB%98%E6%95%88jQuery%E7%9A%84%E5%A5%A5%E7%A7%98/

我自己在学习,算是自己为自己整理的笔记。

1:用===代替==(比较符)

如果两个操作数具有相同的类型和值,则===返回true,!==返回false。

===是严格等于,==是等于。

前者:比较类型和数值,若类型不等则比较结果一定不等。

后者:比较数值,若类型不等,则比较结果可能相等。因为比较时若类型不等,则会强制转换类型,然后比较。

2:eval(作者不推荐用,因为带来方便外还带来了巨大风险)

看代码吧.(eval函数接收一个参数s,如果s不是字符串,则直接返回s。否则执行s语句。如果s语句执行结果是一个值,则返回此值,否则返回undefined。)

1 var code1='"a" + 2'; //表达式 
2 varcode2='{a:2}'; //语句 
3 alert(eval(code1)); //->'a2' 
4 alert(eval(code2)); //->undefined 
5 alert(eval('(' + code2 + ')')); //->[object Object] 

3:尽量不省略花括号或者括号。虽然有时候浏览器能正常编译,但是隐患很大。

如果非要省,尽量在只有一行代码的时候省略,不过还是不建议,因为在将来你很有可能在该if语句中添加语句!

4:使用js工具debug(见英文原文如下)

JSLint is a debugger written by Douglas Crockford. Simply paste in your script, and it’ll quickly scan for any noticeable issues and errors in your code

5:把js放在页面的前面,如:

1 <p>And now you know my favorite kinds of corn. </p>  
2 <script type="text/javascript" src="path/to/file.js"></script>  
3 <script type="text/javascript" src="path/to/anotherFile.js"></script>  
4 </body>  
5 </html>  

6:在for语句的外面定义变量

7:尽量用像join这样的本地方法

1 var arr = ['item 1', 'item 2', 'item 3', ...];  
2 var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';  

大神的话:

I won’t bore you with benchmarks; you’ll just have to believe me (or test for yourself) - this is by far the fastest method!
Using native methods (like join()), regardless of what’s going on behind the abstraction layer, is usually much faster than any non-native alternative. 
- James Padolsey, james.padolsey.com

8:减少全局变量

9:注释你的代码

10:不要想当然你的代码阅读者会有运行js的环境,很有可能被禁止了。

11:不要传递一个Stringt给 "SetInterval" or "SetTimeOut"方法

12:不要使用with语句,如下3种,推荐度:3>1>2

1 with (being.person.man.bodyparts) {  //第一种
2    arms = true;  
3    legs = true;  
4 }  
1 being.person.man.bodyparts.arms = true;  //第二种
2 being.person.man.bodyparts.legs= true;  
1 var o = being.person.man.bodyparts;  //第三种
2 o.arms = true;  
3 o.legs = true;  

13:用{}代替new Object{}

14:用[]代替new Array{}

15:定义多个变量时,省略var关键字,用逗号连接并列的变量,如下:

1 var someItem = 'some string';  
2 var anotherItem = 'another string';  
3 var oneMoreItem = 'one more string';  
1 var someItem = 'some string',  
2     anotherItem = 'another string',  
3     oneMoreItem = 'one more string';  

17:一定要时刻记得用分号,尽管有时候浏览器会允许你省略分号。

18:“For in”语句

1 for(key in object) {  
2    if(object.hasOwnProperty(key) {  
3       ...then do something...  
4    }  
5 }  

19:用firebug的timer优化代码

20:review,读,再读,再读你的代码

21:初始化函数

22:原生态js比使用库要运行的快

23:引用大神的一个json分析器

1 Although JavaScript 2 should have a built-in JSON parser, as of this writing, we still need to implement our own. Douglas Crockford, the creator of JSON, has already created a parser that you can use. It can be downloaded HERE..
2 Simply by importing the script, you'll gain access to a new JSON global object, which can then be used to parse your .json file.
3 view plaincopy to clipboardprint?
4 var response = JSON.parse(xhr.responseText);  
5   
6 var container = document.getElementById('container');  
7 for(var i = 0, len = response.length; i < len; i++) {  
8   container.innerHTML += '<li>' + response[i].name + ' : ' + response[i].email + '</li>';  
9 }  

24:移除language属性

1 <script type="text/javascript" language="javascript">  
2 ...  
3 </script> 

 that's all,folks

---------------------------分割线------------------------------

以下是在原文的评论中看到的。

1:减少使用无名函数或者回调函数的数量

2:使用指定事件处理程序

1 $('#element1').bind('click', function(event){
2 $('#element2').bind('click', function(event){
3 /* do something */ 
4 }); 
5 } 
6 );

 

posted @ 2013-12-09 09:36  歌颂者  阅读(215)  评论(6编辑  收藏  举报