資訊專欄INFORMATION COLUMN
摘要：前端代碼規范代碼編寫規范縮進每一層級由個空格組成，避免使用制表符進行縮進。單目運算符的操作數之間不應該用空白隔開語句中的表達式之間應當用空格隔開代碼編寫規范頭部文檔類型建議使用格式的。內聯元素寫在一行內，塊狀元素還有列表和表格要另起一行。
前端代碼規范 JavaScript代碼編寫規范 縮進
每一層級由4個空格組成，避免使用制表符（Tab）進行縮進。
行的長度每行長度不應該超過80個字符，多于80個字符，應該在運算符后換行，下一行增加兩級縮進（8個字符）
doSomething(argument1,argument2,argument3,argument4,
atgument5);
原始值
1、字符串應當始終使用雙引號且保持一行。
2、特殊值null在以下情況下可用：
（1）用來初始化一個可能被賦值為對象的變量時使用。
（2）用來和一個已經初始化的變量比較，這個變量有可能是對象。
（3）當函數的參數期望是對象時，，被用作參數傳入。
（4）當函數的返回值期望是對象時，被用作返回值傳入。
其余情況避免使用null
3、避免使用特殊值undefined。判斷一個變量是否定義應當使用typeof操作符。
二元運算符前后必須使用一個空格保持表達式整潔，操作符包括運算符和邏輯運算符。
//好的寫法
var found = (value[i] === item);
if(found && (count > 10)){
doSomething();
}
括號間距
使用括號時，緊接左括號之后和緊接右括號之前不應該有空格。
對象直接量起始左花括號應當同表達式保持一行
每個屬性的名值對應當保持一個縮進，第一個屬性應當在左花括號后另起一行
每個屬性的名值對使用不含引號的屬性名，其后緊跟冒號（之前不含空格）
若屬性值是函數類型，函數體在屬性名之下另起一行，而且其前后均應保留一個空行
一組相關屬性前后可插入空行提升代碼的可讀性
結束的右花括號獨占一行
var object = {
key1:value1,
key2:value2,
func:function() {
//doSomething
},
key3 = value3
};
當對象字面量作為函數參數時，若值是變量，起始花括號應當同函數名在同一行。
doSomething({
key1:value1,
key2:value2
});
注釋
1.單行注釋
獨占一行的注釋，用來解釋下一行代碼
在代碼行的尾部的注釋，用來解釋它之前的代碼
多行，用來注釋掉一個代碼塊
代碼行尾單行注釋的情況，應該確保代碼結尾同注釋之間至少一個縮進
單行注釋之前要空格
if (condition) {
//如果代碼執行到這里，表明通過了安全檢查
allowed();
}
行內注釋
var result = something + somethingElse; // 行內注釋
2.多行注釋
每個多行注釋都至少包含如下三行
首行僅僅包括/*注釋開始，該行不應當有其他內容
接下來的行以*開頭并保持左對齊，這些行可以文字描述
最后一行以*/開頭并同先前行保持對齊，不應該有文字
注釋前空行，星號后空格
if (condition) {
/*
* 如果代碼執行到這里
* 說明通過了所有檢測
*/
allowed();
}
變量聲明
變量定義放在函數開頭，使用var表達式每行一個變量
除首行，所有行都應該多一層縮進使變量名能夠垂直方向對齊
初始化的變量應當在未初始化變量之前
var count = 10,
name = "Nicoho",
found = false,
empty;
函數聲明
函數名和開始圓括號之間不應該有空格
結束圓括號和右邊起始花括號應該有空格，右側花括號和函數關鍵字保持一行
參數名之間應當有在逗號之后保留一個空格
立即被調用的函數應當在調用的外層用圓括號包裹
function outer(arg1, arg2){
var count = arg1,
name = arg2,
found = false,
empty;
function inner(){
//代碼
}
//調用inner()的代碼
}
命名
變量命名應當采用駝峰命名格式，首字母小寫，每個單詞首字母大寫，第一個單詞應當是一個名詞，不要在變量命名中使用下劃線
函數命名也采用駝峰命名格式，首字母小寫，第一個單詞應當是動詞，和變量名進行區分
構造函數命名采用駝峰命名格式，首字母大寫，以非動詞開頭
常量的命名應當是所有字母大寫，不同字母之間用單個下劃線隔開
對象的屬性和方法命名同變量和函數，私有屬性或者方法，在前面加一個下劃線
賦值給變量賦值時，如果右側是含有比較語句的表達式，需要用圓括號包裹
等號運算符使用===（嚴格相等）和！==（嚴格不相等）替代相等（==）和不等（！=）來避免弱類型轉換錯誤
三元操作符三元操作符應當僅僅用在條件賦值語句中，而不要作為if語句的替代品
var value = condition ？ value1 ： value2;語句
1、簡單語句
每行最多只包含一條語句，所有簡單的語句以分號（；）結束。
2、復合語句
括起來的語句應當比較復合語句多縮進一個層級
開始的大括號應當在復合語句所在行的末尾；結束的大括號獨占一行，且與符合語句開始保持同樣的縮進
若是if語句開始的關鍵字，其后緊跟一個空格，起始大括號在空格之后
if語句if (condition) {
statements
}
絕不允許在if語句中中省略花括號，單行語句同樣需要花括號
if (condition) {
statements
} else if (condition) {
statements
} else {
statements
}
for語句
for語句的初始化部分不應該有變量聲明
var i,
len;
for (i=0, len=10; i < len; i++){
//代碼
}
當使用for-in語句時，記得使用hasOwnProperty()進行雙重檢查來過濾出對象的成員.
switch語句switch (value) {
case 1:
/*falls through*/
case 2:
doSomething();
break;
case 3:
return true;
default:
throw new Error ("This shouldn"t happen");
}
留白
1、兩行空行如下情況使用
在不同的源代碼文件之間
在類和接口定義之間
2、單行空行如下情況使用
方法之間
方法中局部變量和第一行語句之間
多行或者單行注釋之前
方法中邏輯代碼塊之間以提升代碼的可讀性
3、空格在如下情況下使用
關鍵字后跟括號的情況應當用空格隔開
參數列表中逗號之后應當保留一個空格
所有的除了點（.）之外的二元運算符，其操作數都應該用空格隔開。單目運算符的操作數之間不應該用空白隔開
for語句中的表達式之間應當用空格隔開
HTML代碼編寫規范 HTML頭部文檔類型建議使用 text/html 格式的 HTML。
避免使用XHTML，因為XHTML以及它的屬性，比如application/xhtml+xml在瀏覽器中的應用支持與優化空間都十分有限。
1、自閉合的標簽無需閉合，如：、
推薦的方式：
2、可選閉合標簽建議閉合，如：
縮進使用soft tab（4個空格），嵌套的節點應該縮進；
HTML標簽嵌套規則1、HTML4/XHTML的嵌套規則
（1）內聯元素不能嵌套塊元素
（2）
元素和
頁面中的圖片、視頻和canvas 動畫等都要確保有替代的顯示內容。
圖片文件我們可采用有意義的備選文本（alt屬性規定），視頻和音頻文件我們可以為其加上說明文字或字幕。
例如：
每一個塊狀元素，列表元素和表格元素后，加上一新空白行。
內聯元素寫在一行內，塊狀元素還有列表和表格要另起一行。
內容、表現和行為分離盡量在文檔和模板中只包含結構性的HTML；而將所有表現代碼，移入樣式表中；將所有動作行為，移入腳本之中。
此外，為使得它們之間的聯系盡可能的小，在文檔和模板中也盡量少地引入樣式和腳本文件。
主要規則如下:
（1）.頁面中盡量不要引入超過兩個樣式表，例如main.css和vendor.css。
（2）.頁面中保證只引入一個js文件（如果有多個文件，將它們合并壓縮后引入）。
（3）.不要使用內聯樣式和內部樣式。
（4）.不要使用表象元素，例如, ,
（5）.不使用元素中表象的屬性，例如align="center"。
結構的搭建
采用HTML5標準時開頭應該加上
應在head標簽中引入CSS文件，這樣瀏覽器就可以在輸出HTML之前獲取CSS信息
在
標簽的末尾引入JavaScript文件，這樣可以在頁面顯示之后再編譯JavaScript文件，以加快頁面讀取速度，同時有助于JavaScript對頁面中的元素進行操作對元素的操作應添加在JavaScript代碼中，而不要在HTML中添加，下面這個例子就是錯誤的，這樣后期難以維護
HTML布爾屬性值HTML5規范中 disabled、checked、selected 等屬性不用設置值。
HTML代碼注釋如果可能盡量不寫注釋，盡可能減少文檔的體積；如果必須要添加注釋，那么就要遵循如下規則:
（1）.詳盡注釋，解釋代碼解決問題、解決思路、是否為新鮮方案等。
（2）.模塊注釋，github建議不使用模塊結束注釋。
（3）.待辦注釋
如：
特別說明:注釋文本與兩端（--）之間要有一個空格。
如何判斷網頁標簽語義是否良好：去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性
語義化標簽注意的一些問題：
盡可能少的使用無語義標簽div和span
語義不明顯時，可用p也可用div的地方，盡量使用p，因為p默認有上下邊距，去除樣式后的可讀性更好，對兼容特殊終端有利
不要使用純樣式標簽，例如bfontu,改用CSS設置語義上強調的文本可以包在strong和em標簽里，strong的默認樣式是加粗，而em的默認樣式是斜體
部分標簽的語義：
div 主要用于布局，分割頁面的結構;
ul/ol 主要用于無序/有序列表;
dl/dt/dd 當頁面中出現第一行為類似標題/簡述，然后下面為詳細描述的內容時應該使用該標簽;
span 沒有特殊的意義，可以用作排版的輔助，然后在css中定義span;
h1-h6 標題, 根據重要性依次遞減;
h1 最重要的標題;
label 使表單更有親和力而且能輔助表單排版;
不推薦使用的標簽：
font 文字的外觀，大小和顏色;
u 文本下劃線;
center 居中對齊;
s 刪除線;
strike 刪除線;
noframes 無視框時的內容;
iframe 定義嵌入視圖;
isindex 不建議使用（可搜尋，使用input代替）;
dir 目錄式列舉;
menu 菜單列表;
basefont 定義基本字體;
applet 定義java程序;
frame 定義個別視框;
frameset 視框格式總定義;
1.HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
class(首位)
id 、 name
data-*
src、for、 type、 href
title、alt
aria-*、 role
2.id 和 class
class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。
id一般用于網頁大致布局，比如標志、導航、主體內容、版權，規范命名為#logo , #nav, #content ,#copyright。
一般項目中class用于css中，id被js用來操作dom且不添加樣式，（jq操作class一般不加樣式）。
表單每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在label標簽中設置“for = someId"來讓說明文本和相應的input關聯起來
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97528.html
摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...
摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...
摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
閱讀 3258·2021-10-13 09:39
閱讀 2015·2021-09-27 13:36
閱讀 3078·2021-09-22 16:02
閱讀 2600·2021-09-10 10:51
閱讀 1581·2019-08-29 17:15
閱讀 1534·2019-08-29 16:14
閱讀 3507·2019-08-26 11:55
閱讀 2555·2019-08-26 11:50
