前端规范（1）——命名规范

语义化命名
应以功能或内容命名，不以表现形式命名；
命名-缩写规范使用业界熟知的或者约定俗成的。
常量采用全部大写，单词间下划线分隔的命名方式。
变量采用驼峰命名法。
全局属性或者引入文件采用$驼峰命名法进行命名。
私有属性、变量和方法以下划线 _ 开头，由多个单词组成的 缩写词。在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。
枚举变量 使用 Pascal 命名法。（与骆驼命名法类似。只不过骆驼命名法是首字母小写，而帕斯卡命名法是首字母大写）

const HTML_ENTITY = {}; // 常量
let loadingModules = {}; // 变量
let _privateMethod = {}; // 私有属性、变量和方法
function XMLParser() {}; // 多个单词组成的 缩写词
import CustomUnit from './config/unit.js' // 枚举变量

命名-缩写规范:

navigation => nav
header => hd
description => desc
button => btn
previous => prev

css 命名
id、class :采用命名必须由单词、中划线-连接或数字组成命名。不允许使用拼音（约定俗成的除外，如：youku, baidu），尤其是缩写的拼音、拼音与英文的混合。

命名-前缀规范:
选择器必须是以某个前缀开头

.m-detail .info { sRules; }
.m-detail .current { sRules; }
.m-detail .news { sRules; }

JS 命名
对于不经常使用jquery的项目，在使用jquery的地方必须进行jquery的标注声明:
/* global $ */

JS 对象或JSON的属性命名:采用驼峰命名法。

let obj = {
    resultType: '',
    name: '',
    statusShow: ''
}

 JS 函数命名:使用动宾短语和驼峰命名法，参数也使用驼峰命名法，可选参数以 opt_ 开头.

function getStyle(element, opt_child) {}

JS 类:使用名词和Pascal 命名法（与骆驼命名法类似。只不过骆驼命名法是首字母小写，而帕斯卡命名法是首字母大写），类的 方法 / 属性, 使用驼峰命名法。

function Engine(options) {}

 boolean 类型的变量使用 is 或 has 开头。如果在对象中使用is_或has_开头

let isReady = false;
let hasMoreCommands = false;
let obj = {
    isShow: false,
    hasName: true
}

JS 组件命名:文件名和组件名采用中划线-连接命名

date-range.js // 日期范围选择
<!-- 视频自定义播放组件 -->
<video-play></video-play>

 操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。

let y = a ?
    longButSimpleOperandB : longButSimpleOperandC;
if (a === 'string' ||
    s === 'object'
) {}

接口命名规范：可读性强，见名晓义；尽量不与各个社区已有的习惯冲突；尽量写全。不用缩写，除非是下面列表中约定的；（变量以表达清楚为目标，uglify 会完成压缩体积工作）
常用后缀:

_id-标记id
_form-表单
_name-标记_id对应的结果/名称
_photo-标记图片
_pdf-PDF文件
_video-视频
_audio-音频
_excel-表格
_number-数字
_date-日期
_info-信息
_rate-概率
_serialnum-编号/_NO-编号
_abel-是否可以Boolean
_remarks-备注
_result-结果
_loading-加载
_alert-弹框
_assign-赋值
_reset-重置
_able-允许
_state-状态
_confirm-确认
_dialog-对话框
_msg-通知
_succ-成功
_err-错误
_failure-失败
_clear-清除
_lists-列表
_file-文件
_infor-信息
_rate-概率

 常用前缀:

rm_: 移除
del_: 删除
update_: 更新
up_: 上
down_: 下
req_: 请求
resp_: 响应
receive_: 接收
dis_: 禁止
pre_: 预
sub_: 低、下
co_: 共同、和
ec_: 超出
auto_: 自动
inter_: 之间
mono_: 单独、单一
bith_: 两个、二
tri_: 三
mutil_: 多个
se_: 分离
aph_: 来自
trans_: 通过
pub_: 公共
into_: 输入
intro_: 到...中
all_: 全部

[强制]vue项目中所有的文件夹命名采用驼峰命名法 components
[强制]vue项目中所有的组件命名采用驼峰命名法,首字母大写 HelloWorld.vue
对于vue组件的props命名采用驼峰命名法，data(){}中定义的变量驼峰命名法,特殊的功能需要加入特殊的后缀或前缀。 

props: {
    routerJump: String // props命名采用驼峰命名法
}
data () {
    return {
        // data(){}中定义的变量驼峰命名法,特殊的功能需要加入特殊的后缀
        cityId: 100101,  // _id标记id
        cityName '北京' , // _name标记_id对应的结果
        idCardPhoto: null,  // _photo标记图片
        reEvaluate: '重新评估', // re_重新
        isShow: false // is_
    }
}

 对于vue组件属性和组件引用采用中划线的方式，枚举变量 使用 Pascal 命名法

import AudioGallery from './mode/audio-gallery.vue' // 音频-Pascal 命名法
export default {
    components: {'audio-gallery': AudioGallery} // 组件引用采用中划线
}

vue方法名，计算属性名采用驼峰命名法

computed: {
    conversion () {}
},
methods: {
    checkFind () {}
}

 选项顺序：

export default {
    name: '',
    mixins: [], // 混入
    components: {}, // 组件
    model: {},
    props: {},
    data () {
        return {}
    }, // 数据
    computed: {}, // 计算属性
    created () {}, // 创建周期
    mounted () {}, // dom挂载周期
    watch: {}, // 监听器
    methods: {}, // 方法
    filters: {}, // 过滤
    directives: {}, // 指令
    destroyed () {} // 实例销毁周期
}

 vue-router

const Frame = {template: '<router-view></router-view>'}
const TemplateList = ()=> import(@/page/template/list/list.vue) //路由懒加载
import TemplateAddEdit from '@/page/template/add_edit/add-edit.vue'

export default [
    {
        path: '/template',
        name: '模板演示',
        component: Frame,
        children: [
            {
                path: 'list',
                name: '模板列表',
                meta: { linkable: true }, // 元信息
                props: { ruterModule: '模板列表' }, // 路由组件传参
                component: TemplateList
            },
            {
                path: 'edit', 
                name: '编辑模板',
                meta: { linkable: true }, // 元信息
                props: { ruterModule: '编辑模板' }, // 路由组件传参
                components: TemplateAddEdit
            }
        ]
    }
]

vuex
state采用驼峰命名，

getter
采用驼峰命名，以get开头

getAllWords (state, getters, rootState, rootGetters) {
    return [...state.words]
  }

 mutations
采用大写命名

export const DATA_RESET = 'DATA_RESET' // 数据重置
[types.DATA_RESET] (state) { // 数据重置
    state.words = []
  }

 约束-后缀

// 加载:_LOADING,状态:_STATE,确认:_CONFIRM,弹框:_ALERT,对话框:_DIALOG,赋值:_ASSIGN,通知:_MESSAGE,成功:_SUCCESS,失败:_FAILURE,
// 结账:_CHECKOUT,清除:_CLEAR,重置:_RESET,可用、允许:_ABLE,
// 列表:_LIST,文件:_FILE,任意类型:_ARBIT,数字:_NUMBER,对象:_OBJECT,布尔:_BOOLEAN,日期:_DATE,
// 标记id:_ID,信息:_INFO,编号:_NO,概率:_RATE,约束:_CONSTRAINT,匹配:_MATCH,

actions
采用驼峰命名，以功能性词汇开头。 

getWords (context) { // 请求获取works
}
setStateWords (context) {
// 设置
}

 modules
采用驼峰命名，注意模块划分。

modules: {
    common: {
      namespaced: true, // 根据模块注册的路径调整命名
      modules: {
        wordsStore
      }
    },
    pictureBooks
  }