VUE 使用规范

项目命名规范

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);
  复制代码