前端应用编码规范 ​

命名规范 ​

【强制】工程命名 ​

Vue前端工程主应用:系统（三个字母缩写）-业务服务-ui
Vue前端工程子应用:系统（三个字母缩写）-子系统（三个字母缩写：可选）-业务服务-ui

【强制】 代码中的命名 ​

不能以下划线或美元符号开始，也不能以下划线或美元符号结束
正例 ：  name /nameUser
严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。除国际通用的名称(包括中国地名、中国人名、中国公司名)外禁止使用中文拼音
正例 ：  getOrder() / getUserByName()

【强制】类名命名 ​

类名使用 UpperCamelCase 风格，必须遵从驼峰形式 
正例：
class Foo {}
反例：
class foo {}

【强制】接口 ​

使用 UpperCamelCase 进行命名，不要在接口名前加“I”。
接口成员使用 camelCase 进行命名。
反例：
interface IFoo {
  Bar: number;
  Baz(): number;
}
正例：
interface Foo {
  bar: number;
  baz(): number;
}

【强制】方法名、参数名、成员变量、局部变量命名 ​

方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase风格，必须遵从驼峰形式
正例： localValue / getHttpMessage() / inputUserId

【强制】命名空间 ​

使用 UpperCamelCase 进行命名。
正例：
namespace Foo {}
反例：
namespace foo {}

【强制】常量命名 ​

常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚
正例：MAX_STOCK_COUNT

【强制】枚举命名 ​

枚举名遵守 UpperCamelCase 风格，枚举属性：单词间用下划线隔开，力求语义表达完整清楚
正例：
/**
 * 权限模式
 */
export enum PermissionModeEnum {
  // 纯前端路由
  FRONT_END = 'FRONT_END',
  // 前后结合路由
  ROUTE_MAPPING = 'ROUTE_MAPPING',
}

【建议】文件命名 ​

- Vue复杂组件
	正例：
		目录：BasicTable
		目录：BasicTree
- 单文件组件命名
	文件扩展名为 .vue 的 single-file components (单文件组件)。单文件组件名应该始终是单词大写开头 (UpperPascalCase)。
	正例：
		StaticFile.vue
- 业务模块目录命名
	全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。
	正例: 
		目录：operate-log
		目录：micro-app

编码规范 ​

【强制】类型 ​

需显式地为变量、数组和方法编写类型（类型推论能够推断出类型的不需要声明类型）。

正例：
class Bar {
  bar(input: number): BarResult {
    let isZero: boolean;
    const foo = 5;
    if (input === 0) {
      isZero = true;
    }
    const resultObject = {
      fo: foo,
      isZeroRes: isZero,
    };
    return resultObject;
  }
}

interface BarResult {
  fo: number;
  isZeroRes: boolean;
}
反例：
class Bar {
  bar(input) {
    let isZero;
    const foo: number = 5;
    if (input === 5) {
      isZero = false;
    }
    const resultObject = {
      fo: foo,
      isZeroRes: isZero,
    };
    return resultObject;
  }
}

• 不要使用 Number、String、Boolean、Object 为变量、数组和方法设置类型。

  正例：
  baz(foo: string): string {
  
  }
  反例：
  baz(foo: String): String {
  
  }

【强制】声明变量 ​

• 如果变量在其生命周期可能发生改变，尽量使用 let。

• 如果一个值在程序生命周期内不会改变，尽量使用 const。

  正例：
  const bar = "bar";
  let count: number;
  if (true) {
    console.log(bar);
    count += 1;
  }
  反例：
  var bar = "bar";
  var count;
  if (true) {
    console.log(bar);
    count += 1;
  }

【强制】对象 ​

• 使用{}进行对象创建。

  正例：
  const item = {};
  反例：
  const  item  =  new  Object（）;

• 在对象字面量里使用属性简写。

  正例：
  const lukeSkywalker = "Luke Skywalker";
  const obj = {
    lukeSkywalker,
  };
  反例：
  const lukeSkywalker = "Luke Skywalker";
  const obj = {
    lukeSkywalker: lukeSkywalker,
  };

• 仅使用引号用于属于无效标识符的属性

  正例：
  const good = {
    foo: 3,
    bar: 4,
    "data-blah": 5,
  };
  反例：
  const bad = {
    "foo": 3,
    "bar": 4,
    "data-blah": 5,
  };

【强制】解构 ​

• 访问和使用对象的多个属性时，使用对象解构。

  正例：
  const { foo, bar } = user;
  反例：
  const foo = user.firstName;
  const bar = user.lastName;

• 访问数组中的多个数据时，使用解构。

  正例：
  const arr = [1, 2, 3, 4];
  const [first, second] = arr;
  反例：
  const arr = [1, 2, 3, 4];
  const first = arr[0];
  const second = arr[1];

【强制】空格 ​

• 在定义类型前面加上空格。

• 赋值等号两边加上空格。

• 方法、类大括号前空格。

• 对象冒号后空格。

  正例：
  class Foo {
    openDetail(item: string): void {
      let foo: string;
      foo = "";
      const foa = {
        name: "foo",
      };
      console.log(item);
    }
  }

【强制】缩进 ​

使用两个空格缩进。

【强制】分号 ​

语句结尾添加分号。

正例：
const foo = "foo";

【强制】数组 ​

• 使用[]定义数组。

  正例：
  let foos: Foo[];
  反例：
  let foos: Array<Foo>;

• 使用 push 添加数据

  正例：
  const foos = [];
  foos.push("abracadabra");
  反例：
  const foos = [];
  foos[foos.length] = "abracadabra";