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