開發規範文字（自我學習）

Jackyaoo發表於2018-07-26

Web前端開發規範文件

規範目的：

  • 使開發流程更加規範化。

通用規範：

  • TAB鍵用兩個空格代替（WINDOWS下TAB鍵佔四個空格，LINUX下TAB鍵佔八個空格）。
  • CSS樣式屬性或者JAVASCRIPT程式碼後加“;”方便壓縮工具“斷句”。
  • 檔案內容編碼均統一為UTF-8。
  • CSS、JAVASCRIPT中的非註釋類中文字元須轉換成unicode編碼使用,以避免編碼錯誤時亂碼顯示。

檔案規範：

  • 檔名用英文單詞，多個單詞用駝峰命名法。
  • 一些瀏覽器會將含有這些詞的作為廣告攔截，檔案命名、ID、CLASS等所有命名避免以上詞彙。ad、ads、adv、banner、sponsor、gg、guangg、guanggao等。

html書寫規範：

  • 為每個HTML頁面的第一行新增標準模式（standard mode）的宣告，確保在每個瀏覽器中擁有一致的展現。
	<!DOCTYPE html>		
複製程式碼
`文件型別宣告`統一為HTML5宣告型別，`編碼`統一為UTF-8。
複製程式碼
	<meta charset="UTF-8">
複製程式碼
`<HEAD>`中新增資訊。
複製程式碼
	<meta name="author" content="smile@kang.cool">//作者
	<meta name="description" content="hello">//網頁描述
	<meta name="keywords" content="a,b,c">//關鍵字,“，”分隔
	<meta http-equiv="expires" content="Wed, 26 Feb 1997 08：21：57 GMT">//設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新調閱
	<meta http-equiv="Pragma" content="no-cache">//禁止瀏覽器從本地機的快取中調閱頁面內容
	<meta http-equiv="Window-target" content="_top">//用來防止別人在框架裡呼叫你的頁面
	<meta http-equiv="Refresh" content="5;URL=http://kahn1990.com/">//跳轉頁面，5指時間停留5秒 網頁搜尋機器人嚮導。用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引
	<meta name="robots" content="none">//content的引數有all,none,index,noindex,follow,nofollow，預設是all
	<link rel="Shortcut Icon" href="favicon.ico">//收藏圖示
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">//網頁不會被快取
複製程式碼
`IE`支援通過特定&lt;meta&gt;標籤來確定繪製當前頁面所應該採用的`IE`版本。除非有強烈的特殊需求，否則最好是設定為`edge mode` ，從而通知`IE`採用其所支援的最新的模式。
複製程式碼
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
複製程式碼
  • 非特殊情況下CSS樣式檔案外鏈至HEAD之間，JAVASCRIPT檔案外鏈至頁面底部。
	<!DOCTYPE html>
	<html>
	<head>
		<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<!-- 邏輯程式碼 -->
		<!-- 邏輯程式碼底部 -->
		<script src="lib/jquery/jquery-2.1.1.min.js"></script>
	</body>
	</html>
複製程式碼
引入`JAVASCRIPT`庫檔案，檔名須包含庫名稱及版本號及是否為壓縮版。
複製程式碼
	jQuery-1.8.3.min.js
複製程式碼
引入`JAVASCRIPT`外掛, 檔名格式為庫名稱+`.`+外掛名稱。
複製程式碼
	jQuery.cookie.js
複製程式碼
  • HTML屬性應當按照以下給出的順序依次排列，來確保程式碼的易讀性。
	class
	id 、 name
	data-*
	src、for、 type、 href
	title、alt
	aria-*、 role
複製程式碼
編碼均遵循`XHTML`標準,
標籤、屬性、屬性命名由小寫英文、數字和\_組成，且所有標籤必須閉合，屬性值必須用雙引號`""`,
避免使用中文拼音儘量簡易並要求語義化。
複製程式碼
	CLASS --> nHeadTitle --> CLASS遵循小駝峰命名法（little camel-case）
	ID --> n_head_title --> ID遵循名稱+_
	NAME --> N_Head_Title --> NAME屬性命名遵循首個字母大寫+_
	<div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>
複製程式碼
當`JAVASCRIPT`獲取單個元素時，通常使用document.getElementById來獲取dom元素，document.getElementById相容所有瀏覽器，但IE瀏覽器會混淆元素的ID和NAME屬性，所以要區分ID和NAME命名。
複製程式碼
	<input type="text" name="test">
	<div id="test"></div>
	<button onclick="alert(document.getElementById('test').tagName)"></button>
	<!-- ie6下為INPUT -->
複製程式碼
  • 特殊符號應使用轉意符。
	<    -->    &lt;
	>    -->    &gt;
	空格  -->    &nbsp;
複製程式碼
  • 含有描述性表單元素（INPUT，TEXTAREA）新增LABEL。
	<p>
		<label for="test">測試</label>
		<input type="text" id="test" />
	</p>
複製程式碼
  • 多用無相容性問題的HTML內建標籤,比如SPAN、EM、STRONG、OPTGROUP、LABEL等,需要自定義HTML標籤屬性時，首先考慮是否存在已有的合適標籤可替換，如果沒有,可使用須以“data-”為字首來新增自定義屬性，避免使用其他命名方式。
  • 語義化HTML。
  • 儘可能減少<DIV>巢狀。
  • 書寫連結地址時避免重定向。
	href="http://www.kahn1990.com/" //即在URL地址後面加“/”
複製程式碼
  • HTML中對於屬性的定義，確保全部使用雙引號，絕不要使用單引號

css書寫規範：

  • 為了欺騙W3C的驗證工具,可將程式碼分為兩個檔案，一個是針對所有瀏覽器,一個只針對IE。即將所有符合W3C的程式碼寫到一個檔案中,而一些IE中必須而又不能通過W3C驗證的程式碼（如:cursor:hand;）放到另一個檔案中，再用下面的方法匯入。
	<!-- 放置所有瀏覽器樣式-->
	<link rel="stylesheet" type="text/css" href="">
	<!-- 只放置IE必須，而不能通過w3c的-->
	<!--[if IE]
		<link rel="stylesheet" href="">
	<![endif]-->
複製程式碼
  • CSS樣式新建或修改儘量遵循以下原則。
	根據新建樣式的適用範圍分為三級：全站級、產品級、頁面級。
	儘量通過繼承和層疊重用已有樣式。
	不要輕易改動全站級CSS。改動後，要經過全面測試。
複製程式碼
  • CSS屬性顯示順序。
	顯示屬性
	元素位置
	元素屬性
	元素內容屬性
複製程式碼
  • CSS書寫順序。
	.header {
	/* 顯示屬性 */
		display || visibility
		list-style
		position top || right || bottom || left
		z-index
		clear
		float
	/* 自身屬性 */
		width max-width || min-width
		height max-height || min-height
		overflow || clip
		margin
		padding
		outline
		border
		background
	/* 文字屬性 */
		color
		font
		text-overflow
		text-align
		text-indent
		line-height
		white-space
		vertical-align
		cursor
		content
	};
複製程式碼
相容多個瀏覽器時，將標準屬性寫在底部。
複製程式碼
	-moz-border-radius: 15px; /* Firefox */
	-webkit-border-radius: 15px; /* Safari和Chrome */
	-o-border-radius: 15px; 
	border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 *//標準屬性
複製程式碼
  • 使用選擇器時，命名比較短的詞彙或者縮寫的不允許直接定義樣式。
	.hd,.bd,.td{};//如這些命名
複製程式碼
可用上級節點進行限定。
複製程式碼
	.recommend-mod .hd
複製程式碼
多選擇器規則之間換行，即當樣式針對多個選擇器時每個選擇器佔一行。
複製程式碼
	button.btn,
	input.btn,
	input[type="button"] {…};
複製程式碼
優化`CSS`選擇器。
複製程式碼
	#header a { color: #444; };/*CSS選擇器是從右邊到左邊進行匹配*/
複製程式碼
瀏覽器將檢查整個文件中的所有連結和每個連結的父元素，並遍歷文件樹去查詢ID為header的祖先元素，如果找不到header將追溯到文件的根節點，解決方法如下。
複製程式碼
	避免使用通配規則和相鄰兄弟選擇符、子選擇符,、後代選擇符、屬性選擇符等選擇器
	不要限定id選擇符，如div#header（提權的除外）
	不要限定類選擇器，如ul.recommend（提權的除外）
	不要使用 ul li a 這樣長的選擇符
	避免使用標籤子選擇符，如#header > li > a
複製程式碼
  • 使用z-index屬性儘量z-index的值不要超過150（通用組的除外），頁面中的元素內容的z-index不能超過10（提示框等模組除外但維持在150以下），不允許直接使用（999~9999）之間大值。
  • 儘量避免使用CSS Hack。
	property:value; /* 所有瀏覽器 */
	+property:value; /* IE7 */
	_property:value; /* IE6 */
	*property:value; /* IE6/7 */
	property:value\9; /* IE6/7/8/9，即所有IE瀏覽器 */
複製程式碼
	* html selector { … }; /* IE6 */
	*:first-child+html selector { … }; /* IE7 */
	html>body selector { … }; /* 非IE6 */
	@-moz-document url-prefix() { … }; /* firefox */
	@media all and (-webkit-min-device-pixel-ratio:0) { … }; /* saf3+/chrome1+ */
	@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { … }; /* opera */
	@media screen and (max-device-width: 480px) { … }; /* iPhone/mobile webkit */
複製程式碼
避免使用低效的選擇器。
複製程式碼
	body > * {…};
	ul > li > a {…};
	#footer > h3 {…};
	ul#top_blue_nav {…};
	searbar span.submit a { … }; /* 反面示例 */
複製程式碼
  • 六個不要三個避免一個使用。
	不要在標籤上直接寫樣式
	不要在CSS中使用expression
	不要在CSS中使用@import
	不要在CSS中使用!important
	不要在CSS中使用“*”選擇符
	不要將CSS樣式寫為單行
	避免使用filter
	避免使用行內（inline）樣式
	避免使用“*”設定{margin: 0; padding: 0;}
	使用after或overflow的方式清浮動
複製程式碼
  • 減少使用影響效能的屬性。
	position:absolute;
	float:left;//如這些定位或浮動屬性
複製程式碼
	減少在`CSS`中使用濾鏡表示式和圖片repeat,
	尤其在body當中,渲染效能極差, 如果需要用repeat的話,
	圖片的寬或高不能少於8px。
複製程式碼

javaScript書寫規範：

  • 命名規範。
	常量名
		全部大寫並單詞間用下劃線分隔
		如：CSS_BTN_CLOSE、TXT_LOADING
複製程式碼
	物件的屬性或方法名
		小駝峰式（little camel-case）
		如：init、bindEvent、updatePosition
		示例：Dialog.prototype = {
				init: function () {},
				bindEvent: function () {},
				updatePosition: function () {}
				 …
			};
	類名（構造器）
		-->小駝峰式但首字母大寫
		-->如：Current、DefaultConfig
	函式名
		-->小駝峰式
		-->如：current()、defaultConfig()
	變數名
		-->小駝峰式
		-->如：current、defaultConfig
	私有變數名
		-->小駝峰式但需要用_開頭
		-->如：_current、_defaultConfig
	變數名的字首
		-->續
複製程式碼
  • 程式碼格式。
	"()"前後需要跟空格
	"="前後需要跟空格
	","後面需要跟空格
	JSON物件需格式化物件引數
	if、while、for、do語句的執行體用"{}"括起來
複製程式碼
"{}"格式如下。
複製程式碼
	if (a==1) {
		//程式碼
	};
複製程式碼
避免額外的逗號。
複製程式碼
	var arr = [1,2,3,];
複製程式碼
`for-in`迴圈體中必須用`hasOwnProperty`方法檢查成員是否為自身成員，避免來自原型鏈上的汙染。
複製程式碼
  • 長語句可考慮斷行。
	TEMPL_SONGLIST.replace('{TABLE}', da['results'])
		.replace('{PREV_NUM}', prev)
		.replace('{NEXT_NUM}', next)
		.replace('{CURRENT_NUM}', current)
		.replace('{TOTAL_NUM}', da.page_total);
複製程式碼
為了避免和`JSLint`的檢驗機制衝突，“.”或“+”這類操作符放在行尾。
複製程式碼
	TEMPL_SONGLIST.replace('{TABLE}', da['results']).
		replace('{PREV_NUM}', prev).
		replace('{NEXT_NUM}', next).
		replace('{CURRENT_NUM}', current).
		replace('{TOTAL_NUM}', da.page_total);
複製程式碼
如果模組程式碼中，使用其它全域性變數想跳過JSLint的檢查，可以在該檔案中加入`/*global*/`宣告。
複製程式碼
	/*global alert: true, console: true, top: true, setTimeout: true */
複製程式碼
  • 使用嚴格的條件判斷符。用===代替==，用!==代替!=，避免掉入==造成的陷阱 在條件判斷時，這樣的一些值表示false。
	null
	undefined與null相等
	字串''
	數字0
	NaN
複製程式碼
在==時，則會有一些讓人難以理解的陷阱。
複製程式碼
	(function () {
		var undefined;
		undefined == null; // true
		1 == true; //true
		2 == true; // false
		0 == false; // true
		0 == ''; // true
		NaN == NaN;// false
		[] == false; // true
		[] == ![]; // true
	})();
複製程式碼
對於不同型別的 == 判斷，有這樣一些規則，順序自上而下：
複製程式碼
	undefined與null相等
	一個是number一個是string時，會嘗試將string轉換為number
	嘗試將boolean轉換為number
	0或1
	嘗試將Object轉換成number或string
複製程式碼
而這些取決於另外一個對比量，即值的型別，所以對於0、空字串的判斷，建議使用`===`
。`===`會先判斷兩邊的值型別，型別不匹配時為`false`。
複製程式碼
  • 下面型別的物件不建議用new構造。
	new Number
	new String
	new Boolean
	new Object //用{}代替
	new Array //用[]代替
複製程式碼
引用物件成員用`obj.prop`代替`obj["prop"]`，除非屬性名是變數。
複製程式碼
  • 從number到string的轉換。
	/** 推薦寫法*/
	var a = 1;
	typeof(a); //"number"
	console.log(a); //1
	var aa=a+'';
	typeof(aa); //"string"
	console.log(aa); //'1'
	/** 不推薦寫法*/
	new String(a)或a.toString()
複製程式碼
從string到number的轉換，使用parseInt，必須顯式指定第二個引數的進位制。
複製程式碼
	/** 推薦寫法*/
	var a = '1';
	var aa = parseInt(a,10);
	typeof(a); //"string"
	console.log(a); //'1'
	typeof(aa); //"number"
	console.log(aa); //1
複製程式碼
從float到integer的轉換。
複製程式碼
	/** 推薦寫法*/
	Math.floor/Math.round/Math.ceil
	/** 不推薦寫法*/
	parseInt
複製程式碼
字串拼接應使用陣列儲存字串片段，使用時呼叫join方法。避免使用+或+=的方式拼接較長的字串，每個字串都會使用一個小的記憶體片段，過多的記憶體片段會影響效能。
複製程式碼
	/**推薦的拼接方式array的push、join*/
	var str=[],
		list=['測試A','測試B'];
	for (var i=0 , len=list.length; i < len; i++) {
		str.push( '<div>'+ list[i] + '</div>');
	};
	console.log(str.join('')); //<div>測試A</div><div>測試B</div>
	/** 不推薦的拼接方式+=*/
	var str = '',
		list=['測試A','測試B'];
	for (var i = 0, len = list.length; i< len; i++) {
		str+='<div>' + list[i] + '</div>';
	};
	console.log(str); //<div>測試A</div><div>測試B</div>
複製程式碼
  • 儘量避免使用存在相容性及消耗資源的方法或屬性。
	不要使用with，void，evil，eval_r，innerText
複製程式碼
  • 注重HTML分離, 減小reflow, 注重效能。

圖片規範：

  • 命名應用小寫英文、數字、_組合，便於團隊其他成員理解。
	header_btn.gif
	header_btn2.gif
複製程式碼
  • 頁面元素類圖片均放入img資料夾,測試用圖片放於img/testimg資料夾，psd源圖放入img/psdimg資料夾。
  • 圖片格式僅限於gif、png、jpg等。
  • 用png圖片做圖片時, 要求圖片格式為png-8格式,若png-8實在影響圖片質量或其中有半透明效果,請為ie-6單獨定義背景，並儘量避免使用半透明的png圖片。
  • 背景圖片請儘可能使用sprite技術, 減小http請求。

註釋規範：

  • JAVASCRIPT、CSS檔案註釋需要標明作者、檔案版本、建立/修改時間、重大版本修改記錄、函式描述、檔案版本、建立或者修改時間、功能、作者等資訊。
	/* * 註釋塊 */
複製程式碼
中間可新增如下資訊。
複製程式碼
	 @file 檔名
	@addon 把一個函式標記為另一個函式的擴張，另一個函式的定義不在原始檔中
	@argument 用大括號中的自變數型別描述一個自變數
	@author 函式/類作者的姓名
	@base 如果類是繼承得來，定義提供的類名稱
	@class 用來給一個類提供描述，不能用於構造器的文件中
	@constructor 描述一個類的構造器
	@deprecated 表示函式/類已被忽略
	@exception 描述函式/類產生的一個錯誤
	@exec @extends 表示派生出當前類的另一個類
	@fileoverview 表示文件塊將用於描述當前檔案，這個標籤應該放在其它任何標籤之前
	@final 指出函式/類
	@ignore 讓jsdoc忽視隨後的程式碼
	@link 類似於@link標籤，用於連線許多其它頁面
	@member 定義隨後的函式為提供的類名稱的一個成員
	@param 用大括號中的引數型別描述一個引數
	@private 表示函式/類為私有，不應包含在生成的文件中
	@requires 表示需要另一個函式/類
	@return 描述一個函式的返回值
	@see 連線到另一個函式/類
	@throws 描述函式/類可能產生的錯誤
	@type 指定函式/成員的返回型別
	@version 函式/類的版本號
複製程式碼

開發及測試工具約定：

  • 編碼格式化，三碼統一。
  • 測試工具: 前期開發僅測試FireFox & IE6 & IE7 & IE8 & IE9 & Opera & Chrome & Safari


相關文章