HTML5 规范
在學(xué)習(xí)編程的時(shí)候，每次看到那些整齊規(guī)范的代碼，心里頓時(shí)對(duì)這個(gè)程序員表示點(diǎn)點(diǎn)好感，有時(shí)，比如看到自己和朋友寫(xiě)的代碼時(shí)，那閱讀起來(lái)就是苦不堪言，所以，一些基本的開(kāi)發(fā)規(guī)范是必須的，是為了自己方便閱讀代碼，也方便他人閱讀修改代碼。
命名
駝峰式命名法介紹
Pascal Case 大駝峰式命名法：首字母大寫(xiě)。eg：StudentInfo、UserInfo、ProductInfo?
Camel Case 小駝峰式命名法：首字母小寫(xiě)。eg：studentInfo、userInfo、productInfo
文件資源命名
文件名不得含有空格?
文件名建議只使用小寫(xiě)字母，不使用大寫(xiě)字母。( 為了醒目，某些說(shuō)明文件的文件名，可以使用大寫(xiě)字母，比如README、LICENSE。 )?
文件名包含多個(gè)單詞時(shí)，單詞之間建議使用半角的連詞線 ( - ) 分隔。?
引入資源使用相對(duì)路徑，不要指定資源所帶的具體協(xié)議 ( http:,https: ) ，除非這兩者協(xié)議都不可用。
推薦：
<script src="//cdn.com/foundation.min.js"></script>- 1
變量命名
命名方式： 小駝峰式命名方法
命名規(guī)范： 類型+對(duì)象描述的方式，如果沒(méi)有明確的類型，就可以使前綴為名詞
類型 小寫(xiě)字母?
array a?
boolean b?
function fn?
int i?
object o?
regular r?
string s
函數(shù)
命名方式：小駝峰方式 ( 構(gòu)造函數(shù)使用大駝峰命名法 )
命名規(guī)則：前綴為動(dòng)詞
動(dòng)詞 含義 返回值?
can 判斷是否可執(zhí)行某個(gè)動(dòng)作 ( 權(quán)限 ) 函數(shù)返回一個(gè)布爾值。true：可執(zhí)行；false：不可執(zhí)行?
has 判斷是否含有某個(gè)值 函數(shù)返回一個(gè)布爾值。true：含有此值；false：不含有此值?
is 判斷是否為某個(gè)值 函數(shù)返回一個(gè)布爾值。true：為某個(gè)值；false：不為某個(gè)值?
get 獲取某個(gè)值 函數(shù)返回一個(gè)非布爾值?
set 設(shè)置某個(gè)值 無(wú)返回值、返回是否設(shè)置成功或者返回鏈?zhǔn)綄?duì)象
推薦：
//是否可閱讀 function canRead(){ return true; } //獲取姓名 function getName{ return this.name }常量
命名方法:全部大寫(xiě)
命名規(guī)范：使用大寫(xiě)字母和下劃線來(lái)組合命名，下劃線用以分割單詞
推薦：
var MAX_COUNT = 10;var URL = 'http://www.baidu.com';- 1
- 2
類的成員
- 公共屬性和方法：同變量命名方式
- 私有屬性和方法：前綴為下劃線(_)后面跟公共屬性和方法一樣的命名方式
推薦（將name換成this是不是更熟悉了呢）
function Student(name) {var _name = name; // 私有成員 // 公共方法 this.getName = function () { return _name; } // 公共方式 this.setName = function (value) { _name = value; } } var st = new Student('tom'); st.setName('jerry'); console.log(st.getName()); // => jerry：輸出_name私有變量的值?
注釋規(guī)范
單行注釋（//）
- 單獨(dú)一行：//(雙斜線)與注釋文字之間保留一個(gè)空格
- 在代碼后面添加注釋：//(雙斜線)與代碼之間保留一個(gè)空格，并且//(雙斜線)與注釋文字之間保留一個(gè)空格。
-
注釋代碼：//(雙斜線)與代碼之間保留一個(gè)空格。
推薦：
多行注釋（ / 注釋說(shuō)明 /）
- 若開(kāi)始(/和結(jié)束(/)都在一行，推薦采用單行注釋
- 若至少三行注釋時(shí)，第一行為/，最后行為/，其他行以開(kāi)始，并且注釋文字與保留一個(gè)空格。
推薦：
/* * 代碼執(zhí)行到這里后會(huì)調(diào)用setTitle()函數(shù) * setTitle()：設(shè)置title的值 */ setTitle();函數(shù)（方法）注釋
函數(shù)(方法)注釋也是多行注釋的一種，但是包含了特殊的注釋要求，參照 javadoc(百度百科)?
語(yǔ)法：
常用注釋關(guān)鍵字
注釋名 語(yǔ)法 含義 示例 @param @param 參數(shù)名 {參數(shù)類型} 描述信息 描述參數(shù)的信息 @param name {String} 傳入名稱 @return @return {返回類型} 描述信息 描述返回值的信息 @return {Boolean} true:可執(zhí)行;false:不可執(zhí)行 @author @author 作者信息 [附屬信息：如郵箱、日期] 描述此函數(shù)作者的信息 @author 張三 2015/07/21 @version @version XX.XX.XX 描述此函數(shù)的版本號(hào) @version 1.0.3 @example @example 示例代碼 @example setTitle('測(cè)試') 如下推薦：
/**- 合并Grid的行- @param grid {Ext.Grid.Panel} 需要合并的Grid - @param cols {Array} 需要合并列的Index(序號(hào))數(shù)組；從0開(kāi)始計(jì)數(shù)，序號(hào)也包含。 - @param isAllSome {Boolean} ：是否2個(gè)tr的cols必須完成一樣才能進(jìn)行合并。true：完成一樣；false(默認(rèn))：不完全一樣 - @return void - @author polk6 2015/07/21 - @example - _________________ _________________ - | 年齡 | 姓名 | | 年齡 | 姓名 | - ----------------- mergeCells(grid,[0]) ----------------- - | 18 | 張三 | => | | 張三 | - ----------------- - 18 --------- - | 18 | 王五 | | | 王五 | - ----------------- ----------------- */ function mergeCells(grid, cols, isAllSome) { // Do Something }?
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)解析文檔。
- 使用文檔聲明類型的作用是為了防止開(kāi)啟瀏覽器的怪異模式。
- 沒(méi)有DOCTYPE文檔類型聲明會(huì)開(kāi)啟瀏覽器的怪異模式，瀏覽器會(huì)按照自己的解析方式渲染頁(yè)面，在不同的瀏覽器下面會(huì)有不同的樣式。
- 如果你的頁(yè)面添加了
腳本加載
推薦：
<html><head><link rel="stylesheet" href="main.css"> </head> <body> <!-- body goes here --> <script src="main.js" async></script> </body> </html>?
只兼容現(xiàn)代瀏覽器推薦：
<html><head><link rel="stylesheet" href="main.css"> <script src="main.js" async></script> </head> <body> <!-- body goes here --> </body> </html>語(yǔ)義化
語(yǔ)義化是指：根據(jù)元素其被創(chuàng)造出來(lái)時(shí)的初始意義來(lái)使用它。 意思就是用正確的標(biāo)簽干正確的事，而不是只有div和span。- 1
- 2
推薦：
html 代碼: <!-- The page header should go into a header element --> <header><!-- As this title belongs to the page structure it's a heading and h1 should be used --><h1>My page title</h1> </header> <!-- All navigation should go into a nav element --> <nav class="top-navigation"> <!-- A listing of elements should always go to UL (OL for ordered listings) --> <ul> <li class="nav-item"><a href="#home">Home</a></li> <li class="nav-item"><a href="#news">News</a></li> <li class="nav-item"><a href="#about">About</a></li> </ul> </nav> <!-- The main part of the page should go into a main element (also use role="main" for accessibility) --> <main class="news-page" role="main"> <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. --> <section class="page-section news"> <!-- A section header should go into a section element --> <header> <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) --> <h2 class="title">All news articles</h2> </header> <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other re-usable module / section that can occur multiple times on a page) a article element should be used --> <article class="news-article"> <!-- An article can contain a header that contains the summary / introduction information of the article --> <header> <!-- As a article title does not belong to the overall page structure there should not be any heading tag! --> <div class="article-title">Good article</div> <!-- Small can optionally be used to reduce importance --> <small class="intro">Introduction sub-title</small> </header> <!-- For the main content in a section or article there is no semantic element --> <div class="content"> <p>This is a good example for HTML semantics</p> </div> <!-- For content that is represented as side note or less important information in a given context use aside --> <aside class="article-side-notes"> <p>I think I'm more on the side and should not receive the main credits</p> </aside> <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element --> <footer class="article-foot-notes"> <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time while the actual text in the time element can also be more human readable / relative --> <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p> </footer> </article> <!-- In a section, footnotes or similar information can also go into a footer element --> <footer class="section-footer"> <p>Related sections: Events, Public holidays</p> </footer> </section> </main> <!-- Your page footer should go into a global footer element --> <footer class="page-footer"> Copyright 2014 </footer>alt標(biāo)簽不為空
標(biāo)簽的 alt 屬性指定了替代文本，用于在圖像無(wú)法顯示或者用戶禁用圖像顯示時(shí)，代替圖像顯示在瀏覽器中的內(nèi)容。?
假設(shè)由于下列原因用戶無(wú)法查看圖像，alt 屬性可以為圖像提供替代的信息：
- 網(wǎng)速太慢
- src屬性中的錯(cuò)誤
- 瀏覽器禁用圖像
- 用戶使用的是屏幕閱讀器
結(jié)構(gòu)、表現(xiàn)、行為三者分離
盡量在文檔和模板中只包含結(jié)構(gòu)性的 HTML；而將所有表現(xiàn)代碼，移入樣式表中；將所有動(dòng)作行為，移入腳本之中。?
在此之外，為使得它們之間的聯(lián)系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。?
建議：
- 不使用超過(guò)一到兩張樣式表
- 不使用超過(guò)一到兩個(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)來(lái)解決一些視覺(jué)設(shè)計(jì)問(wèn)題
- 不要將img元素當(dāng)做專門(mén)用來(lái)做視覺(jué)設(shè)計(jì)的元素
- 樣式上的問(wèn)題應(yīng)該使用css解決
推薦：
html 代碼: <!-- That's clean markup! --> <span class="text-box">See the square next to me? </span> 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)的一些信息。?
推薦：
js規(guī)范
避免全局命名空間污染
防止全局命名空間被污染，我們通常的做法是將代碼包裹成一個(gè) IIFE(Immediately-Invoked Function Expression)，創(chuàng)建獨(dú)立隔絕的定義域。也使得內(nèi)存在執(zhí)行完后立即釋放。?
IIFE 還可確保你的代碼不會(huì)輕易被其它全局命名空間里的代碼所修改（i.e. 第三方庫(kù)，window 引用，被覆蓋的未定義的關(guān)鍵字等等）。?
推薦：
如果你想引用全局變量或者是外層 IIFE 的變量，可以通過(guò)下列方式傳參：
(function($, w, d){ 'use strict';$(function() { w.alert(d.querySelectorAll('div').length); }); }(jQuery, window, document));嚴(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模式（將所有的變量在函數(shù)最前面只使用一個(gè)var定義）。例如：
(function (){ 'use strict'var a = 0, b = 0, c = 0, i, j, myObject(); }())js聲明提前
javascript會(huì)自動(dòng)將函數(shù)作用域內(nèi)的變量和方法的定義提前（只是提前聲明，賦值還是在原處）?
例如：
提升后的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)格等
總是使用 === 精確的比較操作符，避免在判斷的過(guò)程中，由 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
總結(jié)：
- false 除了和自身比較為 true 外，和 0，”” 比較也為 true
- null 只和 undefined 比較時(shí)為 true， 反過(guò)來(lái) undefined 也僅和 null 比較為 true，沒(méi)有第二個(gè)
- 0 除了和 false 比較為 true，還有空字符串 ”” 和空數(shù)組 []
- 空字符串 ” 除了和 false 比較為 true，還有一個(gè)數(shù)字 0
==, >, <, +, -, … 這些操作符所造成的隱式類型轉(zhuǎn)換都是無(wú)副作用的，它不會(huì)改變變量本身保存的值。，但是，如果你覆寫(xiě)某個(gè)對(duì)象的 valueOf/toString的話，==就會(huì)產(chǎn)生副作用.?
例如：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
===操作符：
- 要是兩個(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ì)被自左向右地做真假判斷。基于此操作，最終總有一個(gè)表達(dá)式被返回回來(lái)。這在變量賦值時(shí)，是可以用來(lái)簡(jiǎn)化你的代碼的。例如:如果x不存在且y不存在，x=1；如果x存在y存在，x = y
不適用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 樹(shù)中的某一節(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ù)亟怦詈透俚囊蕾嚒?
接下來(lái)的例子中，在一組數(shù)字求和的同一問(wèn)題上，比較了兩種解決方案。第一個(gè)例子是經(jīng)典的程序處理，而第二個(gè)例子則是采用了函數(shù)式編程和 ECMA Script 5.1 的數(shù)組方法。?
不推薦:
推薦（函數(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，雖危害沒(méi)那么大，但始終還是會(huì)導(dǎo)致在開(kāi)發(fā)過(guò)程中難以 debug 的問(wèn)題，應(yīng)當(dāng)也要避免。
三元條件判斷（if 的快捷方法）
用三元操作符分配或返回語(yǔ)句。在比較簡(jiǎn)單的情況下使用，避免在復(fù)雜的情況下使用。沒(méi)人愿意用 10 行三元操作符把自己的腦子繞暈。?
不推薦：
推薦：
return x === 10 ? 'valid' : 'invalid'?
JSHint
在js規(guī)范中，有很多規(guī)范都是樣式上的規(guī)范而不是邏輯上的規(guī)范，比如盡量使用===而不是==，我們可以使用JSHint或者JSLint，Javascript代碼驗(yàn)證工具，這種工具可以檢查你的代碼并提供相關(guān)的代碼改進(jìn)意見(jiàn)。我個(gè)人使用的是JSHint，所以就以這個(gè)為例.
webstorm內(nèi)置JSHint
對(duì)于ws愛(ài)好者來(lái)說(shuō)，我沒(méi)有用過(guò)其他的編譯器，ws基本上能滿足你的所有需求（最新的ws集成了vue）。?
在Settings => language & frameworks => JavaScript => Code Quality Tolls => JSHint?
其余規(guī)范參考官方文檔：http://jshint.com/docs/
CSS規(guī)范
id和class的命名
ID和class的名稱總是使用可以反應(yīng)元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱。?
不推薦：
推薦：
.heavy {font-weight: 800; } .important { color: red; }合理的使用ID
一般情況下ID不應(yīng)該被用于樣式，并且ID的權(quán)重很高，所以不使用ID解決樣式的問(wèn)題，而是使用class?
不推薦：
推薦：
.content .title {font-size: 2em; }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)題。
使用子選擇器
很多前端開(kāi)發(fā)人員寫(xiě)選擇器鏈的時(shí)候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區(qū)別）。?
有時(shí)，這可能會(huì)導(dǎo)致疼痛的設(shè)計(jì)問(wèn)題并且有時(shí)候可能會(huì)很耗性能。?
然而，在任何情況下，這是一個(gè)非常不好的做法。?
如果你不寫(xiě)很通用的，需要匹配到DOM末端的選擇器， 你應(yīng)該總是考慮直接子選擇器。?
不推薦:
推薦：
.content > .title {font-size: 2rem; }盡量使用縮寫(xiě)屬性
盡量使用縮寫(xiě)屬性對(duì)于代碼效率和可讀性是很有用的，比如font屬性。?
不推薦：
推薦：
border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;0后面不帶單位
省略0后面的單位，?
推薦：
屬性格式
- 為了保證一致性和可擴(kuò)展性，每個(gè)聲明應(yīng)該用分號(hào)結(jié)束，每個(gè)聲明換行。
- 屬性名的冒號(hào)后使用一個(gè)空格。出于一致性的原因，屬性和值（但屬性和冒號(hào)之間沒(méi)有空格）的之間始終使用一個(gè)空格。
- 每個(gè)選擇器和屬性聲明總是使用新的一行。
- 屬性選擇器或?qū)傩灾涤秒p引號(hào)（””），而不是單引號(hào)（”）括起來(lái)。
- URl值（url()）不要使用引號(hào)。
作為實(shí)踐，遵循以下順序：?
結(jié)構(gòu)型屬性：
表現(xiàn)型屬性：
不推薦：
.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; }原文地址：
轉(zhuǎn)載于:https://www.cnblogs.com/yr0215/p/8025671.html
總結(jié)
- 上一篇： webservice学习总结（一）--
- 下一篇： 【Selenium】之谷歌、IE、火狐浏