编辑器v2.0前端项目开发规范

@一棵菜菜  April 20, 2018

说明

作者:蔡依辰
介绍:此文档为v2版的前端开发规范,部分基于vue的开发规范。

文件规范

  1. 只要有能够拼接文件的构建系统,就把每个组件单独分成文件。
components/
|- TodoList.vue
|- TodoItem.vue
  1. 完整单词的组件名

组件名应该倾向于完整单词而不是缩写。

// 反例
components/
|- SdSettings.vue
|- UProfOpts.vue
// 好例子
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

命名规范

  1. 变量名、方法名均采用驼峰命名方式,并且初始化变量时必须赋初始值。
var pageData = {};
  1. 方法写法

方法名采用驼峰命名方式,必须添加块注释,以快速了解方法作用;
若方法由点击事件触发,则方法名必须以Action结尾;
若方法携带参数,则应对参数进行精简的注释。

  /**
     * 添加组件
     * @param event 事件
     */
addWidgetAction: function (event) {
}
  1. .vue后缀结尾的文件,文件名应单词大写开头 (PascalCase)。
components/
|- MyComponent.vue
  1. 模板中的组件名大小写

在单文件组件和字符串模板中组件名、DOM 模板中均使用kebab-case方式。

<my-component></my-component>
  1. Prop 名大小写

在声明 prop 的时候,其命名应该始终使用 camelCase(驼峰),而在模板中应该始终使用 kebab-case。

props: {
  greetingText: String
}
<welcome-message greeting-text="hi"/>
  1. 导入其它 Vue 组件时请按如下写法,请尤其注意大小写格式:
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
  components: {
    ComponentA,
    ComponentB
  }
}
</script>
  1. 模板中的class命名

自定义class以'zzjz-'为前缀命名。

<div class='zzjz-box zzjz-content'></div>

开发规范

  1. 多个特性的元素

多个特性的元素应该分多行撰写,每个特性一行。

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>
  1. 单文件组件的顶级元素的顺序

.vue单文件组件应按照template、script、style标签的顺序。

<!-- ComponentB.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
  1. 在 v-if/v-if-else/v-else 中必须使用 key。
  2. .vue单文件的style标签中若含有scoped,则禁止使用元素选择器(如button、li等)。
// 反例
<template>
  <button>X</button>
</template>
<style scoped>
button {
  background-color: red;
}
</style>
  1. v-bind、v-on 采用完整语法方式编写,不采用缩写方式。
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
  1. 字体图标使用

使用i标签书写图标,i标签与文字之间使用空格代码&nbsp;表示间距。

<i class="fa fa-camera-retro"></i>&nbsp;相机
  1. css的层级z-index

每个层级增加值为5,尽量避免+1,+2等。

z-index:5;
z-index:10;
z-index:15;
  1. 接口中:组件属性的命名采用“下划线法”命名。单个短单词全拼写,多个单词尽量采用缩写,若无冲突则直接使用首字母缩写。

详见https://wiki.zhuzi.me/docs/build_temp/1828

  1. html代码中不允许添加空行,js代码中尽量不添加多余空行,符合规范的空格可适当添加。

添加新评论