开发规范

[yongheng2016]

命名规范

• 注意词性
  • 普通变量/属性用：「名词」
  • boolean变量/属性用：「形容词」、「be动词」、「情态动词」、「hasXXX」
  • 普通函数/方法用：「动词」开头
  • 回调、钩子函数用： 「介词」开头、「动词的现在完成时态」
  • 容易混淆的地方加前缀
  • 属性访问器函数可以用名词
• 注意一致性
  • 介词一致性： 如果你使用了 before + after，那么就在代码的所有地方都坚持使用 如果你使用了 before + 完成时，那么就坚持使用
  • 顺序一致性： 比如 updateContainerWidth 和 updateHeightOfContainer 的顺序就令人很别扭，同样会引发「不可预测」
  • 表里一致性： 函数名必须完美体现函数的功能，既不能多也不能少

---

vue.js风格指南

优先级A

• 组件名为多个单词 todo-item | TodoItem
• Prop 定义尽量详细
• 总是用 key 配合 v-for
• 永远不要把 v-if 和 v-for 同时用在同一个元素上 优先级B
• 单文件组件的文件名要么单词大写开头 (PascalCase)，要么横线连接 (kebab-case)
• 基础组件名 统一前缀：如Base、App 或 V
• 单例组件名（如果有必要添加 prop，这实际上是可复用的组件） 只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性
• 和父组件紧密耦合的子组件应该以父组件名作为前缀命名

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

• 组件名中的单词顺序
• Prop 名大小写

props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

优先级C

• 组件/实例的选项应该有统一的顺序
  • components
  • filters
  • mixins
  • inheritAttrs
  • model
  • props/propsData
  • data
  • computed
  • watch
  • 生命周期钩子 (按照它们被调用的顺序)
  • methods
• 元素特性的顺序
  • is
  • v-for
  • v-if
  • v-else-if
  • v-else
  • v-show
  • v-cloak
  • v-pre
  • v-once
  • id
  • ref
  • key
  • slot
  • v-model
  • v-on
  • v-html
  • v-text
• 元素选择器应该避免在 scoped 中出现