前端Vue开发规范

前端Vue开发规范

函数，组件 提取：应用场景在两次及两次以上的需提取为公共函数、公共组件

一、开发工具及插件

前端组使用 VS Code 需安装 Prettier-Code formatter、ESLint、vscode-fileheader

Prettier-Code formatter、ESLint ：为代码格式化工具
vscode-fileheader ： 为文件添加注释信息，创建人、创建时间、修改人、修改时间…；

二、命名规范

常用命名规范：

• camelCase（小驼峰式命名法 —— 首字母小写）

  文件夹命名方式，例：docs、assets、components、directives、mixins、utils、views

• PascalCase（大驼峰式命名法 —— 首字母大写）

  公共组件命名方式

• kebab-case（短横线连接式 —— 全小写）

  路由及路由页面文件命名方式

2.1 项目文件命名

2.1.1 路由命名

• path使用kebab-case（短横线连接式），name使用camelCase小驼峰式命名法

  例： path: ‘/user-info’,name: ‘UserInfo’,component: () => import(“…/views/user-info.vue”),

2.1.2 路由文件名及子组件命名

• 使用kebab-case（短横线连接式）式命名法

  例：
  main-login.vue
  components/
  |- main-login-list.vue
  

2.1.3 公共组件命名

• 使用PascalCase大驼峰式命名法, 以 Custom + xxxx 命名

  例：components / CustomList.vue

2.1.4 图像文件名/CSS 文件命名

• 全部采用小写方式， 优先选择单个单词命名，多个单词命名以下划线分隔

  例： banner_sina.png、banner_sina.css/scss/less

2.2 代码参数命名

• 组件的prop定义时使用camelCase小驼峰式命名法，需定义prop的类型、默认值、是否必传等属性

2.2.1 变量

• 命名方法：camelCase

  // Form 表单字段
  /** 查询xx START */
  const elValidator = (rule: { field: string },value: string|number,callback: Function)=>{
  	switch (rule.field) {
  		case "name":
  			if (isEmpty(value))
          return callback(new Error());
        break; 
  	}
  	callback && callback();
  }
  
  const refelForms: any = ref(null);
  const resetForms = ()=>{}
  const elForms = reactive({
  	name:""
  })
  const elFormsRules = reactive({
    name: { required: true, validator: elValidator, trigger: "change" },
  });
  /** 查询xx END */
  
  /** xx列表 START */
  const tableFormatter = (row:any, column:{property:string}, cellValue:string, index:number)=>{}
  const dataInfo = reactive({
    // 列表总条数
    total: 0,
    // 当前页
    pageNum: 0,
    // 列表数据
    tableData: [],
    // xx详情数据
    xxData
  });
  /** xx列表 END */
  

2.2.2 常量

• 命名方法：全部大写下划线分割
• 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词

const MAX_COUNT = 10
const URL = 'http://bsnbase.com'

2.2.3 方法

• 命名方法：camelCase
• 命名规范：统一使用动词或者动词 + 名词形式

// 1、普通情况下，使用动词 + 名词形式
jumpPage、openCarInfoDialog

// 2、请求数据方法，以 data 结尾
getListData、postFormData

// 3、接口api方法，以Api结尾
getListDataApi、postFormDataApi

// 4、单个动词的情况
init、refresh

动词	含义	返回值
can	判断是否可执行某个动作 (权 )	函数返回一个布尔值。true：可执行；false：不可执行；
has	判断是否含有某个值	函数返回一个布尔值。true：含有此值；false：不含有此值；
is	判断是否为某个值	函数返回一个布尔值。true：为某个值；false：不为某个值；
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象
updata	更新某个值	函数返回是否更新成功或者返回链式对象
delete	删除某个值	无返回值、返回是否删除成功或者返回链式对象

2.2.4 子组件内 $emit 事件

• 使用 on + 动词 的形式，

  例：

<!-- 父组件 -->
<div
  @on-search="handleSearch"
  @on-clear="handleClear"
  @on-clickoutside="handleClickOutside">
</div>

// 子组件
export default defineComponent({
  emits:["on-clear"],
  setup(props,emits) {
    handleTriggerItem () {
      emits.emit('on-clear')
    }
  }
});

二、日志规范

缩进换行请使用两个空格、文件编辑完成必须格式化

日志提交细致化，一个小功能，一个bug一次提交

代码commit时必须带上正确的commit message。commit message格式。(): type(必须)用于说明git commit的类别，只允许使用下面的标识。

• feat：提交新功能
• fix/to：修复了bug，可以是测试发现的BUG，也可以是研发自己发现的BUG
• fix：产生diff并自动修复此问题。适合于一次提交直接修复问题
• to：只产生diff不自动修复此问题。适合于多次提交。最终修复问题提交时使用fix
• docs：只修改了文档style：调整代码格式，未修改代码逻辑（比如修改空格、格式化、缺少分号等）
• refactor：代码重构，既没修复bug也没有添加新功能
• perf：性能优化，提高性能的代码更改test：添加或修改代码测试
• chore：改变构建流程、或者增加依赖库、工具等
  • scope(可选)scope用于说明 commit 影响的范围，比如location、browser、compile、rootScope、ngHref、ngClick、ngView等，唯一需要注意的是它必须足够简短。当修改影响多个范围时，可以使用*代替。subject(必须)subject是commit目的的简短描述，不超过50个字符。建议使用中文不要大写首字母结尾不加句号或其他标点符号根据以上规范git commit message将是如下的格式：fix(DAO):用户查询缺少username属性 feat(Controller):用户查询接口开发

三、注释规范

注释的目的：

• 提高代码的可读性，从而提高代码的可维护性

注释的原则：

• 如无必要，勿增注释 ( As short as possible )
• 如有必要，尽量详尽 ( As long as necessary )

3.1 HTML 文件注释

3.1.1 单行注释

注释位于要注释代码的上面，单独占一行,一般用于简单的描述，如某些状态描述、属性描述等。

3.1.2 模块注释

一般用于描述模块的名称以及模块开始与结束的位置。

注释内容前后各一个空格字符， <!-- START Comment Text \-->表示模块开始， <!-- END Comment Text \-->表示模块结束，模块与模块之间相隔一行。

• 推荐：

<!-- START Comment Text A --> 
<div class="mod_a">
  ...
</div>
<!-- END Comment Text A -->
 
<!-- START Comment Text B --> 
<div class="mod_b">
  ...
</div>
<!-- END Comment Text B -->

3.1.3 嵌套模块注释

当模块注释内再出现模块注释的时候，为了突出主要模块，嵌套模块不再使用。而改用注释写在模块结尾标签底部，单独一行。

<!-- START Comment Text A -->
<div class="mod_a">
  
    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->
     
    <div class="mod_c">
     ...
    </div>
    <!-- /mod_c -->
  
</div>
<!-- END Comment Text A -->

3.3 JavaScript 文件注释

3.3.1 单行注释

单行注释使用 //，注释应单独一行写在被注释对象的上方，不要追加在某条语句的后面。

注释行的上方需要有一个空行（除非注释行上方是一个块的顶部），以增加可读性.

3.3.2 多行注释

多行注释使用 /** ... */，而不是多行的 //。

/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make (tag) {
  // ...

  return element
}

3.3.4 特殊标记

有时我们发现某个可能的 bug，但因为一些原因还没法修复；或者某个地方还有一些待完成的功能，这时我们需要使用相应的特殊标记注释来告知未来的自己或合作者。常用的特殊标记有两种：

• // FIXME : 说明问题是什么
• // TODO : 说明还要做什么或者问题的解决方案

class Calculator extends Abacus {
  constructor () {
    super ()

      // FIXME: 说明问题是什么
      total = 0

      // TODO: 说明还要做什么或者问题的解决方案
      this.total = 0
  }
}

3.3.5 文档类注释

文档类注释，如函数、类、文件、事件等；都使用 jsdoc 规范。

/**
 * Book类，代表一个书本.
 * @constructor
 * @param {string} title - 书本的标题.
 * @param {string} author - 书本的作者.
 * @return {object} - { title:书本的标题, author:书本的作者 } 
 */
function Book (title, author) {
  this.title = title
  this.author = author
  return {
    title,
    author
  }
}