<font face="微軟雅黑">前端編碼規(guī)范</font>
<font face="微軟雅黑">前端代碼風(fēng)格</font>
一、文件命名
- 組件命名首字母大寫 駝峰式命名
DatePicker.vue
- 其他文件首字母小寫 駝峰式命名
datePicker.css
二、HTML 編碼規(guī)范
2.1 標(biāo)簽與屬性
1、class 小寫 使用 模塊名_功能名 例:
<a class="home_conatiner"></a>
eg: 如項(xiàng)目名過長可酌情縮寫
2、id 首字母小寫 駝峰式命名
<a id="balckLine"></a>
3、所有 html 屬性必須添加雙引號（非單引號）。
// 禁止
<div id=mainframe> 或 <div id='mainframe'>
// 推薦
<div id="mainframe">
4、標(biāo)簽屬性順序
屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性；
- class
- id
- name
- data-*
- src, for, type, href, value , max-length, max, min, pattern
- placeholder, title, alt
- aria-*, role
- required, readonly, disabled
class 是為高可復(fù)用組件設(shè)計(jì)的，所以應(yīng)處在第一位；
id 更加具體且應(yīng)該盡量少使用，所以將它放在第二位
2.2 風(fēng)格
1、格式縮進(jìn)
html 編碼統(tǒng)一格式化顯示，使用一個(gè) Tab 鍵進(jìn)行分層縮進(jìn) (2 個(gè)空格寬度)，使整個(gè)頁面結(jié)構(gòu)層次清晰，方便閱讀和修改。
2、模塊注釋
html 較大獨(dú)立模塊之間注釋格式統(tǒng)一使用：
<!--模塊 start-->
<!--模塊 end-->
或者：
<!-- XXX模塊 -->
<!-- /XXX模塊 -->
三、CSS 編碼規(guī)范
3.1 CSS 引用規(guī)范
1、<font color=red>所有 CSS 均為外部調(diào)用，不得在頁面書寫任何內(nèi)部樣式或行內(nèi)樣式；</font>
2、內(nèi)部模塊之間注釋（建議 @模塊英文名，好查找）：
/* @header 頭部 -----------------------------------------------------------*/
.infoArea {
}
/* 單行注釋 */
.specArea {
}
/* @footer 頁尾 ----------------------------------------------------------*/
.price {
}
3、引號
最外層統(tǒng)一使用雙引號；
url 的內(nèi)容要用引號；
屬性選擇器中的屬性值需要引號。
.element:after {
content: '';
background-image: url('logo.png');
}
li[data-type='single'] {
...;
}
3.2 雜項(xiàng)
不允許有空的規(guī)則；
元素選擇器用小寫字母；
去掉小數(shù)點(diǎn)前面的 0；
去掉數(shù)字中不必要的小數(shù)點(diǎn)和末尾的 0；
屬性值'0'后面不要加單位；
同個(gè)屬性不同前綴的寫法需要在垂直方向保持對齊，具體參照右邊的寫法；
無前綴的標(biāo)準(zhǔn)屬性應(yīng)該寫在有前綴的屬性后面；
不要在同個(gè)規(guī)則里出現(xiàn)重復(fù)的屬性，如果重復(fù)的屬性是連續(xù)的則沒關(guān)系；
不要在一個(gè)文件里出現(xiàn)兩個(gè)相同的規(guī)則；
用 border: 0; 代替 border: none;；
選擇器不要超過 4 層（在 scss 中如果超過 4 層應(yīng)該考慮用嵌套的方式來寫）；
盡量少用'*'選擇器。
四、 JavaScript 規(guī)范（jslint/eslint）
4.1 JS 注釋規(guī)則
1、文件頭部注釋
/**
* @created : 2017/09/15
* @author : Mr.Wang
* @desc : 當(dāng)前js模塊功能描述
**/
2、方法注釋
/**
* @description 加法運(yùn)算
* @param {Number} num1 加數(shù)
* @param {Number} num2 被加數(shù)
* @return {Number} result 結(jié)果
*/
function add(num1, num2) {
return num1 + num2
}
3、單行注釋
雙斜線后，必須跟一個(gè)空格；
縮進(jìn)與下一行代碼保持一致；
可位于一個(gè)代碼行的末尾，與代碼間隔一個(gè)空格。
var funName = function(arg1, arg2) {
this.arg1 = arg1
// 單行注釋說明(上面添加一空行, //與說明之間空一格)
this.arg2 = arg2
}
4.2 JS 命名規(guī)則
1、方法命名
- 變量名應(yīng)由 26 個(gè)大小寫字母（A..Z，a..z），10 個(gè)數(shù)字（0..9），和“_”（下劃線）組成。
- 首字母小寫 駝峰式命名
- 私有方法以 <font color='red'>_</font> 開始
- 全局方法以 <font color='red'>$</font> 開始
- 構(gòu)造函數(shù) 首字母大寫 駝峰式命名
動詞 含義 返回 can 判斷是否可執(zhí)行某個(gè)動作(權(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è)值 無返回值、返回是否設(shè)置成功或者返回鏈?zhǔn)綄ο?/td> load 加載某些數(shù)據(jù) 無返回值或者返回是否加載完成的結(jié)果 - 特殊情況
// 'URL'在變量名中全大寫
var reportURL
// 'Android'在變量名中大寫第一個(gè)字母
var AndroidVersion
// 'iOS'在變量名中小寫第一個(gè)，大寫后兩個(gè)字母
var iOSVersion
2、 雜項(xiàng)
1、用'===', '!=='代替'==', '!='；
2、不要像這樣使用構(gòu)造函數(shù)，例：new function () { ... }, new Object；
3、不要在內(nèi)置對象的原型上添加方法，如 Array, Date；
4、不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量；
5、變量不要先使用后聲明；
6、不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個(gè)變量；
7、不要在同個(gè)作用域下聲明同名變量；
8、不要在一些不需要的地方加括號，例：delete(a.b)；
9、不要聲明了變量卻不使用；
10、不要在應(yīng)該做比較的地方做賦值；
11、debugger，console 不要出現(xiàn)在線上的代碼里；
12、數(shù)組中不要存在空元素；
13、不要在循環(huán)內(nèi)部聲明函數(shù)；
4.3 vue 風(fēng)格
1、prop 定義盡量詳細(xì)
props: {
status: {
type: String,
required: true
}
}
2、 避免 v-if 和 v-for 用在一起
3、 生命周期函數(shù)按照加載順序 置于下方
export default {
name:'MyComponents';
data() {
mes: 'hello world'
},
prop: {
status: {
type: String,
required: true
}
},
computed: {},
watch: {},
methods: {},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {}
}
5.其他
其他未被提及的 具體依照 eslint 規(guī)范
