js命名規範

js命名規範

ECMAScript 規範中標識符采用駝峯大小寫格式，駝峯命名法由小(大)寫字母開始，後續每一個單詞首字母都大寫。根據首字母是否大寫，分爲兩種方式：

1. Pascal Case 大駝峯式命名法：首字母大寫。eg：StudentInfo、UserInfo、ProductInfo
2. Camel Case 小駝峯式命名法：首字母小寫。eg：studentInfo、userInfo、productInfo

標識符，則包括變量、函數名、類名、屬性名和函數或類的參數，每一個命名方法又略有不一樣，下面詳細解釋一下：

1.項目命名

所有采用小寫方式， 如下劃線分隔。

示例：my_project_name

2.目錄命名

參照項目命名規則；有複數結構時，要採用複數命名法。

示例：scripts, styles, images, data_models

3.JS文件命名

1. 變量：必須採用小駝峯式命名法。

命名規範：前綴應當是名詞。(函數的名字前綴爲動詞，以此區分變量和函數)

命名建議：儘可能在變量名字中體現所屬類型，如:length、count等表示數字類型；而包含name、title表示爲字符串類型。

// 好的命名方式
let maxCount = 10;
let tableTitle = 'LoginTable';
// 很差的命名方式
let setCount = 10;
let getTitle = 'LoginTable';

1. 常量：必須採用全大寫的命名，且單詞以_分割，常量一般用於ajax請求url，和一些不會改變的數據

命名規範：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。

const MAX_COUNT = 10;
const URL = 'http://www.foreverz.com';

1. 函數

• 命名方法：小駝峯式命名法。
• 命名規範：前綴應當爲動詞。
• 命名建議：可以使用常見動詞約定

動詞	含義	返回值
can	判斷是否可執行某個動做(權限)	函數返回一個布爾值。true：可執行；false：不可執行
has	判斷是否含有某個值	函數返回一個布爾值。true：含有此值；false：不含有此值
is	判斷是否爲某個值	函數返回一個布爾值。true：爲某個值；false：不爲某個值
get	獲取某個值	函數返回一個非布爾值
set	設置某個值	無返回值、返回是否設置成功或者返回鏈式對象
load	加載某些數據	無返回值或者返回是否加載完成的結果

// 是否可閱讀
function canRead(): boolean {
  return true;
}
// 獲取名稱
function getName(): string {
  return this.name;
}

1. 類 & 構造函數

命名方法：大駝峯式命名法，首字母大寫。

命名規範：前綴爲名稱。

示例：

class Person {
  public name: string;
  constructor(name) {
    this.name = name;
  }
}
const person = new Person('mevyn');

1. 類的成員

類的成員包含：

• 公共屬性和方法：跟變量和函數的命名同樣。
• 私有屬性和方法：前綴爲_(下劃線)，後面跟公共屬性和方法同樣的命名方式。

示例：

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. 註釋規範

js 支持三種不一樣類型的註釋：行內註釋、單行註釋和多行註釋：

1. 行內註釋

• 說明：行內註釋以兩個斜線開始，以行尾結束。
• 語法：code // 這是行內註釋
• 使用方式：//(雙斜線)與代碼之間保留一個空格，而且//(雙斜線)與註釋文字之間保留一個空格。

命名建議：

// 用來顯示一個解釋的評論
// -> 用來顯示錶達式的結果，
// >用來顯示 console 的輸出結果，

示例：

function test() { // 測試函數
  console.log('Hello World!'); // >Hello World!
  return 3 + 2; // ->5
}

1. 單行註釋

• 說明：單行註釋以兩個斜線開始，以行尾結束。
• 語法：// 這是單行註釋
• 使用方式：單獨一行：//(雙斜線)與註釋文字之間保留一個空格。

示例：

// 調用了一個函數；1)單獨在一行
setTitle();

1. 多行註釋

• 說明：以 /* 開頭， */ 結尾
• 語法：/* 註釋說明 */
• 使用方法：若開始/和結束/都在一行，推薦採用單行註釋。若至少三行註釋時，第一行爲/，最後行爲/，其餘行以開始，而且註釋文字與保留一個空格。

示例:

/*
* 代碼執行到這裏後會調用setTitle()函數
* setTitle()：設置title的值
*/
setTitle();

1. 函數(方法)註釋

• 說明：函數(方法)註釋也是多行註釋的一種，可是包含了特殊的註釋要求，參照JSDoc

• 語法：

/** 
* 函數說明 
* @關鍵字 
*/

經常使用註釋關鍵字：(只列出一部分，並非所有)

註釋名	語法	含義	示例
@param	@param 參數名 {參數類型} 描述信息	描述參數的信息	@param name {String} 傳入名稱
@return	@return {返回類型} 描述信息	描述返回值的信息	@return {Boolean} true:可執行;false:不可執行
@author	@author 做者信息 [附屬信息：如郵箱、日期]	描述此函數做者的信息	@author 張三 2015/07/21
@version	@version XX.XX.XX	描述此函數的版本號	@version 1.0.3
@example	@example 示例代碼	演示函數的使用	@example setTitle(‘測試’)

/**
* 合併Grid的行
* @param grid {Ext.Grid.Panel} 須要合併的Grid
* @param cols {Array} 須要合併列的Index(序號)數組；從0開始計數，序號也包含。
* @param isAllSome {Boolean} ：是否2個tr的cols必須完成同樣才能進行合併。true：完成同樣；false(默認)：不徹底同樣
* @return void
* @author polk6 2015/07/21 
* @example
* _________________                             _________________
* |  年齡 |  姓名 |                             |  年齡 |  姓名 |
* -----------------      mergeCells(grid,[0])   -----------------
* |  18   |  張三 |              =>             |       |  張三 |
* -----------------                             -  18   ---------
* |  18   |  王五 |                             |       |  王五 |
* -----------------                             -----------------
*/
function mergeCells(grid: Ext.Grid.Panel, cols: Number[], isAllSome: boolean = false) {
  // Do Something
}

• 不要保存 this 的引用。使用 Function#bind。

// bad
function () {
  var self = this;
  return function () {
    console.log(self);
  };
}

// bad
function () {
  var that = this;
  return function () {
    console.log(that);
  };
}

// bad
function () {
  var _this = this;
  return function () {
    console.log(_this);
  };
}

// good
function () {
  return function () {
    console.log(this);
  }.bind(this);
}

• 給函數命名。這在作堆棧軌跡時頗有幫助。

// bad
var log = function (msg) {
  console.log(msg);
};

// good
var log = function log(msg) {
  console.log(msg);
};

• 若是你的文件導出一個類，你的文件名應該與類名徹底相同。

// file contents
class CheckBox {
  // ...
}
module.exports = CheckBox;

// in some other file
// bad
var CheckBox = require('./checkBox');

// bad
var CheckBox = require('./check_box');

// good
var CheckBox = require('./CheckBox');

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);