自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范

作者：Echa攻城獅
開發(fā) 前端
一個(gè)好的程序員肯定是要能書寫可維護(hù)的代碼，而不是一次性的代碼，怎么能讓團(tuán)隊(duì)當(dāng)中其他人甚至一段時(shí)間時(shí)候你再看你某個(gè)時(shí)候?qū)懙拇a也能看懂呢，這就需要規(guī)范你的代碼了。

 前端開發(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è)名字不夠語(yǔ)義化，但是讓我自己想一個(gè)名字我又想不出來(lái)，于是我就在想，如果有一套命名規(guī)范的話，那么以后起名字就不用發(fā)愁了，直接按照規(guī)范來(lái)就好了

命名

駝峰式命名法介紹

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

不推薦：

  1. <script src="http://cdn.com/foundation.min.js"></script> 

推薦

  1. <script src="//cdn.com/foundation.min.js"></script> 

變量命名

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

前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范

推薦

  1. var tableTitle = "LoginTable" 

不推薦

  1. var getTitle = "LoginTable"

函數(shù)

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

前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范

 

 

推薦：

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

常量

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

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

類的成員

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

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

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

注釋規(guī)范

單行注釋 ( // )

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

推薦 :

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

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

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

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

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

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

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

前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范

推薦 :

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

HTML規(guī)范

文檔規(guī)范

使用 HTML5 的文檔聲明類型 : <!DOCTYPE html>

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

腳本加載

說(shuō)到j(luò)s和css的位置，大家應(yīng)該都知道js放在下面，css放在上面。但是，如果你的項(xiàng)目只需要兼容ie10+或者只是在移動(dòng)端訪問(wèn)，那么可以使用HTML5的新屬性async，將腳本文件放在<head>內(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. <html> 
  2.   <head> 
  3.     <link rel="stylesheet" href="main.css"> 
  4.   </head> 
  5.   <body> 
  6.     <!-- body goes here --> 
  7.  
  8.     <script src="main.js" async></script> 
  9.   </body> 
  10. </html>

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

  1. <html> 
  2.   <head> 
  3.     <link rel="stylesheet" href="main.css"> 
  4.     <script src="main.js" async></script> 
  5.   </head> 
  6.   <body> 
  7.     <!-- body goes here --> 
  8.   </body> 
  9. </html>

語(yǔ)義化

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

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

不推薦：

  1. <b>My page title</b> 
  2. <div class="top-navigation"> 
  3.   <div class="nav-item"><a href="#home">Home</a></div> 
  4.   <div class="nav-item"><a href="#news">News</a></div> 
  5.   <div class="nav-item"><a href="#about">About</a></div> 
  6. </div> 
  7.  
  8. <div class="news-page"> 
  9.   <div class="page-section news"> 
  10.     <div class="title">All news articles</div> 
  11.     <div class="news-article"> 
  12.       <h2>Bad article</h2> 
  13.       <div class="intro">Introduction sub-title</div> 
  14.       <div class="content">This is a very bad example for HTML semantics</div> 
  15.       <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div> 
  16.       <div class="article-foot-notes"> 
  17.         This article was created by David <div class="time">2014-01-01 00:00</div> 
  18.       </div> 
  19.     </div> 
  20.  
  21.     <div class="section-footer"> 
  22.       Related sections: Events, Public holidays 
  23.     </div> 
  24.   </div> 
  25. </div> 
  26.  
  27. <div class="page-footer"> 
  28.   Copyright 2014 
  29. </div>

推薦

  1. html 代碼: 
  2. <!-- The page header should go into a header element --> 
  3. <header> 
  4.   <!-- As this title belongs to the page structure it's a heading and h1 should be used --> 
  5.   <h1>My page title</h1> 
  6. </header> 
  7.  
  8. <!-- All navigation should go into a nav element --> 
  9. <nav class="top-navigation"> 
  10.   <!-- A listing of elements should always go to UL (OL for ordered listings) --> 
  11.   <ul> 
  12.     <li class="nav-item"><a href="#home">Home</a></li> 
  13.     <li class="nav-item"><a href="#news">News</a></li> 
  14.     <li class="nav-item"><a href="#about">About</a></li> 
  15.   </ul> 
  16. </nav> 
  17.  
  18. <!-- The main part of the page should go into a main element (also use role="main" for accessibility) --> 
  19. <main class="news-page" role="main"> 
  20.   <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. --> 
  21.   <section class="page-section news"> 
  22.     <!-- A section header should go into a section element --> 
  23.     <header> 
  24.       <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) --> 
  25.       <h2 class="title">All news articles</h2> 
  26.     </header> 
  27.  
  28.     <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other 
  29.      re-usable module / section that can occur multiple times on a page) a article element should be used --> 
  30.     <article class="news-article"> 
  31.       <!-- An article can contain a header that contains the summary / introduction information of the article --> 
  32.       <header> 
  33.         <!-- As a article title does not belong to the overall page structure there should not be any heading tag! --> 
  34.         <div class="article-title">Good article</div> 
  35.         <!-- Small can optionally be used to reduce importance --> 
  36.         <small class="intro">Introduction sub-title</small> 
  37.       </header> 
  38.  
  39.       <!-- For the main content in a section or article there is no semantic element --> 
  40.       <div class="content"> 
  41.         <p>This is a good example for HTML semantics</p> 
  42.       </div> 
  43.       <!-- For content that is represented as side note or less important information in a given context use aside --> 
  44.       <aside class="article-side-notes"> 
  45.         <p>I think I'm more on the side and should not receive the main credits</p> 
  46.       </aside> 
  47.       <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element --> 
  48.       <footer class="article-foot-notes"> 
  49.         <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time 
  50.          while the actual text in the time element can also be more human readable / relative --> 
  51.         <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p> 
  52.       </footer> 
  53.     </article> 
  54.  
  55.     <!-- In a section, footnotes or similar information can also go into a footer element --> 
  56.     <footer class="section-footer"> 
  57.       <p>Related sections: Events, Public holidays</p> 
  58.     </footer> 
  59.   </section> 
  60. </main> 
  61.  
  62. <!-- Your page footer should go into a global footer element --> 
  63. <footer class="page-footer"> 
  64.   Copyright 2014 
  65. </footer>

alt標(biāo)簽不為空

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

  • 網(wǎng)速太慢
  • src 屬性中的錯(cuò)誤
  • 瀏覽器禁用圖像
  • 用戶使用的是屏幕閱讀器

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

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

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

  • 不使用超過(guò)一到兩張樣式表
  • 不使用超過(guò)一到兩個(gè)腳本（學(xué)會(huì)用合并腳本）
  • 不使用行內(nèi)樣式（<style>.no-good {}</style>）
  • 不在元素上使用 style 屬性（<hr style="border-top: 5px solid black">）
  • 不使用行內(nèi)腳本（<script>alert('no good')</script>）
  • 不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）
  • 不使用表象 class 名（i.e. red, left, center）

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

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

不推薦：

  1. <!-- We should not introduce an additional element just to solve a design problem  --> 
  2. <span class="text-box"> 
  3.   <span class="square"></span> 
  4.   See the square next to me? 
  5. </span> 
  6. css 代碼: 
  7. .text-box > .square { 
  8.   display: inline-block; 
  9.   width: 1rem; 
  10.   height: 1rem; 
  11.   background-color: red; 
  12. } 

推薦

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

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

不推薦

  1. html 代碼: 
  2. <!-- Content images should never be used for design elements!  --> 
  3. <span class="text-box"> 
  4.   <img src="square.svg" alt="Square" /> 
  5.   See the square next to me? 
  6. </span> 

推薦

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

js規(guī)范

避免全局命名空間污染

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

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

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

推薦

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

推薦的IIFE寫法:

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

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

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

嚴(yán)格模式

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

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

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

變量聲明

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

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

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

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

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

js聲明提前

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

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

提升后的js

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

使用嚴(yán)格等

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

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

等同== 和嚴(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. console.log( false == undefined ) // false 
  3. console.log( false == 0 )         // true 
  4. console.log( false == '' )        // true 
  5. console.log( false == NaN )       // false 
  6.  
  7. console.log( null == undefined ) // true 
  8. console.log( null == 0 )         // false 
  9. console.log( null == '' )        // false 
  10. console.log( null == NaN )       // false 
  11.  
  12. console.log( undefined == 0)   // false 
  13. console.log( undefined == '')  // false 
  14. console.log( undefined == NaN) // false 
  15.  
  16. console.log( 0 == '' )  // true 
  17. console.log( 0 == NaN ) // false 

總結(jié)一下==

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

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

例如：

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

===操作符：

  • 要是兩個(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ù)

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

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

等同于：

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

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

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

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

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

this關(guān)鍵字

只在對(duì)象構(gòu)造器、方法和在設(shè)定的閉包中使用 this 關(guān)鍵字。this 的語(yǔ)義在此有些誤導(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)限制它的使用場(chǎng)景：

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

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

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

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

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

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

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

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

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

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

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

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

推薦：

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

JSHint

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

webstorm內(nèi)置JSHint

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

前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范

 

webstorm中的jshint

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

前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范

 

 

css規(guī)范

id和class的命名

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

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

推薦 :

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

合理的使用ID

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

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

推薦：

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

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

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

使用子選擇器

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

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

推薦

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

盡量使用縮寫屬性

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

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

推薦：

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

0后面不帶單位

省略0后面的單位，不推薦：

  1. padding-bottom: 0px; 
  2. margin: 0em;

推薦：

  1. padding-bottom: 0; 
  2. margin: 0;

屬性格式

  • 為了保證一致性和可擴(kuò)展性，每個(gè)聲明應(yīng)該用分號(hào)結(jié)束，每個(gè)聲明換行。
  • 屬性名的冒號(hào)后使用一個(gè)空格。出于一致性的原因，
    屬性和值（但屬性和冒號(hào)之間沒有空格）的之間始終使用一個(gè)空格。
  • 每個(gè)選擇器和屬性聲明總是使用新的一行。
  • 屬性選擇器或?qū)傩灾涤秒p引號(hào)（””），而不是單引號(hào)（”）括起來(lái)。
  • URI值（url()）不要使用引號(hào)。

作為最佳實(shí)踐，我們應(yīng)該遵循以下順序（應(yīng)該按照下表的順序）：

結(jié)構(gòu)性屬性：

  1. display
  2. position, left, top, right etc.
  3. overflow, float, clear etc.
  4. margin, padding

表現(xiàn)性屬性：

  • background, border etc.
  • font, text

不推薦：

  1. .box { 
  2.  font-family: 'Arial', sans-serif; 
  3.  border: 3px solid #ddd; 
  4.  left: 30%; 
  5.  position: absolute; 
  6.  text-transform: uppercase; 
  7.  background-color: #eee; 
  8.  right: 30%; 
  9.  isplay: block; 
  10.  font-size: 1.5rem; 
  11.  overflow: hidden; 
  12.  padding: 1em; 
  13.  margin: 1em;

推薦：

  1. .box { 
  2.   display: block; 
  3.   position: absolute; 
  4.   left: 30%; 
  5.   right: 30%; 
  6.   overflow: hidden; 
  7.   margin: 1em; 
  8.   padding: 1em; 
  9.   background-color: #eee; 
  10.   border: 3px solid #ddd; 
  11.   font-family: 'Arial', sans-serif; 
  12.   font-size: 1.5rem; 
  13.   text-transform: uppercase; 
  14. } 

 

責(zé)任編輯：龐桂玉 來(lái)源： 今日頭條
前端命名規(guī)范html規(guī)范
相關(guān)推薦

2016-09-29 15:19:04

HTMLCSSWeb

2009-08-03 16:57:42

ASP.NET編程規(guī)范

2016-05-17 14:03:07

Android命名解決方案

2022-08-02 07:48:06

容器鏡像版本

2017-07-20 11:11:39

前端CSS書寫規(guī)范

2020-11-05 10:20:54

前端編碼規(guī)范安全漏洞

2023-11-22 08:00:56

Go命名規(guī)范

2011-11-01 10:12:09

Web

2010-09-07 15:53:02

CSS規(guī)范化

2011-05-13 16:53:58

JavaScript

2010-08-31 13:32:12

CSS

2022-12-28 08:16:30

CSS新規(guī)范樣式

2010-04-30 14:05:55

Mocha BSM運(yùn)維管理摩卡軟件

2010-08-24 15:31:51

DIVCSS

2010-09-02 09:32:09

DIV CSS

2009-08-13 13:38:30

C#命名規(guī)范

2009-08-21 08:52:40

C#語(yǔ)言命名

2009-08-27 16:30:08

C#編程命名規(guī)范

2009-08-19 15:24:30

.NET命名規(guī)范

2009-08-03 17:07:13

ASP.NET編程規(guī)范
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)