📙
📙
📙
📙
跳动的神经元
Search…
目录
技术文章
大数据场景下图表组件的设计与优化
从BI项⽬实践思考软件复杂度控制的常⻅⽅法
我的轻敏捷技术管理方法论
How people use AI in finance
Vue 编码规范
IM客户端设计常见问题
2013年的一段演讲:思考React最佳实践
锐途云架构设计参考资料集
技术驱动业务增长的几个方法
技术团队管理细节
JS的数据结构与算法 题解&笔记集
从NPM大数据看前端的发展趋势
软件工程奇淫巧集及优秀文章收藏夹
超大型高并发系统架构的阿里经验
书评影评
金融量化
杂文
其他
书单
文章推荐
大数据场景下图表组件的设计与思考
从BI项目实践思考软件复杂度控制的常见方法
How people use AI in finance
Powered By
GitBook
Vue 编码规范
基本约束
单个JS / Vue 文章代码不能超过
800行
禁止提交非必要
console.log
ESLint
规则必须通过才能提交
变量 / 方法名有拼写错误需修改
能使用 Lodash 的方法不要自己写
Good ✅
1
const newValue = cloneDeep(oldValue)
Copied!
Bad ❌
1
const newValue = { ...oldValue }
Copied!
只添加必要注释
如无必要,不要加注释,如有必要,必须加注释。
Good ✅
1
// Check if an incoming prop key is a declared emit event listener.
2
// e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are
3
// both considered matched listeners.
4
export function isEmitListener(comp: Component, key: string): boolean { ... }
Copied!
Bad ❌
1
// 通过id获取字段列表
2
function getFieldListById() {}
Copied!
命名规范
class / type 名需要大写开头
Good ✅
1
class FieldItem {}
2
const FieldItem = {
3
id: null,
4
name: null
5
}
Copied!
Bad ❌
1
class fieldItem {}
2
const Fielditem = {}
Copied!
方法 / 对象 要采用驼峰命名
Good ✅
1
const styleConfig = {}
2
function styleConfig () {}
Copied!
Bad ❌
1
const StyleConfig = {}
2
function Styleconfig () {}
Copied!
如对应关系未获得广泛认可,禁止使用缩写
关于对应关系不确定的词,禁止使用缩写
Good ✅
1
const dataSource = {}
2
function mathJs () {}
3
const newValue = {}
Copied!
Bad ❌
1
const ds = {}
2
function mathJavaScript () {}
3
const newVal = {}
Copied!
数值 / 字符等基础数据类型常量,使用全大写
Good ✅
1
const BAR_CHART_LENGTH = 70;
2
const BAR_CHART_TYPE_CHART = "bar";
3
const BAR_CHART_TYPE_CHART = symbol("bar");
Copied!
Bad ❌
1
const barChartLength = 70;
2
const Bar_chart_CHART = "bar";
3
const BAR_chart_type_Symbol = symbol("bar");
Copied!
注意对象层级结构,不要重复描述
Good ✅
1
const options = {
2
field: {
3
id: "",
4
name: ""
5
}
6
}
Copied!
Bad ❌
1
const options = {
2
field: {
3
fieldId: "",
4
fieldName: ""
5
}
6
}
Copied!
Vue
Prop
非必填需提供默认值
定义应该尽量详细
Good ✅
1
props: {
2
status: {
3
type: String,
4
required: true
5
}
6
}
Copied!
Bad ❌
1
props: ['status']
Copied!
Composition API
目录结构
组件中使用到的 hook 函数统一放到同级目录下
hook.js
文件中
1
- src
2
- components
3
- Table
4
- hooks.js // Table 组件使用的所有 hook 函数放到这里
5
- index.vue
6
- hooks // 有可能全局使用的 hook 函数放到这里
7
- views
Copied!
所有的 hook 函数必须使用
use
开头
Good ✅
1
const
useTask
=
()
=>
{
2
const
$hasJob
=
ref
(
false
);
3
return
{
$hasJob
}
4
}
Copied!
Bad ❌
1
const
getTask
=
()
=>
{
2
const
hasJob
=
ref
(
false
);
3
return
{
hasJob
}
4
}
Copied!
使用 CompositionAPI ref 开头的变量要使用 $ 开头
为了提醒使用变量中的
value
属性获取元素,请使用
ref
包装的响应式变量使用
$
开头.
Good ✅
1
const
useTask
=
()
=>
{
2
const
$hasJob
=
ref
(
false
);
3
return
{
$hasJob
}
4
}
Copied!
Bad ❌
1
const
useTask
=
()
=>
{
2
const
hasJob
=
ref
(
false
);
3
return
{
hasJob
}
4
}
Copied!
ref 变量返回时需要去掉 $ 开头
由于在组件中使用
ref
变量不需要使用
value
,所以在
setup
方法返回到外部时需要去掉
$
.
Good ✅
1
export
default
{
2
setup
()
{
3
const
{
$hasJob
}
=
useTask
();
4
return
{
5
hasJob
:
$hasJob
6
}
7
}
8
}
Copied!
Bad ❌
1
export
default
{
2
setup
()
{
3
const
{
$hasJob
}
=
useTask
();
4
return
{
5
$hasJob
6
}
7
}
8
}
Copied!
Vuex
禁止在页面中使用 $store API
如需要,需使用 mapActions / mapGetters 显示声明
读取 store 数据,需要通过
getter
Good ✅
1
import { mapGetters } from "vuex"
2
3
export default {
4
computed: mapGetters("xList")
5
}
Copied!
bad ❌
1
{
2
methods: {
3
computeXList() {
4
return this.$store.xList;
5
}
6
}
7
}
Copied!
分发Action 需要使用 mapActions
Good ✅
1
{
2
methods: {
3
mapActions([ "queryFields" ]),
4
init() {
5
this.queryFields()
6
}
7
}
8
}
Copied!
Bad ❌
1
this.$store.dispatch("queryFields", window.innerHeight);
Copied!
1.
不可以直接commit 调用 mutation
Good ✅
1
{
2
methods: {
3
mapActions([ "queryFields" ]),
4
init() {
5
this.queryFields()
6
}
7
}
8
}
Copied!
Bad ❌
1
this.$store.commit("queryFields", window.innerHeight);
Copied!
or
1
{
2
methods: {
3
mapMutations([ "queryFields" ]),
4
init() {
5
this.queryFields()
6
}
7
}
8
}
Copied!
页面中禁止直接调用 Mutation
Mutation 需在 Action 中 commit,页面只能 dispatch action
禁止在 Getters 中操作 Store 数据、dispatch & commit
Good ✅
1
{
2
getters: {
3
currentId(state) {
4
return state.id
5
}
6
}
7
}
Copied!
Bad ❌
1
{
2
getters: {
3
currentId(state) {
4
state.type = state.list[state.id]
5
return state.id
6
}
7
}
8
}
Copied!
Previous
我的轻敏捷技术管理方法论
Next
IM客户端设计常见问题
Last modified
1yr ago
Copy link
Contents
基本约束
命名规范
Vue
Prop
Composition API
Vuex