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