js命名規范
ECMAScript 規范中標識符采用駝峰大小寫格式，駝峰命名法由小(大)寫字母開始，后續每個單詞首字母都大寫。根據首字母是否大寫，分為兩種方式：
Pascal Case 大駝峰式命名法：首字母大寫。eg：StudentInfo、UserInfo、ProductInfo
Camel Case 小駝峰式命名法：首字母小寫。eg：studentInfo、userInfo、productInfo
標識符，則包括變量、函數名、類名、屬性名和函數或類的參數，每個命名方法又略有不同，下面詳細解釋一下：
1.項目命名
全部采用小寫方式， 以下划線分隔。
示例：my_project_name
2.目錄命名
參照項目命名規則；有復數結構時，要采用復數命名法。
示例：scripts, styles, images, data_models
3.JS文件命名
變量：必須采用小駝峰式命名法。
命名規范：前綴應當是名詞。(函數的名字前綴為動詞，以此區分變量和函數)
命名建議：盡量在變量名字中體現所屬類型，如:length、count等表示數字類型；而包含name、title表示為字符串類型。
// 好的命名方式
let maxCount = 10;
let tableTitle = 'LoginTable';
// 不好的命名方式
let setCount = 10;
let getTitle = 'LoginTable';
常量：必須采用全大寫的命名，且單詞以_分割，常量通常用於ajax請求url，和一些不會改變的數據
命名規范：使用大寫字母和下划線來組合命名，下划線用以分割單詞。
const MAX_COUNT = 10;
const URL = 'http://www.foreverz.com';
函數
命名方法：小駝峰式命名法。
命名規范：前綴應當為動詞。
命名建議：可使用常見動詞約定
動詞 含義 返回值
can 判斷是否可執行某個動作(權限) 函數返回一個布爾值。true：可執行；false：不可執行
has 判斷是否含有某個值 函數返回一個布爾值。true：含有此值；false：不含有此值
is 判斷是否為某個值 函數返回一個布爾值。true：為某個值；false：不為某個值
get 獲取某個值 函數返回一個非布爾值
set 設置某個值 無返回值、返回是否設置成功或者返回鏈式對象
load 加載某些數據 無返回值或者返回是否加載完成的結果
// 是否可閱讀
function canRead(): boolean {
return true;
}
// 獲取名稱
function getName(): string {
return this.name;
}
類 & 構造函數
命名方法：大駝峰式命名法，首字母大寫。
命名規范：前綴為名稱。
示例：
class Person {
public name: string;
constructor(name) {
this.name = name;
}
}
const person = new Person('mevyn');
類的成員
類的成員包含：
公共屬性和方法：跟變量和函數的命名一樣。
私有屬性和方法：前綴為_(下划線)，后面跟公共屬性和方法一樣的命名方式。
示例：
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 支持三種不同類型的注釋：行內注釋、單行注釋和多行注釋：
行內注釋
說明：行內注釋以兩個斜線開始，以行尾結束。
語法：code // 這是行內注釋
使用方式：//(雙斜線)與代碼之間保留一個空格，並且//(雙斜線)與注釋文字之間保留一個空格。
命名建議：
// 用來顯示一個解釋的評論
// -> 用來顯示表達式的結果，
// >用來顯示 console 的輸出結果，
示例：
function test() { // 測試函數
console.log('Hello World!'); // >Hello World!
return 3 + 2; // ->5
}
單行注釋
說明：單行注釋以兩個斜線開始，以行尾結束。
語法：// 這是單行注釋
使用方式：單獨一行：//(雙斜線)與注釋文字之間保留一個空格。
示例：
// 調用了一個函數；1)單獨在一行
setTitle();
多行注釋
說明：以 /* 開頭， */ 結尾
語法：/* 注釋說明 */
使用方法：若開始/和結束/都在一行，推薦采用單行注釋。若至少三行注釋時，第一行為/，最后行為/，其他行以開始，並且注釋文字與保留一個空格。
示例:
/*
* 代碼執行到這里后會調用setTitle()函數
* setTitle()：設置title的值
*/
setTitle();
函數(方法)注釋
說明：函數(方法)注釋也是多行注釋的一種，但是包含了特殊的注釋要求，參照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);
轉載https://www.cnblogs.com/Hsong/p/9016950.html
