推薦

html 代碼:  
      
My page title
 
         
     Home     News     About   
                    
              All news articles     
                         
                  Good article                  Introduction sub-title       
                        
This is a good 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 1 month ago
                              
Related sections: Events, Public holidays
               Copyright 2014 

alt標(biāo)簽不為空

標(biāo)簽的 alt 屬性指定了替代文本，用于在圖像無法顯示或者用戶禁用圖像顯示時(shí)，代替圖像顯示在瀏覽器中的內(nèi)容。假設(shè)由于下列原因用戶無法查看圖像，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)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。建議：

• 不使用超過一到兩張樣式表

• 不使用超過一到兩個(gè)腳本（學(xué)會(huì)用合并腳本）

• 不使用行內(nèi)樣式（）

• 不在元素上使用 style 屬性（

  ---

  ）

• 不使用行內(nèi)腳本（）

• 不使用表象元素（i.e. , ,

  , , ）

• 不使用表象 class 名（i.e. red, left, center）

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

• HTML只顯示展示內(nèi)容信息

• 不要引入一些特定的 HTML 結(jié)構(gòu)來解決一些視覺設(shè)計(jì)問題

• 不要將img元素當(dāng)做專門用來做視覺設(shè)計(jì)的元素

• 樣式上的問題應(yīng)該使用css解決

不推薦：

       See the square next to me?  css 代碼: .text-box > .square {   display: inline-block;   width: 1rem;   height: 1rem;   background-color: red; }

推薦

html 代碼:     See the square next to me?  css 代碼: /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */ .text-box:before {   content: "";   display: inline-block;   width: 1rem;   height: 1rem;   background-color: red; }

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

不推薦

html 代碼:        See the square next to me? 

推薦

html 代碼:     See the square next to me?  css 代碼: /* We use a :before pseudo element with a background image to solve the problem */ .text-box:before {   content: "";   display: inline-block;   width: 1rem;   height: 1rem;   background: url(square.svg) no-repeat;   background-size: 100%; }

js規(guī)范

避免全局命名空間污染

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

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

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

推薦

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

推薦的IIFE寫法:

(function(){   'use strict';    // Code goes here  }());

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

(function($, w, d){   'use strict';    $(function() {     w.alert(d.querySelectorAll('div').length);   }); }(jQuery, window, document));復(fù)制代碼

嚴(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，變量將被隱式地聲明為全局變量，例如

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

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

(function (){   'use strict'   var a = 0,       b = 0,       c = 0,       i,       j,       myObject(); }())

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

js聲明提前

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

(function(log){   'use strict';    var a = 10;    for(var i = 0; i < a; i++) {     var b = i * i;     log(b);   }    if(a === 10) {     var f = function() {       log(a);     };     f();   }    function x() {     log('Mr. X!');   }   x();  }(window.console.log));

提升后的js

(function(log){   'use strict';   // All variables used in the closure will be hoisted to the top of the function   var a,       i,       b,       f;   // All functions in the closure will be hoisted to the top   function x() {     log('Mr. X!');   }    a = 10;    for(i = 0; i < a; i++) {     b = i * i;     log(b);   }    if(a === 10) {     // Function assignments will only result in hoisted variables but the function body will not be hoisted     // Only by using a real function declaration the whole function will be hoisted with its body     f = function() {       log(a);     };     f();   }    x();  }(window.console.log));

使用嚴(yán)格等

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

(function(log){   'use strict';    log('0' == 0); // true   log('' == false); // true   log('1' == true); // true   log(null == undefined); // true    var x = {     valueOf: function() {       return 'X';     }   };    log(x == 'X');  }(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

console.log( false == null )      // false console.log( false == undefined ) // false console.log( false == 0 )         // true console.log( false == '' )        // true console.log( false == NaN )       // false  console.log( null == undefined ) // true console.log( null == 0 )         // false console.log( null == '' )        // false console.log( null == NaN )       // false  console.log( undefined == 0)   // false console.log( undefined == '')  // false console.log( undefined == NaN) // false  console.log( 0 == '' )  // true console.log( 0 == NaN ) // false

總結(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)生副作用.

例如：

Array.prototype.valueOf = function() {   this[0]++;   return this; } var x = [1, 2, 3]; x == 0; 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ù)

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

if(!x) {   if(!y) {     x = 1;   } else {     x = y;   } }

等同于：

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

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

(function(log){   'use strict';    function multiply(a, b) {     a = a || 1;     b = b || 1;      log('Result ' + a * b);   }    multiply(); // Result 1   multiply(10); // Result 10   multiply(3, NaN); // Result 3   multiply(9, 5); // Result 45  }(window.console.log));

不使用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)限制它的使用場(chǎng)景：

• 在構(gòu)造函數(shù)中

• 在對(duì)象的方法中（包括由此創(chuàng)建出的閉包內(nèi)）

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

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

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

(function(log){   'use strict';    var arr = [10, 3, 7, 9, 100, 20],       sum = 0,       i;     for(i = 0; i < arr.length; i++) {     sum += arr[i];   }    log('The sum of array ' + arr + ' is: ' + sum)  }(window.console.log));

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

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

修改內(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 的快捷方法）

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

if(x === 10) {   return 'valid'; } else {   return 'invalid'; }

推薦：

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愛好者來說，我沒有用過其他的編譯器，ws基本上能滿足你的所有需求（最新的ws集成了vue）。在Settings  => language & frameworks => JavaScript => Code Quality  Tolls => JSHint

webstorm中的jshint

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

css規(guī)范

id和class的命名

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

.fw-800 {   font-weight: 800; }  .red {   color: red; }

推薦 :

.heavy {   font-weight: 800; }  .important {   color: red; }

合理的使用ID

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

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

推薦：

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

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)該總是考慮直接子選擇器。不推薦:

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

推薦

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

盡量使用縮寫屬性

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

border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;

推薦：

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

0后面不帶單位

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

padding-bottom: 0px; margin: 0em;

推薦：

padding-bottom: 0; margin: 0;

屬性格式

• 為了保證一致性和可擴(kuò)展性，每個(gè)聲明應(yīng)該用分號(hào)結(jié)束，每個(gè)聲明換行。

• 屬性名的冒號(hào)后使用一個(gè)空格。出于一致性的原因，
  屬性和值（但屬性和冒號(hào)之間沒有空格）的之間始終使用一個(gè)空格。

• 每個(gè)選擇器和屬性聲明總是使用新的一行。

• 屬性選擇器或?qū)傩灾涤秒p引號(hào)（””），而不是單引號(hào)（”）括起來。

• 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

不推薦：

.box {  font-family: 'Arial', sans-serif;  border: 3px solid #ddd;  left: 30%;  position: absolute;  text-transform: uppercase;  background-color: #eee;  right: 30%;  isplay: block;  font-size: 1.5rem;  overflow: hidden;  padding: 1em;  margin: 1em;

推薦：

.box {   display: block;   position: absolute;   left: 30%;   right: 30%;   overflow: hidden;   margin: 1em;   padding: 1em;   background-color: #eee;   border: 3px solid #ddd;   font-family: 'Arial', sans-serif;   font-size: 1.5rem;   text-transform: uppercase; }

到此，關(guān)于“前端開發(fā)的規(guī)范有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！