技术规范(1): 前端技术开发规范

ESLint工具介绍

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

ESLint 配置规则：https://cn.eslint.org/docs/rules/

命名规范

项目命名

全部采用小写方式，以下划线分隔。
例：my_project_name

目录命名

参照项目命名规则；

有复数结构时，要采用复数命名法。
例：scripts, styles, images, data_models

JS文件命名

参照项目命名规则。

例：account_model.js

CSS, SCSS文件命名

参照项目命名规则。

例：retina_sprites.scss

HTML文件命名

参照项目命名规则。

例：error_report.html

Vue项目规范

vue文件基本结构

vue文件基本结构：

<template>
<div>
    <!--必须在div中编写页面-->
</div>
</template>

<script>
export default {
    components : {
    },
    data () {
    return {
    }
    },
    methods: {
    },
    mounted() {

    }
}
</script>
<!--声明语言，并且添加scoped-->
<style lang="less" scoped>
</style>

//组件的 data 必须是一个函数。

//当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

vue文件方法声明顺序

vue文件方法声明顺序（如不需要一些属性可不填）

- components   
- props    
- data     
- created
- mounted
- activited
- update
- beforeRouteUpdate
- metods   
- filter
- computed
- watch

不在 mounted、created 之类的方法写逻辑，取 ajax 数据，

定义变量使用let ,定义常量使用const

使用export ，import 模块化

使用console.log() 来debugger时，使用完及时删除

method 自定义方法命名

动宾短语（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）
ajax 方法以 get、post 开头，以 data 结尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）
事件方法以 on 开头（onTypeChange、onUsernameInput）
init、refresh 单词除外
尽量使用常用单词开头（set、get、open、close、jump）

组件

组件注册方式：1）公共组件全局注册 2）其余组件局部注册

组件的每一个属性单独使用一个 props，并且使用函数或是原始类型的值。

<!-- 推荐 -->
<range-slider
  :values="[10, 20]"
  min="0"
  max="100"
  step="5"
  :on-slide="updateInputs"
  :on-end="updateResults">
</range-slider>

<!-- 避免 -->
<range-slider :config="complexConfigObject"></range-slider>

避免 this.$parent 进行组件间通信用props代替，谨慎使用 this.$refs，尽量保持组件的相对独立。