前端书写规范

前端开发规范：

一、vue 页面命名

views 下面的文件夹代表着模块的名字

1. 由名词组成（car、order、cart）

2. 单词只能有一个

3. 尽量是名词（car）

4. 以小写开头（car）

views 下的文件夹命名

1. views 下面的 vue 文件夹代表着模块的名字

2. .vue 文件放在模块文件夹之下

3. 模块名尽量是名词

4. 大写开头，开头的单词就是所属模块名字（CarDetail、CarEdit、CarList）

5. 名字至少两个单词（CarDetail）

6. 常用结尾单词有（Detail、Edit、List、Info、Report）

src
    assets
        ...
    components
        ...
    views
        car
            CarEdit.vue
            CarList.vue
            CarDetai.vue
        user
            UserDetail.vue
            UserEdit.vue
            UserPasswordRest.vue
        customer
            CustomerCardItem.vue
            CustomerList.vue

二、vue 组件命名

基础组件：使用饿了么 element-ui 框架封装的基础组件 el-xxx

通用组件：

1. components 文件夹下；
2. 文件夹命名：组件类型（dialog）
3. 文件命名：详细的功能 + 组件类型 （FormDialog）

普通组件：放在页面的文件夹下

src
    assets
        ...
    components
        dialog
            DialogForm.vue
            DialogList.vue
            DialogBtn.vue
    views
        ...

三、class 类名

通用组件 class 命名

1. 通用组件样式命名：cm-模块-模块功能

   <div class="cm-dialog-buttton">
   	<div class="cm-dialog-title"></div>
   	<div class="cm-dialog-content"></div>
   	<div class="cm-dialog-btn"></div>
   </div>
   

普通页面 + 普通组件 class 命名

1. 通用样式： cc-布局类型_类型描述（一级）

   如果是二级类，即存在上级父类，命名方式：cc-布局类型__类型描述

   <div class="cc-text_strong"></div>
   <div class="cc-cells">
   	<div class="cc-cells__title"></div>
   	<div class="cc-cell__content">
   		<div class="cc-cell">
   			<div class="cc-cell__hd"></div>
   			<div class="cc-cell__bd"></div>
   			<div class="cc-cell__ft"></div>
   		</div>
   	</div>
   </div>
   

2. 普通样式：sw-模块-模块描述

   <div class="sw-account">
   	<div class="sw-account-title"></div>
   	<div class="sw-account-content">
   		<div class="sw-account-row">
   			<div class="sw-account-row-item"></div>
   			<div class="sw-account-row-item"></div>
   			<div class="sw-account-row-item"></div>
   		</div>
   	</div>
   </div>
   

3. 高效复用样式： 属性名首字母 + 横线 + 属性值首字母

   <style> 
   	.d-ib { display: inline-block; }
   	.ta-c { text-align: center; }
   	.ml-10 { margin-left: 10px; }
   </style>
   <div class="d-ib">
   	<div class="ta-c ml-10"></div>
   </div>
   

4. 样式书写规则：

   顺序：普通样式 + 布局样式 + 高效复用样式

   <div class="sw-account cc-cells">
   	<div class="sw-account-title cc-cells__title ta-c"></div>
   	<div class="sw-account-content cc-cells__content">
   		<div class="sw-account-row cc-cell ml-10">
   			<div class="sw-account-row-item cc-cell__hd"></div>
   			<div class="sw-account-row-item cc-cell__bd"></div>
   			<div class="sw-account-row-item cc-cell__ft"></div>
   		</div>
   	</div>
   </div>
   

   sass 嵌套：根元素样式 + 当前元素父级样式 + 当前元素样式

   .sw-account {
   	.sw-account-row .sw-account-item {
   		/* 样式内容 */
   	}
   }
   

四、事件命名

1. 动宾短语（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）

2. ajax 方法以 get、post 开头，以 data 结尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）

3. 事件方法以 on 开头（onTypeChange、onUsernameInput）

4. init、refresh 单词除外

5. 尽量使用常用单词开头（set、get、open、close、jump）

6. 驼峰命名（good: getListData）（bad: get_list_data、getlistData）

五、data props 方法注意点

1. 使用 data 里的变量时请先在 data 里面初始化

2. props 指定类型，也就是 type

3. props 改变父组件数据 基础类型用 $emit ，复杂类型直接改

4. ajax 请求数据用上 isLoading、isError 变量

5. 不命名多余数据，现在是详情页、你的数据是 ajax 请求的，那就直接声明一个对象叫 d，而不是每个字段都声明

6. 表单数据请包裹一层 form

五、全局变量命名

$_ + name

Vue.prototype.$_api = api;

六、路由

路由命名规范：path 驼峰式命名

一般是页面 文件夹/文件 名称，转换为驼峰式。

七、注释

js 注释位置在需要注释的语句上方顶格