zoukankan      html  css  js  c++  java
  • 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 );
  • 相关阅读:
    Windows_10 系统封装
    leetcode-75 颜色分类
    leetcode-922 按奇偶排序数组 II
    leetcode-905 按奇偶数排序
    UVA-10827 环面上的最大子矩阵和
    leetcode918 环形最大子数组
    leetcode-85 最大矩形
    leetcode-84 柱状图中的最大矩形
    leetcode-221 最大正方形
    leetcode-713 乘积小于k的数组
  • 原文地址:https://www.cnblogs.com/m-xy/p/3464706.html
Copyright © 2011-2022 走看看