日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范

一個(gè)好的程序員肯定是要能書寫可維護(hù)的代碼，而不是一次性的代碼，怎么能讓團(tuán)隊(duì)當(dāng)中其他人甚至一段時(shí)間時(shí)候你再看你某個(gè)時(shí)候?qū)懙拇a也能看懂呢，這就需要規(guī)范你的代碼了。我是有一點(diǎn)強(qiáng)迫癥的人，上周我們后端給我了一個(gè)CanUsename的接口（該接口的目的是判斷輸入的目的地是否是4級(jí)目的地），我真的是崩潰的。我只是覺得這個(gè)名字不夠語義化，但是讓我自己想一個(gè)名字我又想不出來，于是我就在想，如果有一套命名規(guī)范的話，那么以后起名字就不用發(fā)愁了，直接按照規(guī)范來就好了

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、通渭網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開發(fā)、通渭網(wǎng)絡(luò)營銷、通渭企業(yè)策劃、通渭品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供通渭建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

命名

駝峰式命名法介紹

  • Pascal Case 大駝峰式命名法：首字母大寫。eg：StudentInfo、UserInfo、ProductInfo
  • Camel Case 小駝峰式命名法：首字母小寫。eg：studentInfo、userInfo、productInfo文件資源命名
  • 文件名不得含有空格
  • 文件名建議只使用小寫字母，不使用大寫字母。( 為了醒目，某些說明文件的文件名，可以使用大寫字母，比如README、LICENSE。 )
  • 文件名包含多個(gè)單詞時(shí)，單詞之間建議使用半角的連詞線 ( - ) 分隔。
  • 引入資源使用相對(duì)路徑，不要指定資源所帶的具體協(xié)議 ( http:,https: ) ，除非這兩者協(xié)議都不可用。

不推薦：

 
 
 
    
  
  
  
  1.

推薦

 
 
 
    
  
  
  
  1.

變量命名

命名方式: 小駝峰式命名方法命名規(guī)范: 類型+對(duì)象描述的方式，如果沒有明確的類型，就可以使前綴為名詞

推薦

 
 
 
    
  
  
  
  1. var tableTitle = "LoginTable"
    2.

不推薦

 
 
 
    
  
  
  
  1. var getTitle = "LoginTable"
    2.

函數(shù)

命名方式: 小駝峰方式 ( 構(gòu)造函數(shù)使用大駝峰命名法 )命名規(guī)則: 前綴為動(dòng)詞

推薦：

 
 
 
    
  
  
  
  1. //是否可閱讀
    2. 
  
  
  
  2. function canRead(){
    3. 
  
  
  
  3.     return true;
    4. 
  
  
  
  4. }
    5. 
  
  
  
  5. 
  
  
  
  6. //獲取姓名
    7. 
  
  
  
  7. function getName{
    8. 
  
  
  
  8.     return this.name
    9. 
  
  
  
  9. }
    10.

常量

命名方法: 全部大寫命名規(guī)范: 使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。推薦： 

 
 
 
    
  
  
  
  1. var MAX_COUNT = 10;
    2. 
  
  
  
  2.  var URL = 'http://www.baidu.com';
    3.

類的成員

  • 公共屬性和方法 : 同變量命名方式
  • 私有屬性和方法 : 前綴為下劃線(_)后面跟公共屬性和方法一樣的命名方式

推薦(將name換成this是不是更熟悉了呢)

 
 
 
    
  
  
  
  1. function Student(name) {
    2. 
  
  
  
  2.     var _name = name; // 私有成員
    3. 
  
  
  
  3. 
  
  
  
  4.     // 公共方法
    5. 
  
  
  
  5.     this.getName = function () {
    6. 
  
  
  
  6.         return _name;
    7. 
  
  
  
  7.     }
    8. 
  
  
  
  8. 
  
  
  
  9.     // 公共方式
    10. 
  
  
  
  10.     this.setName = function (value) {
    11. 
  
  
  
  11.         _name = value;
    12. 
  
  
  
  12.     }
    13. 
  
  
  
  13. }
    14. 
  
  
  
  14. var st = new Student('tom');
    15. 
  
  
  
  15. st.setName('jerry');
    16. 
  
  
  
  16. console.log(st.getName()); // => jerry：輸出_name私有變量的值
    17.

注釋規(guī)范

單行注釋 ( // )

  • 單獨(dú)一行：//(雙斜線)與注釋文字之間保留一個(gè)空格
  • 在代碼后面添加注釋：//(雙斜線)與代碼之間保留一個(gè)空格，并且//(雙斜線)與注釋文字之間保留一個(gè)空格。
  • 注釋代碼：//(雙斜線)與代碼之間保留一個(gè)空格。

推薦 :

 
 
 
    
  
  
  
  1. // 調(diào)用了一個(gè)函數(shù)；1)單獨(dú)在一行
    2. 
  
  
  
  2. setTitle();
    3. 
  
  
  
  3. 
  
  
  
  4. var maxCount = 10; // 設(shè)置最大量；2)在代碼后面注釋
    5. 
  
  
  
  5. 
  
  
  
  6. // setName(); // 3)注釋代碼
    7.

多行注釋 ( / 注釋說明 / )

  • 若開始(/*和結(jié)束(*/)都在一行，推薦采用單行注釋
  • 若至少三行注釋時(shí)，第一行為/*，最后行為*/，其他行以*開始，并且注釋文字與*保留一個(gè)空格。
    推薦 : /* * 代碼執(zhí)行到這里后會(huì)調(diào)用setTitle()函數(shù) * setTitle()：設(shè)置title的值 */ setTitle();復(fù)制代碼

函數(shù) ( 方法 ) 注釋

函數(shù)(方法)注釋也是多行注釋的一種，但是包含了特殊的注釋要求，參照 javadoc(百度百科)語法：

 
 
 
    
  
  
  
  1. /** 
    2. 
  
  
  
  2. * 函數(shù)說明 
    3. 
  
  
  
  3. * @關(guān)鍵字 
    4. 
  
  
  
  4. */復(fù)制代碼
    5.

常用注釋關(guān)鍵字

推薦 :

 
 
 
    
  
  
  
  1. /**
    2. 
  
  
  
  2.  - 合并Grid的行
    3. 
  
  
  
  3.  - @param grid {Ext.Grid.Panel} 需要合并的Grid
    4. 
  
  
  
  4.  - @param cols {Array} 需要合并列的Index(序號(hào))數(shù)組；從0開始計(jì)數(shù)，序號(hào)也包含。
    5. 
  
  
  
  5.  - @param isAllSome {Boolean} ：是否2個(gè)tr的cols必須完成一樣才能進(jìn)行合并。true：完成一樣；false(默認(rèn))：不完全一樣
    6. 
  
  
  
  6.  - @return void
    7. 
  
  
  
  7.  - @author polk6 2015/07/21 
    8. 
  
  
  
  8.  - @example
    9. 
  
  
  
  9.  - _________________                             _________________
    10. 
  
  
  
  10.  - |  年齡 |  姓名 |                             |  年齡 |  姓名 |
    11. 
  
  
  
  11.  - -----------------      mergeCells(grid,[0])   -----------------
    12. 
  
  
  
  12.  - |  18   |  張三 |              =>             |       |  張三 |
    13. 
  
  
  
  13.  - -----------------                             -  18   ---------
    14. 
  
  
  
  14.  - |  18   |  王五 |                             |       |  王五 |
    15. 
  
  
  
  15.  - -----------------                             -----------------
    16. 
  
  
  
  16. */
    17. 
  
  
  
  17. function mergeCells(grid, cols, isAllSome) {
    18. 
  
  
  
  18.     // Do Something
    19. 
  
  
  
  19. }
    20.

HTML規(guī)范

文檔規(guī)范

使用 HTML5 的文檔聲明類型 :

  • DOCTYPE標(biāo)簽是一種標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明，它的目的是要告訴標(biāo)準(zhǔn)通用標(biāo)記語言解析器，它應(yīng)該使用什么樣的文檔類型定義（DTD）來解析文檔。
  • 使用文檔聲明類型的作用是為了防止開啟瀏覽器的怪異模式。
  • 沒有DOCTYPE文檔類型聲明會(huì)開啟瀏覽器的怪異模式，瀏覽器會(huì)按照自己的解析方式渲染頁面，在不同的瀏覽器下面會(huì)有不同的樣式。
  • 如果你的頁面添加了那么，那么就等同于開啟了標(biāo)準(zhǔn)模式。瀏覽器會(huì)按照W3C標(biāo)準(zhǔn)解析渲染頁面。

腳本加載

說到j(luò)s和css的位置，大家應(yīng)該都知道js放在下面，css放在上面。但是，如果你的項(xiàng)目只需要兼容ie10+或者只是在移動(dòng)端訪問，那么可以使用HTML5的新屬性async，將腳本文件放在內(nèi)兼容老舊瀏覽器(IE9-)時(shí)：腳本引用寫在 body 結(jié)束標(biāo)簽之前，并帶上 async 屬性。這雖然在老舊瀏覽器中不會(huì)異步加載腳本，但它只阻塞了 body 結(jié)束標(biāo)簽之前的 DOM 解析，這就大大降低了其阻塞影響。而在現(xiàn)代瀏覽器中：腳本將在 DOM 解析器發(fā)現(xiàn) body 尾部的 script 標(biāo)簽才進(jìn)行加載，此時(shí)加載屬于異步加載，不會(huì)阻塞 CSSOM（但其執(zhí)行仍發(fā)生在 CSSOM 之后）。綜上所述，所有瀏覽器中推薦:

 
 
 
    
  
  
  
  1. 
  
  
  
  2.   
    3. 
  
  
  
  3.     
    4. 
  
  
  
  4.   
    5. 
  
  
  
  5.   
    6. 
  
  
  
  6.     
    7. 
  
  
  
  7. 
  
  
  
  8.     
    9. 
  
  
  
  9.   
    10. 
  
  
  
  10.

只兼容現(xiàn)代瀏覽器推薦:

 
 
 
    
  
  
  
  1. 
  
  
  
  2.   
    3. 
  
  
  
  3.     
    4. 
  
  
  
  4.     
    5. 
  
  
  
  5.   
    6. 
  
  
  
  6.   
    7. 
  
  
  
  7.     
    8. 
  
  
  
  8.   
    9. 
  
  
  
  9.

語義化

我們一直都在說語義化編程，語義化編程，但是在代碼中很少有人完全使用正確的元素。使用語義化標(biāo)簽也是有理由SEO的。

語義化是指：根據(jù)元素其被創(chuàng)造出來時(shí)的初始意義來使用它。意思就是用正確的標(biāo)簽干正確的事，而不是只有div和span。

不推薦：

 
 
 
    
  
  
  
  1. My page title
    2. 
  
  
  
    3. 
  
  
  
  3.   Home
  •   News
  •   About
  •   
  •     All news articles
  •     
  •       

    Bad article

  •       Introduction sub-title
  •       This is a very bad example for HTML semantics
  •       I think I'm more on the side and should not receive the main credits
  •       
  •         This article was created by David 2014-01-01 00:00
  •       
  •     
  •     
  •       Related sections: Events, Public holidays
  •     
  •   
  •   Copyright 2014

  • 推薦

     
 
 
      
  
  
  
    1. html 代碼:
      2. 
  
  
  
      3. 
  
  
  
      4. 
  
  
  
    4.   
      5. 
  
  
  
    5.   
      My page title
      6. 
  
  
  
    6. 
  
  
  
    7. 
  
  
  
      9. 
  
  
  
      10. 
  
  
  
    10.   
      11. 
  
  
  
    11.   
        
  
  
  
      •     Home
        • 
  
  
  
      •     News
        • 
  
  
  
      •     About
        • 
  
  
  
      •   
      12. 
  
  
  
    12. 
  
  
  
    13. 
  
  
  
      15. 
  
  
  
      16. 
  
  
  
    16.   
      17. 
  
  
  
    17.   
      18. 
  
  
  
    18.     
      19. 
  
  
  
    19.     
      20. 
  
  
  
    20.       
      21. 
  
  
  
    21.       All news articles
      22. 
  
  
  
    22.     
      23. 
  
  
  
    23. 
  
  
  
    24.     
      25. 
  
  
  
    25.     
      26. 
  
  
  
    26.       
      27. 
  
  
  
    27.       
      28. 
  
  
  
    28.         
      29. 
  
  
  
    29.         Good article
      30. 
  
  
  
    30.         
      31. 
  
  
  
    31.         Introduction sub-title
      32. 
  
  
  
    32.       
      33. 
  
  
  
    33. 
  
  
  
    34.       
      35. 
  
  
  
    35.       
      36. 
  
  
  
    36.         
      This is a good example for HTML semantics
      37. 
  
  
  
    37.       
      38. 
  
  
  
    38.       
      39. 
  
  
  
    39.       
      40. 
  
  
  
    40.         
      I think I'm more on the side and should not receive the main credits
      41. 
  
  
  
    41.       
      42. 
  
  
  
    42.       
      43. 
  
  
  
    43.       
      44. 
  
  
  
    44.         
      45. 
  
  
  
    45.         
      This article was created by David 1 month ago
      46. 
  
  
  
    46.       
      47. 
  
  
  
    47.     
      48. 
  
  
  
    48. 
  
  
  
    49.     
      50. 
  
  
  
    50.     
      51. 
  
  
  
    51.       
      Related sections: Events, Public holidays
      52. 
  
  
  
    52.     
      53. 
  
  
  
    53.   
      54. 
  
  
  
    54. 
  
  
  
    55. 
  
  
  
      57. 
  
  
  
      58. 
  
  
  
    58.   Copyright 2014
      59. 
  
  
  
    59.

    alt標(biāo)簽不為空

    標(biāo)簽的 alt 屬性指定了替代文本，用于在圖像無法顯示或者用戶禁用圖像顯示時(shí)，代替圖像顯示在瀏覽器中的內(nèi)容。假設(shè)由于下列原因用戶無法查看圖像，alt 屬性可以為圖像提供替代的信息：

    從SEO角度考慮，瀏覽器的爬蟲爬不到圖片的內(nèi)容，所以我們要有文字告訴爬蟲圖片的內(nèi)容

    結(jié)構(gòu)、表現(xiàn)、行為三者分離

    盡量在文檔和模板中只包含結(jié)構(gòu)性的 HTML；而將所有表現(xiàn)代碼，移入樣式表中；將所有動(dòng)作行為，移入腳本之中。在此之外，為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。建議：

    HTML只關(guān)注內(nèi)容

    • HTML只顯示展示內(nèi)容信息
    • 不要引入一些特定的 HTML 結(jié)構(gòu)來解決一些視覺設(shè)計(jì)問題
    • 不要將img元素當(dāng)做專門用來做視覺設(shè)計(jì)的元素
    • 樣式上的問題應(yīng)該使用css解決

    不推薦：

     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
    3.   
      4. 
  
  
  
    4.   See the square next to me?
      5. 
  
  
  
    5. 
  
  
  
    6. css 代碼:
      7. 
  
  
  
    7. .text-box > .square {
      8. 
  
  
  
    8.   display: inline-block;
      9. 
  
  
  
    9.   width: 1rem;
      10. 
  
  
  
    10.   height: 1rem;
      11. 
  
  
  
    11.   background-color: red;
      12. 
  
  
  
    12. }
      13.

    推薦

     
 
 
      
  
  
  
    1. html 代碼:
      2. 
  
  
  
      3. 
  
  
  
      4. 
  
  
  
    4.   See the square next to me?
      5. 
  
  
  
    5. 
  
  
  
    6. css 代碼:
      7. 
  
  
  
    7. /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
      8. 
  
  
  
    8. .text-box:before {
      9. 
  
  
  
    9.   content: "";
      10. 
  
  
  
    10.   display: inline-block;
      11. 
  
  
  
    11.   width: 1rem;
      12. 
  
  
  
    12.   height: 1rem;
      13. 
  
  
  
    13.   background-color: red;
      14. 
  
  
  
    14. }
      15.

    圖片和 SVG 圖形能被引入到 HTML 中的唯一理由是它們呈現(xiàn)出了與內(nèi)容相關(guān)的一些信息。

    不推薦

     
 
 
      
  
  
  
    1. html 代碼:
      2. 
  
  
  
      3. 
  
  
  
      4. 
  
  
  
    4.   
      5. 
  
  
  
    5.   See the square next to me?
      6. 
  
  
  
    6.

    推薦

     
 
 
      
  
  
  
    1. html 代碼:
      2. 
  
  
  
      3. 
  
  
  
      4. 
  
  
  
    4.   See the square next to me?
      5. 
  
  
  
    5. 
  
  
  
    6. css 代碼:
      7. 
  
  
  
    7. /* We use a :before pseudo element with a background image to solve the problem */
      8. 
  
  
  
    8. .text-box:before {
      9. 
  
  
  
    9.   content: "";
      10. 
  
  
  
    10.   display: inline-block;
      11. 
  
  
  
    11.   width: 1rem;
      12. 
  
  
  
    12.   height: 1rem;
      13. 
  
  
  
    13.   background: url(square.svg) no-repeat;
      14. 
  
  
  
    14.   background-size: 100%;
      15. 
  
  
  
    15. }
      16.

    js規(guī)范

    避免全局命名空間污染

    防止全局命名空間被污染，我們通常的做法是將代碼包裹成一個(gè) IIFE(Immediately-Invoked Function Expression)，創(chuàng)建獨(dú)立隔絕的定義域。也使得內(nèi)存在執(zhí)行完后立即釋放。

    IIFE 還可確保你的代碼不會(huì)輕易被其它全局命名空間里的代碼所修改（i.e. 第三方庫，window 引用，被覆蓋的未定義的關(guān)鍵字等等）。不推薦:

     
 
 
      
  
  
  
    1. var x = 10,
      2. 
  
  
  
    2.     y = 100;
      3. 
  
  
  
    3. 
  
  
  
    4. // Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
      5. 
  
  
  
    5. // will be stored in the window object. This is very unclean and needs to be avoided.
      6. 
  
  
  
    6. console.log(window.x + ' ' + window.y);
      7.

    推薦

     
 
 
      
  
  
  
    1. // We declare a IIFE and pass parameters into the function that we will use from the global space
      2. 
  
  
  
    2. (function(log, w, undefined){
      3. 
  
  
  
    3.   'use strict';
      4. 
  
  
  
    4. 
  
  
  
    5.   var x = 10,
      6. 
  
  
  
    6.       y = 100;
      7. 
  
  
  
    7. 
  
  
  
    8.   // Will output 'true true'
      9. 
  
  
  
    9.   log((w.x === undefined) + ' ' + (w.y === undefined));
      10. 
  
  
  
    10. 
  
  
  
    11. }(window.console.log, window));
      12.

    推薦的IIFE寫法:

     
 
 
      
  
  
  
    1. (function(){
      2. 
  
  
  
    2.   'use strict';
      3. 
  
  
  
    3. 
  
  
  
    4.   // Code goes here
      5. 
  
  
  
    5. 
  
  
  
    6. }());
      7.

    如果你想引用全局變量或者是外層 IIFE 的變量，可以通過下列方式傳參：

     
 
 
      
  
  
  
    1. (function($, w, d){
      2. 
  
  
  
    2.   'use strict';
      3. 
  
  
  
    3. 
  
  
  
    4.   $(function() {
      5. 
  
  
  
    5.     w.alert(d.querySelectorAll('div').length);
      6. 
  
  
  
    6.   });
      7. 
  
  
  
    7. }(jQuery, window, document));復(fù)制代碼
      8.

    嚴(yán)格模式

    ECMAScript 5 嚴(yán)格模式可在整個(gè)腳本或獨(dú)個(gè)方法內(nèi)被激活。它對(duì)應(yīng)不同的 javascript 語境會(huì)做更加嚴(yán)格的錯(cuò)誤檢查。嚴(yán)格模式也確保了 javascript 代碼更加的健壯，運(yùn)行的也更加快速。

    嚴(yán)格模式會(huì)阻止使用在未來很可能被引入的預(yù)留關(guān)鍵字。

    你應(yīng)該在你的腳本中啟用嚴(yán)格模式，最好是在獨(dú)立的 IIFE 中應(yīng)用它。避免在你的腳本第一行使用它而導(dǎo)致你的所有腳本都啟動(dòng)了嚴(yán)格模式，這有可能會(huì)引發(fā)一些第三方類庫的問題。

    變量聲明

    總是使用 var 來聲明變量。如不指定 var，變量將被隱式地聲明為全局變量，例如

     
 
 
      
  
  
  
    1. var a = b = 0; //b會(huì)被隱式的創(chuàng)建為全局變量復(fù)制代碼
      2.

    所以，請(qǐng)總是使用 var 來聲明變量，并且使用單var模式（將所有的變量在函數(shù)最前面只使用一個(gè)var定義）。例如：

     
 
 
      
  
  
  
    1. (function (){
      2. 
  
  
  
    2.   'use strict'
      3. 
  
  
  
    3.   var a = 0,
      4. 
  
  
  
    4.       b = 0,
      5. 
  
  
  
    5.       c = 0,
      6. 
  
  
  
    6.       i,
      7. 
  
  
  
    7.       j,
      8. 
  
  
  
    8.       myObject();
      9. 
  
  
  
    9. }())
      10.

    采用嚴(yán)格模式帶來的好處是，當(dāng)你手誤輸入錯(cuò)誤的變量名時(shí)，它可以通過報(bào)錯(cuò)信息來幫助你定位錯(cuò)誤出處。

    js聲明提前

    javascript會(huì)自動(dòng)將函數(shù)作用域內(nèi)的變量和方法的定義提前（只是提前聲明，賦值還是在原處）例如：

     
 
 
      
  
  
  
    1. (function(log){
      2. 
  
  
  
    2.   'use strict';
      3. 
  
  
  
    3. 
  
  
  
    4.   var a = 10;
      5. 
  
  
  
    5. 
  
  
  
    6.   for(var i = 0; i < a; i++) {
      7. 
  
  
  
    7.     var b = i * i;
      8. 
  
  
  
    8.     log(b);
      9. 
  
  
  
    9.   }
      10. 
  
  
  
    10. 
  
  
  
    11.   if(a === 10) {
      12. 
  
  
  
    12.     var f = function() {
      13. 
  
  
  
    13.       log(a);
      14. 
  
  
  
    14.     };
      15. 
  
  
  
    15.     f();
      16. 
  
  
  
    16.   }
      17. 
  
  
  
    17. 
  
  
  
    18.   function x() {
      19. 
  
  
  
    19.     log('Mr. X!');
      20. 
  
  
  
    20.   }
      21. 
  
  
  
    21.   x();
      22. 
  
  
  
    22. 
  
  
  
    23. }(window.console.log));
      24.

    提升后的js

     
 
 
      
  
  
  
    1. (function(log){
      2. 
  
  
  
    2.   'use strict';
      3. 
  
  
  
    3.   // All variables used in the closure will be hoisted to the top of the function
      4. 
  
  
  
    4.   var a,
      5. 
  
  
  
    5.       i,
      6. 
  
  
  
    6.       b,
      7. 
  
  
  
    7.       f;
      8. 
  
  
  
    8.   // All functions in the closure will be hoisted to the top
      9. 
  
  
  
    9.   function x() {
      10. 
  
  
  
    10.     log('Mr. X!');
      11. 
  
  
  
    11.   }
      12. 
  
  
  
    12. 
  
  
  
    13.   a = 10;
      14. 
  
  
  
    14. 
  
  
  
    15.   for(i = 0; i < a; i++) {
      16. 
  
  
  
    16.     b = i * i;
      17. 
  
  
  
    17.     log(b);
      18. 
  
  
  
    18.   }
      19. 
  
  
  
    19. 
  
  
  
    20.   if(a === 10) {
      21. 
  
  
  
    21.     // Function assignments will only result in hoisted variables but the function body will not be hoisted
      22. 
  
  
  
    22.     // Only by using a real function declaration the whole function will be hoisted with its body
      23. 
  
  
  
    23.     f = function() {
      24. 
  
  
  
    24.       log(a);
      25. 
  
  
  
    25.     };
      26. 
  
  
  
    26.     f();
      27. 
  
  
  
    27.   }
      28. 
  
  
  
    28. 
  
  
  
    29.   x();
      30. 
  
  
  
    30. 
  
  
  
    31. }(window.console.log));
      32.

    使用嚴(yán)格等

    總是使用 === 精確的比較操作符，避免在判斷的過程中，由 JavaScript 的強(qiáng)制類型轉(zhuǎn)換所造成的困擾。例如：

     
     
 
 
      
  
  
  
    1. (function(log){
      2. 
  
  
  
    2.   'use strict';
      3. 
  
  
  
    3. 
  
  
  
    4.   log('0' == 0); // true
      5. 
  
  
  
    5.   log('' == false); // true
      6. 
  
  
  
    6.   log('1' == true); // true
      7. 
  
  
  
    7.   log(null == undefined); // true
      8. 
  
  
  
    8. 
  
  
  
    9.   var x = {
      10. 
  
  
  
    10.     valueOf: function() {
      11. 
  
  
  
    11.       return 'X';
      12. 
  
  
  
    12.     }
      13. 
  
  
  
    13.   };
      14. 
  
  
  
    14. 
  
  
  
    15.   log(x == 'X');
      16. 
  
  
  
    16. 
  
  
  
    17. }(window.console.log));
      18.

    等同== 和嚴(yán)格等===的區(qū)別

    • ==， 兩邊值類型不同的時(shí)候，要先進(jìn)行類型轉(zhuǎn)換，再比較。
    • ===，不做類型轉(zhuǎn)換，類型不同的一定不等。

    ==等同操作符

    • 如果兩個(gè)值具有相同類型，會(huì)進(jìn)行===比較，返回===的比較值
    • 如果兩個(gè)值不具有相同類型，也有可能返回true
    • 如果一個(gè)值是null另一個(gè)值是undefined，返回true
    • 如果一個(gè)值是string另個(gè)是number，會(huì)把string轉(zhuǎn)換成number再進(jìn)行比較
    • 如果一個(gè)值是true，會(huì)把它轉(zhuǎn)成1再比較，false會(huì)轉(zhuǎn)成0
     
     
 
 
      
  
  
  
    1. console.log( false == null )      // false
      2. 
  
  
  
    2. console.log( false == undefined ) // false
      3. 
  
  
  
    3. console.log( false == 0 )         // true
      4. 
  
  
  
    4. console.log( false == '' )        // true
      5. 
  
  
  
    5. console.log( false == NaN )       // false
      6. 
  
  
  
    6. 
  
  
  
    7. console.log( null == undefined ) // true
      8. 
  
  
  
    8. console.log( null == 0 )         // false
      9. 
  
  
  
    9. console.log( null == '' )        // false
      10. 
  
  
  
    10. console.log( null == NaN )       // false
      11. 
  
  
  
    11. 
  
  
  
    12. console.log( undefined == 0)   // false
      13. 
  
  
  
    13. console.log( undefined == '')  // false
      14. 
  
  
  
    14. console.log( undefined == NaN) // false
      15. 
  
  
  
    15. 
  
  
  
    16. console.log( 0 == '' )  // true
      17. 
  
  
  
    17. console.log( 0 == NaN ) // false
      18.

    總結(jié)一下==

    • false 除了和自身比較為 true 外，和 0，"" 比較也為 true
    • null 只和 undefined 比較時(shí)為 true， 反過來 undefined 也僅和 null 比較為 true，沒有第二個(gè)
    • 0 除了和 false 比較為 true，還有空字符串 ''" 和空數(shù)組 []
    • 空字符串 '' 除了和 false 比較為 true，還有一個(gè)數(shù)字 0

    ==, >, <, +, -, ... 這些操作符所造成的隱式類型轉(zhuǎn)換都是無副作用的，它不會(huì)改變變量本身保存的值。，但是，如果你覆寫某個(gè)對(duì)象的 valueOf/toString的話，==就會(huì)產(chǎn)生副作用.

    例如：

     
 
 
      
  
  
  
    1. Array.prototype.valueOf = function() {
      2. 
  
  
  
    2.   this[0]++;
      3. 
  
  
  
    3.   return this;
      4. 
  
  
  
    4. }
      5. 
  
  
  
    5. var x = [1, 2, 3];
      6. 
  
  
  
    6. x == 0;
      7. 
  
  
  
    7. console.log(x);   // [2, 2, 3]復(fù)制代碼
      8.

    ===操作符：

    • 要是兩個(gè)值類型不同，返回false
    • 要是兩個(gè)值都是number類型，并且數(shù)值相同，返回true
    • 要是兩個(gè)值都是stirng，并且兩個(gè)值的String內(nèi)容相同，返回true
    • 要是兩個(gè)值都是true或者都是false，返回true
    • 要是兩個(gè)值都是指向相同的Object，Arraya或者function，返回true
    • 要是兩個(gè)值都是null或者都是undefined，返回true

    真假判斷

    • js中以下內(nèi)容為假：
    • false
    • null
    • undefined
    • 0
    • '' (空字符串)
    • NaN

    設(shè)置默認(rèn)參數(shù)

    輯操作符 || 和 && 也可被用來返回布爾值。如果操作對(duì)象為非布爾對(duì)象，那每個(gè)表達(dá)式將會(huì)被自左向右地做真假判斷?；诖瞬僮?，最終總有一個(gè)表達(dá)式被返回回來。這在變量賦值時(shí)，是可以用來簡化你的代碼的。例如:如果x不存在且y不存在，x=1；如果x存在y存在，x = y

     
 
 
      
  
  
  
    1. if(!x) {
      2. 
  
  
  
    2.   if(!y) {
      3. 
  
  
  
    3.     x = 1;
      4. 
  
  
  
    4.   } else {
      5. 
  
  
  
    5.     x = y;
      6. 
  
  
  
    6.   }
      7. 
  
  
  
    7. }
      8.

    等同于：

     x = x || y || 1;復(fù)制代碼

    這一小技巧經(jīng)常用來給方法設(shè)定默認(rèn)的參數(shù)。

     
 
 
      
  
  
  
    1. (function(log){
      2. 
  
  
  
    2.   'use strict';
      3. 
  
  
  
    3. 
  
  
  
    4.   function multiply(a, b) {
      5. 
  
  
  
    5.     a = a || 1;
      6. 
  
  
  
    6.     b = b || 1;
      7. 
  
  
  
    7. 
  
  
  
    8.     log('Result ' + a * b);
      9. 
  
  
  
    9.   }
      10. 
  
  
  
    10. 
  
  
  
    11.   multiply(); // Result 1
      12. 
  
  
  
    12.   multiply(10); // Result 10
      13. 
  
  
  
    13.   multiply(3, NaN); // Result 3
      14. 
  
  
  
    14.   multiply(9, 5); // Result 45
      15. 
  
  
  
    15. 
  
  
  
    16. }(window.console.log));
      17.

    不使用eval()函數(shù)

    就如eval的字面意思來說，惡魔，使用eval()函數(shù)會(huì)帶來安全隱患。eval()函數(shù)的作用是返回任意字符串，當(dāng)作js代碼來處理。

    this關(guān)鍵字

    只在對(duì)象構(gòu)造器、方法和在設(shè)定的閉包中使用 this 關(guān)鍵字。this 的語義在此有些誤導(dǎo)。它時(shí)而指向全局對(duì)象（大多數(shù)時(shí)），時(shí)而指向調(diào)用者的定義域（在 eval 中），時(shí)而指向 DOM 樹中的某一節(jié)點(diǎn)（當(dāng)用事件處理綁定到 HTML 屬性上時(shí)），時(shí)而指向一個(gè)新創(chuàng)建的對(duì)象（在構(gòu)造器中），還時(shí)而指向其它的一些對(duì)象（如果函數(shù)被 call() 和 apply() 執(zhí)行和調(diào)用時(shí)）。

    正因?yàn)樗侨绱巳菀椎乇桓沐e(cuò)，請(qǐng)限制它的使用場景：

    • 在構(gòu)造函數(shù)中
    • 在對(duì)象的方法中（包括由此創(chuàng)建出的閉包內(nèi)）

    選擇函數(shù)式風(fēng)格

    函數(shù)式編程讓你可以簡化代碼并縮減維護(hù)成本，因?yàn)樗菀讖?fù)用，又適當(dāng)?shù)亟怦詈透俚囊蕾嚒?/p>

    接下來的例子中，在一組數(shù)字求和的同一問題上，比較了兩種解決方案。第一個(gè)例子是經(jīng)典的程序處理，而第二個(gè)例子則是采用了函數(shù)式編程和 ECMA Script 5.1 的數(shù)組方法。不推薦

     
 
 
      
  
  
  
    1. (function(log){
      2. 
  
  
  
    2.   'use strict';
      3. 
  
  
  
    3. 
  
  
  
    4.   var arr = [10, 3, 7, 9, 100, 20],
      5. 
  
  
  
    5.       sum = 0,
      6. 
  
  
  
    6.       i;
      7. 
  
  
  
    7. 
  
  
  
    8. 
  
  
  
    9.   for(i = 0; i < arr.length; i++) {
      10. 
  
  
  
    10.     sum += arr[i];
      11. 
  
  
  
    11.   }
      12. 
  
  
  
    12. 
  
  
  
    13.   log('The sum of array ' + arr + ' is: ' + sum)
      14. 
  
  
  
    14. 
  
  
  
    15. }(window.console.log));
      16.

    推薦(函數(shù)式編程)：

     
 
 
      
  
  
  
    1. (function(log){
      2. 
  
  
  
    2.   'use strict';
      3. 
  
  
  
    3. 
  
  
  
    4.   var arr = [10, 3, 7, 9, 100, 20];
      5. 
  
  
  
    5. 
  
  
  
    6.   var sum = arr.reduce(function(prevValue, currentValue) {
      7. 
  
  
  
    7.     return prevValue + currentValue;
      8. 
  
  
  
    8.   }, 0);
      9. 
  
  
  
    9. 
  
  
  
    10.   log('The sum of array ' + arr + ' is: ' + sum);
      11. 
  
  
  
    11. 
  
  
  
    12. }(window.console.log));
      13.

    修改內(nèi)建對(duì)象的原型鏈

    修改內(nèi)建的諸如 Object.prototype 和 Array.prototype 是被嚴(yán)厲禁止的。修改其它的內(nèi)建對(duì)象比如 Function.prototype，雖危害沒那么大，但始終還是會(huì)導(dǎo)致在開發(fā)過程中難以 debug 的問題，應(yīng)當(dāng)也要避免。

    三元條件判斷（if 的快捷方法）

    用三元操作符分配或返回語句。在比較簡單的情況下使用，避免在復(fù)雜的情況下使用。沒人愿意用 10 行三元操作符把自己的腦子繞暈。不推薦：

     
 
 
      
  
  
  
    1. if(x === 10) {
      2. 
  
  
  
    2.   return 'valid';
      3. 
  
  
  
    3. } else {
      4. 
  
  
  
    4.   return 'invalid';
      5. 
  
  
  
    5. }
      6.

    推薦：

     
 
 
      
  
  
  
    1. return x === 10 ? 'valid' : 'invalid'
      2.

    JSHint

    在js規(guī)范中，有很多規(guī)范都是樣式上的規(guī)范而不是邏輯上的規(guī)范，比如盡量使用===而不是==，我們可以使用JSHint或者JSLint，Javascript代碼驗(yàn)證工具，這種工具可以檢查你的代碼并提供相關(guān)的代碼改進(jìn)意見。我個(gè)人使用的是JSHint，所以就以這個(gè)為例

    webstorm內(nèi)置JSHint

    對(duì)于ws愛好者來說，我沒有用過其他的編譯器，ws基本上能滿足你的所有需求（最新的ws集成了vue）。在Settings => language & frameworks => JavaScript => Code Quality Tolls => JSHint

    webstorm中的jshint

    這些規(guī)范都是什么意思呢，這里列出一些常用的，剩下的大家可以參考官方文檔

    css規(guī)范

    id和class的命名

    ID和class的名稱總是使用可以反應(yīng)元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱不推薦 :

     
 
 
      
  
  
  
    1. .fw-800 {
      2. 
  
  
  
    2.   font-weight: 800;
      3. 
  
  
  
    3. }
      4. 
  
  
  
    4. 
  
  
  
    5. .red {
      6. 
  
  
  
    6.   color: red;
      7. 
  
  
  
    7. }
      8.

    推薦 :

     
 
 
      
  
  
  
    1. .heavy {
      2. 
  
  
  
    2.   font-weight: 800;
      3. 
  
  
  
    3. }
      4. 
  
  
  
    4. 
  
  
  
    5. .important {
      6. 
  
  
  
    6.   color: red;
      7. 
  
  
  
    7. }
      8.

    合理的使用ID

    一般情況下ID不應(yīng)該被用于樣式，并且ID的權(quán)重很高，所以不使用ID解決樣式的問題，而是使用class不推薦：

     
 
 
      
  
  
  
    1. #content .title {
      2. 
  
  
  
    2.   font-size: 2em;
      3. 
  
  
  
    3. }
      4.

    推薦：

     
 
 
      
  
  
  
    1. .content .title {
      2. 
  
  
  
    2.   font-size: 2em;
      3. 
  
  
  
    3. }
      4.

    css選擇器中避免使用標(biāo)簽名

    從結(jié)構(gòu)、表現(xiàn)、行為分離的原則來看，應(yīng)該盡量避免css中出現(xiàn)HTML標(biāo)簽，并且在css選擇器中出現(xiàn)標(biāo)簽名會(huì)存在潛在的問題。

    使用子選擇器

    很多前端開發(fā)人員寫選擇器鏈的時(shí)候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區(qū)別）。有時(shí)，這可能會(huì)導(dǎo)致疼痛的設(shè)計(jì)問題并且有時(shí)候可能會(huì)很耗性能。然而，在任何情況下，這是一個(gè)非常不好的做法。如果你不寫很通用的，需要匹配到DOM末端的選擇器， 你應(yīng)該總是考慮直接子選擇器。不推薦:

     
 
 
      
  
  
  
    1. .content .title {
      2. 
  
  
  
    2.   font-size: 2rem;
      3. 
  
  
  
    3. }
      4.

    推薦

     
 
 
      
  
  
  
    1. .content > .title {
      2. 
  
  
  
    2.   font-size: 2rem;
      3. 
  
  
  
    3. }
      4.

    盡量使用縮寫屬性

    盡量使用縮寫屬性對(duì)于代碼效率和可讀性是很有用的，比如font屬性。不推薦：

     
 
 
      
  
  
  
    1. border-top-style: none;
      2. 
  
  
  
    2. font-family: palatino, georgia, serif;
      3. 
  
  
  
    3. font-size: 100%;
      4. 
  
  
  
    4. line-height: 1.6;
      5. 
  
  
  
    5. padding-bottom: 2em;
      6. 
  
  
  
    6. padding-left: 1em;
      7. 
  
  
  
    7. padding-right: 1em;
      8. 
  
  
  
    8. padding-top: 0;
      9.

    推薦：

     
 
 
      
  
  
  
    1. border-top: 0;
      2. 
  
  
  
    2. font: 100%/1.6 palatino, georgia, serif;
      3. 
  
  
  
    3. padding: 0 1em 2em;
      4.

    0后面不帶單位

    省略0后面的
    網(wǎng)頁名稱：前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范
    文章鏈接：http://m.5511xx.com/article/dhcssse.html