front-end

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

项目命名规范

ECMAScript 规范中标识符采用驼峰大小写格式，驼峰命名法由小(大)写字母开始，后续每个单词首字母都大写。根据首字母是否大写，分为两种方式：

• Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo
• Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo

标识符，则包括变量、函数名、类名、属性名和函数或类的参数，每个命名方法又略有不同。

1. 项目命名

全部采用小写方式， 以短横线分隔

示例：my-project-name

2. 目录命名

参照项目命名规则；有复数结构时，要采用复数命名法

示例：scripts, styles, images, data_models

3. 属性命名

• 变量：必须采用小驼峰式命名法

• 常量：必须采用全大写的命名，且单词以_分割，常量通常用于ajax请求url，和一些不会改变的数据

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

• 函数

  • 命名方法：小驼峰式命名法
  • 命名规范：前缀应当为动词
  • 命名建议：可使用常见动词约定

• 类

  • 命名方法：大驼峰式命名法，首字母大写
  • 命名规范：前缀为名称
  • 类的成员：
    • 公共属性和方法：跟变量和函数的命名一样
    • 私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式

示例:

class Person {
  private _name: string;
  constructor() { }
  // 公共方法
  getName() {
    return this._name;
  }
  // 公共方法
  setName(name) {
    this._name = name;
  }
}
const person = new Person();
person.setName('mervyn');
person.getName(); // ->mervyn

4. 注释规范

Javascript支持三种不同类型的注释：行内注释、单行注释和多行注释

• 行内注释

  • 说明：行内注释以两个斜线开始，以行尾结束
  • 语法：code // 这是行内注释
  • 使用方式：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格

• 单行注释

  • 说明：以 /* 开头， */ 结尾
  • 语法：/* 注释说明 */
  • 使用方法：若开始/和结束/都在一行，推荐采用单行注释。若至少三行注释时，第一行为/，最后行为/，其他行以开始，并且注释文字与保留一个空格

• 多行注释

  • 说明：以 /* 开头， */ 结尾
  • 语法：/* 注释说明 */
  • 使用方法：若开始/和结束/都在一行，推荐采用单行注释。若至少三行注释时，第一行为/，最后行为/，其他行以开始，并且注释文字与保留一个空格

• 函数(方法)注释

  • 说明：函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求，参照JSDoc

  • 语法：

    /** 
    * 函数说明 
    * @关键字 
    */
    

5. 模块规范

• 模块应该以 ! 开始。这样确保了当一个不好的模块忘记包含最后的分号时，在合并代码到生产环境后不会产生错误
• 文件应该以驼峰式命名，并放在同名的文件夹里，且与导出的名字一致
• 增加一个名为 noConflict() 的方法来设置导出的模块为前一个版本并返回它
• 永远在模块顶部声明 'use strict';

// fancyInput/fancyInput.js

!function (global) {
  'use strict';

  var previousFancyInput = global.FancyInput;

  function FancyInput(options) {
    this.options = options || {};
  }

  FancyInput.noConflict = function noConflict() {
    global.FancyInput = previousFancyInput;
    return FancyInput;
  };

  global.FancyInput = FancyInput;
}(this);

• 构造函数

  给对象原型分配方法，而不是使用一个新对象覆盖原型。覆盖原型将导致继承出现问题：重设原型将覆盖原有原型。

  示例:

  function Jedi() {
    console.log('new jedi');
  }
  
  // bad
  Jedi.prototype = {
    fight: function fight() {
      console.log('fighting');
    },
  
    block: function block() {
      console.log('blocking');
    }
  };
  
  // good
  Jedi.prototype.fight = function fight() {
    console.log('fighting');
  };
  
  Jedi.prototype.block = function block() {
    console.log('blocking');
  };
  

  方法可以返回 this 来实现方法链式使用

  // bad
  Jedi.prototype.jump = function jump() {
    this.jumping = true;
    return true;
  };
  
  Jedi.prototype.setHeight = function setHeight(height) {
    this.height = height;
  };
  
  var luke = new Jedi();
  luke.jump(); // => true
  luke.setHeight(20); // => undefined
  
  // good
  Jedi.prototype.jump = function jump() {
    this.jumping = true;
    return this;
  };
  
  Jedi.prototype.setHeight = function setHeight(height) {
    this.height = height;
    return this;
  };
  
  var luke = new Jedi();
  
  luke.jump()
    .setHeight(20);