JS编码规范

Javascript规范
1 变量命名
1.1 [规范] 变量和函数名称,采用驼峰命名方式,即第一个单词以小写字母开始,从第二个单词开始以后的每个单词首字母采用大写字母

// good

var dashboarPage = {};

var camelCase = ‘命名规则’;

// bad

var dashboardpage = {};

var DashboardPage = {};

var dashboard_page = {};

1.2 [规范] 变量或方法名称,禁止以下划线结束

// good

var personName = ‘Jone’;

// bad

var personName_ = ‘Jone’;

1.3 [规范] 禁止使用拼音方式命名

// good

var warningContent = ‘用户名不能为空!’;

// bad

var gaojingneirong = ‘用户名不能为空!’;

1.4 [建议] 字符串使用单引号 '

// good

var name = 'peter';

// bad

var name = "peter";

2 代码风格
2.1 [规范] 使用4个空格作为一个缩进层级;不允许使用2个空格或tab字符

// good

if (0 < num) {

    return true;

}

// bad

if (0 < num) {

  return true;    // 缩进2个空格

}

// bad

if (0 < num) {

return true;  // 使用tab键盘缩进

}

2.2 [规范] 二元运算符两侧必须有一个空格

// good

var sum = 1 + 2;

if (personName === ‘Jone’) {

    runA ();

}

// bad

var sum=1+2;

if (personName===’Jone’) {

    runA ();

}

2.3 [规范] if / else / for / while / function / switch / do / try / catch / finally 关键字后,必须有一个空格。

// good

if (condition) {

}

while (condition) {

}

(function () {

})();

// bad

if(condition) {

}

while(condition) {

}

(function() {

})();

2.4 [规范] if,while等条件判断语句中,不能省略大括号

// goog

if (1 === a) {

return true;

}

// bad

If (1 === a) return true;

2.5 [规范] 用作代码块起始的左花括号 { 前必须有一个空格,右大括号 { 必须单独一行

// good

if (condition) {

}

while (condition) {

}

(function () {

})();

// bad

if(condition) {

}

while(condition) {

}

(function() {

})();

2.6 [规范] 在对象创建时,属性中的 : 之后必须有空格,: 之前不允许有空格

// good

var obj = {

    a: 1,

    b: 2,

    c: 3

};

// bad

var obj = {

    a : 1,

    b:2,

    c :3

};

2.7 [规范] 函数声明、具名函数表达式、函数调用中,函数名和 ( 之间不允许有空格

// good

function funcName() {

}

var funcName = function funcName() {

};

funcName();

// bad

function funcName () {

}

var funcName = function funcName () {

};

funcName ();

2.8 [规范] 逗号“,”和分号“;”前不允许有空格

// good

callFunc(a, b);



// bad

callFunc(a , b) ;

2.9 [规范] 行尾不得有多余的空格

2.10 [规范] 每行不得超过120个字符;超长的不可分割的代码允许例外,比如复杂的正则表达式,长字符串不在例外之列

2.11 [建议] 在语句的行长度超过 120 时,根据逻辑条件合理缩进

// good

if (user.isAuthenticated()

    && user.isInRole('admin')

    && user.hasAuthority('add-admin')

    || user.hasAuthority('delete-admin')

) {

    // Code

}

var html = '' // 此处用一个空字符串,以便整个HTML片段都在新行严格对齐

    + '<article>'

    +    '<h1>Title here</h1>'

    +    '<p>This is a paragraph</p>'

    +    '<footer>Complete</footer>'

    + '</article>';

var html = [

    '<article>',

        '<h1>Title here</h1>',

        '<p>This is a paragraph</p>',

        '<footer>Complete</footer>',

    '</article>'

];

html = html.join('');

foo(

    aVeryVeryLongArgument,

    anotherVeryLongArgument,

    callback

);

// 链式调用较长时采用缩进进行调整。

$('#items')

    .find('.selected')

    .highlight()

    .end();

3 语言特性
3.1 [规范] 每个 var 只能声明一个变量

// good

var hangModules = [];

var missModules = [];

var visited = {};

// bad

var hangModules = [],

    missModules = [],

visited = {};

3.2 [建议] 变量必须即用即声明,不得在函数或其它形式的代码块起始位置统一声明所有变量。

解释:变量声明与使用的距离越远,出现的跨度越大,代码的阅读与维护成本越高。虽然JavaScript的变量是函数作用域,还是应该根据编程中的意图,缩小变量出现的距离空间。

3.3 [规范] 比较相等时,用严格等号===替代==

// good

if (age === 30) {

    // ......

}

// bad

if (age == 30) {

    // ......

}

4 ES6规范
4.1 [规范] const定义的变量,必须大写,用下划线间隔开来

4.2 [建议] 使用拓展运算符 ... 复制数组

4.3 [建议] 对数组使用解构赋值。

//good

const [first, second] = arr;

// bad

const first = arr[0];

const second = arr[1];

4.4 [建议] 使用模板字符串替代字符串连接

// good

function sayHi(name){

    return `How are you ${name}?`

}

// bad

function sayHi(name){

    return 'How are you, ' + name + '?';

}

5 注释规范
5.1 [建议]文件注释应位于文件的最前面,包含概要说明、版本、版权声明、修改时间;文件注释必须全部以英文字符表示

/*!

* iODS v3 (http://www.hollysys.com/)

* Hollysys 2019-2020

* srx 2019.9.18

*/

5.2 [规范]单行注释,以//开始,后面留一个空格

// good

// this is a comment

5.3 [建议]多行注释,从第二行起,每行以“空格+”开始,使对齐

/*

* this is a commen

* @param {Array} nodeName 节点名称

*/

5.4 [建议]不要将注释内容写在注释的开始符和结束符所在行

// bad

/* start



end */

5.5 [建议]用@method声明函数或类方法;函数有参数时,必须使用@param,当函数有返回值时,必须使用@return

/*

* 返回当前集合中指定位置的元素

* @method/@class

* @param {Number} [i=0] 位置下标。如果为负数,则从集合的最后一个元素开始倒数

* @return {Element} 指定元素

*/

5.6 [建议] 必须使用 @event 标识事件,事件参数的标识与方法描述的参数标识相同

/**

* 值变更时触发

*

* @event Select#change

* @param {Object} e e描述

* @param {string} e.before before描述

* @param {string} e.after after描述

*/

[if !supportLists]1 [endif]变量命名

[if !supportLists]1.1 [endif][规范] 变量和函数名称,采用驼峰命名方式,即第一个单词以小写字母开始,从第二个单词开始以后的每个单词首字母采用大写字母

// good

var dashboarPage= {};

var camelCase

= ‘命名规则’;



// bad

var dashboardpage= {};

var DashboardPage= {};

var dashboard_page= {};

1.2 [endif][规范] 变量或方法名称,禁止以下划线结束

// good

varpersonName = ‘Jone’;



// bad

varpersonName_ = ‘Jone’;

1.3 [endif][规范] 禁止使用拼音方式命名

// good

var

warningContent = ‘用户名不能为空!’;



// bad

var

gaojingneirong = ‘用户名不能为空!’;

1.4 [endif][建议] 字符串使用单引号'

// good

var name= 'peter';



// bad

var name= "peter";

2 代码风格

2.1 [规范] 使用4个空格作为一个缩进层级;不允许使用2个空格或tab字符

// good

if (0< num) {

   return true;

}



// bad

if (0< num) {

  returntrue;    //缩进2个空格

}



// bad

if (0< num) {

       return true;  //使用tab键盘缩进

}

2.2 [endif][规范] 二元运算符两侧必须有一个空格

// good

var sum =1 + 2;



if (personName=== ‘Jone’) {

    runA();

}



// bad

varsum=1+2;



if(personName===’Jone’) {

    runA();

}

2.3 [规范] if / else/ for / while / function / switch / do / try / catch / finally 关键字后,必须有一个空格。

// good

if(condition) {

}

while(condition) {

}

(function() {

})();


// bad

if(condition){

}
while(condition){

}

(function(){

})();

2.4 [规范] if,while等条件判断语句中,不能省略大括号

// goog

if (1 ===a) {

       return true;

}



// bad

If (1 ===a) return true;

2.5 [endif][规范] 用作代码块起始的左花括号 { 前必须有一个空格,右大括号{ 必须单独一行

// good

if(condition) {

}



while(condition) {

}



(function() {

})();

 

// bad

if(condition){

}



while(condition){

}



(function(){

})();

2.6 [endif][规范] 在对象创建时,属性中的 : 之后必须有空格,: 之前不允许有空格

// good

var obj ={

    a: 1,

    b: 2,

    c: 3

};



// bad

var obj ={

    a : 1,

    b:2,

    c :3

};

2.7 [endif][规范] 函数声明、具名函数表达式、函数调用中,函数名和 ( 之间不允许有空格

// good

functionfuncName() {

}



varfuncName = function funcName() {

};



funcName();



// bad

functionfuncName () {

}



varfuncName = function funcName () {

};



funcName();

2.8 [endif][规范] 逗号“,”和分号“;”前不允许有空格

// good

callFunc(a,b);



// bad

callFunc(a, b) ;

2.9 [endif][规范] 行尾不得有多余的空格

[if !supportLists]2.10 [endif][规范] 每行不得超过120个字符;超长的不可分割的代码允许例外,比如复杂的正则表达式,长字符串不在例外之列

[if !supportLists]2.11 [endif][建议] 在语句的行长度超过 120 时,根据逻辑条件合理缩进

// good

if(user.isAuthenticated()

    && user.isInRole('admin')

    && user.hasAuthority('add-admin')

    || user.hasAuthority('delete-admin')

) {

    // Code

}



var html

= '' // 此处用一个空字符串,以便整个HTML片段都在新行严格对齐

    + ''

    +    '

Title here
'

    +    '

This is a paragraph

'

    +    'Complete'

    + '';



var html= [

    '',

        '

Title here
',

        '

This is aparagraph

',

        'Complete',

    ''

];

html =html.join('');



foo(

    aVeryVeryLongArgument,

    anotherVeryLongArgument,

    callback

);



// 链式调用较长时采用缩进进行调整。

$('#items')

    .find('.selected')

    .highlight()

    .end();

3 [endif]语言特性

3.1 [endif][规范] 每个 var 只能声明一个变量

// good

varhangModules = [];

varmissModules = [];

varvisited = {};

// bad

varhangModules = [],

    missModules = [],

visited ={};

3.2 [endif][建议] 变量必须即用即声明,不得在函数或其它形式的代码块起始位置统一声明所有变量。

解释:变量声明与使用的距离越远,出现的跨度越大,代码的阅读与维护成本越高。虽然JavaScript的变量是函数作用域,还是应该根据编程中的意图,缩小变量出现的距离空间。

3.3 [endif][规范] 比较相等时,用严格等号===替代==

// good

if (age=== 30) {

    // ......

}

// bad

if (age== 30) {

    // ......

}

4 [endif]ES6规范

4.1 [endif][规范] const定义的变量,必须大写,用下划线间隔开来

4.2 [endif][建议] 使用拓展运算符 ... 复制数组

4.3 [endif][建议] 对数组使用解构赋值。

//good

const[first, second] = arr;



// bad

constfirst = arr[0];

constsecond = arr[1];

4.4 [endif] [建议] 使用模板字符串替代字符串连接

// good

functionsayHi(name){

    return `How are you ${name}?`

}

// bad

functionsayHi(name){

    return 'How are you, ' + name + '?';

}

5 [endif]注释规范

5.1 [endif][建议]文件注释应位于文件的最前面,包含概要说明、版本、版权声明、修改时间;文件注释必须全部以英文字符表示

/*!

 * iODS v3 (http://www.hollysys.com/)

 * Hollysys 2019-2020

 * srx 2019.9.18

 */

5.2 [endif][规范]单行注释,以//开始,后面留一个空格

// good

// thisis a comment

5.3 [endif][建议]多行注释,从第二行起,每行以“空格+”开始,使对齐

/*

 * this is a commen

 * @param {Array} nodeName节点名称

 */

5.4 [endif][建议]不要将注释内容写在注释的开始符和结束符所在行

// bad

/* start

end */

5.5 [endif][建议]用@method声明函数或类方法;函数有参数时,必须使用@param,当函数有返回值时,必须使用@return

/*

 *返回当前集合中指定位置的元素

 * @method/@class

 * @param {Number} [i=0]位置下标。如果为负数,则从集合的最后一个元素开始倒数

 * @return {Element}指定元素

 */

5.6 [endif] [建议] 必须使用 @event 标识事件,事件参数的标识与方法描述的参数标识相同

/**

 *值变更时触发

 *

 * @event Select#change

 * @param {Object} e e描述

 * @param {string} e.before before描述

 * @param {string} e.after after描述

 */

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • 一、javascript代码规范 变量1.1 一直使用 const 来声明变量,如果不这样做就会产生全局变量。我们...
    lyichao阅读 787评论 0 1
  • 1、命名规范:命名法、变量、常量、构造函数、类的成员等等的命名规范 命名法: 变量:命名方法:驼峰命名法命名规范:...
    呼呼哥阅读 2,224评论 0 0
  • 1.使用字面值创建对象和数组 2.用Array.from将类数组对象转换成数组 3.字符串用单引号' '而不是双引...
    hanahaha阅读 702评论 0 0
  • 这份规范,是参考了 Go 官方提供的编码规范,以及 Go 社区沉淀的一些比较合理的规范之后,加入自己的理解总结出的...
    拾丨玖阅读 1,232评论 0 4
  • 今天给大家分享一下Google Python 编程规范。适合入门者学习。 分号 不要在行尾加分号, 也不要用分号将...
    程序员爽爽阅读 419评论 0 0