技术规范(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文件基本结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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,并且使用函数或是原始类型的值。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 推荐 -->
<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,尽量保持组件的相对独立。

shikanon wechat
欢迎您扫一扫,订阅我滴↑↑↑的微信公众号!