Javascript规范

语法

使用ES6语法。

尽量使用原生语法,不要用jQuery,Zepto

全局命名空间污染

将代码包裹成一个 IIFE,用以创建独立隔绝的定义域。防止全局命名空间被污染。

//不推荐
//在全局范围内声明变量导致全局范围污染。所有变量都像这样声明将存储在window对象中
var x = 0,
  y = 1;
console.log(window.x,window.y);
 
//推荐
//我们可以采用IIFE方式来避免,这种空间污染。
((w)=>{
    var x = 0,
     y = 1;
  //udefined
  console.log(w.x,w.y);
 
  w.x = x;
  w.y = y;
  //  0 , 1
  console.log(w.x,w.y);
}(window));

立即执行的函数表达式

立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的,但写在内使得整个表达式看起来更像一个整体,因此推荐这么做。

//不推荐
(()=>{})();

//推荐
(()=>{}());

严格模式

所有代码启用严格模式。启用严格模式时最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式,这有可能会引发一些第三方类库的问题。

// Script starts here
'use strict';
(()=>{
  //代码内容...
}());
 
 
//推荐
// Script starts here
(()=>{
'use strict';
  //代码内容...
}());

命名

变量、函数、函数参数 、类属性,方法
使用 Camel(驼峰) 命名法

//变量
let testStatus = 1;
//函数,函数参数
let setTestStatus = (statusValue)=>{
    testStatus = statusValue;
};
//类属性,方法
TestNode.prototype.setName = (name)=>{
    this.name = name;
};
TestNode.name;

常量

使用全大写字母,单词间下划线分隔的命名方式。

const TEST_STATUS = 1;

使用 Pascal (首字母大写)命名法

let TestNode = (name)=>{
    this.name = name;
}

注释

原则

(如无必要,勿增注释):尽量提高代码本身的清晰性、可读性。
(如有必要,尽量详尽):合理的注释、空行排版等,可以让代码更易阅读、更具美感。

单行注释

必须独占一行。// 后跟一个空格,缩进与下一行被注释说明的代码一致。

多行注释

避免使用 /.../ 这样的多行注释。有多行注释内容时,使用多个单行注释。

函数/方法注释

函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识。;
参数和返回值注释必须包含类型信息和说明;
当函数是内部函数,外部不可访问时,可以使用 @inner 标识;

/**
 * 函数描述
 *
 * @param {string} p1 参数1的说明
 * @param {string} p2 参数2的说明,比较长
 *     那就换行了.
 * @param {number=} p3 参数3的说明(可选)
 * @return {Object} 返回值描述
 */
function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

其他

变量声明

尽量在文件(函数)顶部使用一个var、let、const声明所需要的变量和常量;禁止出现连续var或其他声明关键词

/**
 * .....
 */
//推荐
const USER_NAME = 'ch',
    USER_AGE = 18;
let nameTarget,
    color,
    nodeTxt = '您好';
//不推荐
const USER_NAME = 'ch';
const USERAGE = 18;
let namgeTarget;
let color;
let nodeTxt = '您好';

变量赋值

赋值尽量写在变量声明中

//推荐
let a = 1,
  b = '您好',
  c = '2';
//不推荐
let a,
  b,
  c;
a = 1;
b = '您好';
c = '2';

缩进

统一两个空格缩进,不要使用 Tab 或者 Tab、空格混搭。

函数长度

20行封顶!越短越好,写函数请记得一定要追求“短小”。

代码宽度

一行代码最大限制为120个字符。

比较判断

总是使用 === 精确的比较操作符,避免在判断的过程中,由 JavaScript 的强制类型转换所造成的困扰。

分号

语句末必须加分号;

修改内建对象的原型链

严厉禁止修改内建对象的原型链诸如 Object.prototype 和 Array.prototype;

首选函数式风格

函数式编程让你可以简化代码并缩减维护成本,因为它容易复用,又适当地解耦和更少的依赖。

例子中,在一组数字求和的同一问题上,比较了两种解决方案。第一个例子是经典的程序处理,而第二个例子则是采用了函数式编程和 ECMA Script 5.1 的数组方法。

例外:往往在重代码性能轻代码维护的情况之下,要选择最优性能的解决方案而非维护性高的方案(比如用简单的循环语句代替 forEach)

//推荐
((log)=>{
  'use strict';
  
  var arr = [10, 3, 7, 9, 100, 20];
  
  var sum = arr.reduce(function(prevValue, currentValue) {
    return prevValue + currentValue;
  }, 0);
  
  log('The sum of array ' + arr + ' is: ' + sum);
  
}(window.console.log));
 
 
//不推荐
((log)=>{
  'use strict';
 
  var arr = [10, 3, 7, 9, 100, 20],
      sum = 0,
      i;
  
  for(i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  
  log('The sum of array ' + arr + ' is: ' + sum)
  
}(window.console.log));

数组和对象字面量

数组和对象,尽量用字面量来代替构造器。构造器很容易让人在它的参数上犯错

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

推荐阅读更多精彩内容