团队JS规范

版本号 作者 时间 版本 内容摘要
v1.0 eleven 2018-05-16 1.0.0 文档初始化

JS规范

1. 类型

简单类型：

  • 字符串
  • 数值
  • 布尔类型
  • null
  • undefined
const foo = 1
let bar = foo
bar = 9
console.log(foo, bar) // 1, 9

复杂类型：

  • object
  • array
  • function
const foo = [1, 2, 3]
const bar = foo
bar[0] = 9
console.log(foo[0], bar[0]) // 9, 9

2. 引用

const 和 let 都是块级作用域，var 是函数级作用域

  • 对所有引用都使用 const，不要使用 var
    推荐
const a = 1
const b = 2

不推荐

var a = 1
var b = 2
  • 如果引用是可变动的，则使用 let
    推荐
let count = 1
if (count < 10) {
  count += 1
}

不推荐

var count = 1
if (count < 10) {
  count += 1
}

3.对象

请使用字面量值创建对象

// bad
const a = new Object{}
// good
const a = {}

别使用保留字作为对象的键值，这样在 IE8 下不会运行

// bad
const a = {
  default: {},  // default 是保留字
  common: {}
}
// good
const a = {
  defaults: {},
  common: {}
}

请使用对象方法的简写方式

// bad
const item = {
  value: 1,
  addValue: function (val) {
    return item.value + val
  }
}
// good
const item = {
  value: 1,
  addValue(val) {
    return item.value + val
  }
}

请使用对象属性值的简写方式

const job = 'FrontEnd'
// bad
const item = {
  job: job
}
// good
const item = {
  job
}

对象属性值的简写方式要和声明式的方式分组

const job = 'FrontEnd'
const department = 'FS'
// bad
const item = {
  sex: 'male',
  job,
  age: 25,
  department
}
// good
const item = {
  job,
  department,
  sex: 'male',
  age: 25
}

4.数组

请使用字面量值创建数组

// bad
const items = new Array()
// good
const items = []

向数组中添加元素时，请使用 push 方法

const items = []
// bad
items[items.length] = 'test'
// good
items.push('test')

向数组中添加元素时，请使用 push 方法

// bad
const items = []
const itemsCopy = []
const len = items.length
let i
// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i]
}
// good
itemsCopy = [...items]

使用数组的 map 等方法时，请使用 return 声明，如果是单一声明语句的情况，可省略 return

// good
[1, 2, 3].map(x => {
  const y = x + 1
  return x * y
})
// good
[1, 2, 3].map(x => x + 1)
// bad
const flat = {}
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
  const flatten = memo.concat(item)
  flat[index] = flatten
})
// good
const flat = {}
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
  const flatten = memo.concat(item)
  flat[index] = flatten
  return flatten
})
// bad
inbox.filter((msg) => {
  const { subject, author } = msg
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee'
  } else {
    return false
  }
})
// good
inbox.filter((msg) => {
  const { subject, author } = msg
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee'
  }
  return false
})

5. 解构赋值

当需要使用对象的多个属性时，请使用解构赋值

// bad
function getFullName (user) {
  const firstName = user.firstName
  const lastName = user.lastName
  return `${firstName} ${lastName}`
}
// good
function getFullName (user) {
  const { firstName, lastName } = user
  return `${firstName} ${lastName}`
}
// better
function getFullName ({ firstName, lastName }) {
  return `${firstName} ${lastName}`
}

当需要使用数组的多个值时，请同样使用解构赋值

const arr = [1, 2, 3, 4]
// bad
const first = arr[0]
const second = arr[1]
// good
const [first, second] = arr

函数需要回传多个值时，请使用对象的解构，而不是数组的解构

// bad
function doSomething () {
  return [top, right, bottom, left]
}
// 如果是数组解构，那么在调用时就需要考虑数据的顺序
const [top, xx, xxx, left] = doSomething()
// good
function doSomething () {
  return { top, right, bottom, left }
}
// 此时不需要考虑数据的顺序
const { top, left } = doSomething()

6.字符串

字符串统一使用单引号的形式 ' '

// bad
const department = "FS"
// good
const department = 'FS'

字符串太长的时候，请不要使用字符串连接符换行 \，而是使用 +

const str = '凹凸实验室 凹凸实验室 凹凸实验室' +
  '凹凸实验室 凹凸实验室 凹凸实验室' +
  '凹凸实验室 凹凸实验室'

程序化生成字符串时，请使用模板字符串

const test = 'test'
// bad
const str = ['a', 'b', test].join()
// bad
const str = 'a' + 'b' + test
// good
const str = `ab${test}`

7.函数

请使用函数声明，而不是函数表达式

// bad
const foo = function () {
  // do something
}
// good
function foo () {
  // do something
}

不要在非函数代码块中声明函数

// bad
if (isUse) {
  function test () {
    // do something
  }
}
// good
let test
if (isUse) {
  test = () => {
    // do something
  }
}

不要使用 arguments，可以选择使用 ...

// bad
function test () {
  const args = Array.prototype.slice.call(arguments)
  return args.join('')
}
// good
function test (...args) {
  return args.join('')
}

不要更改函数参数的值

// bad
function test (opts) {
  opts = opts || {}
}
// good
function test (opts = {}) {
  // ...
}

8.分号

我们遵循 Standard 的规范，不使用分号。

// bad
const test = 'good';
(function () {
  const str = 'hahaha';
})()
// good
const test = 'good'
;(() => {
  const str = 'hahaha'
})();

9.大括号风格

在编程过程中，大括号风格与缩进风格紧密联系，用来描述大括号相对代码块位置的方法有很多。
推荐

if (foo) {
  bar()
} else {
  baz()
}

10.变量命名

团队约定使用驼峰式命名

11.逗号空格

逗号前后的空格可以提高代码的可读性，团队约定在逗号后面使用空格，逗号前面不加空格。

推荐

var foo = 1, bar = 2

不推荐

var foo = 1,bar = 2
var foo = 1 , bar = 2
var foo = 1 ,bar = 2

12.变量声明

JavaScript 允许在一个声明中，声明多个变量。团队约定在声明变量时，一个声明只能有一个变量
推荐

var a
var b
var c

不推荐

var a, b, c

13.函数声明的空格

团队约定函数括号要加空格
推荐

function func (x) {
  // ...
}

不推荐

function func(x) {
  // ...
}

14.操作符的空格

团队约定操作符前后都需要添加空格
推荐

var sum = 1 + 2

不推荐

var sum = 1+2

15.三元条件判断（if 的快捷方法）

推荐

var sum = a=== 10 ? true : false;

不推荐

var sum;
if(a === 10){
    sum = true;
} else {
    sum = false
}

16.Js遍历数组的方式及其性能对比

Js数组遍历，基本有for、优化后的for、forin、forEach、while、forin、map、filter等一些方法，下面进行对比分析:

/**
     * for 循环
     * */
    let arr = [];
    let max = 10000000;
    setTimeout(function () {
        //初始化arr
        for (let i = 0; i < max; i++) {
            arr[i] = i + 1;
        }
    }, 1);

    /**
     * 检测简单的for循环
     * */
    function testDefaultFor(){
        let startTime, endTime, sum = 0;
        startTime = new Date();
        for(let i = 0; i < arr.length; i++){
            sum += arr[i];
        }
        endTime = new Date();
        console.log('普通for循环所需要时间：' + (endTime - startTime));
    }

    /**
     * 检测优化后的for循环
     * */
    function testDefaultFor2(){
        let startTime, endTime, sum = 0;
        startTime = new Date();
        for(let i = 0, len =  arr.length; i < len; i++){
            sum += arr[i];
        }
        endTime = new Date();
        console.log('普通for循环所需要时间：' + (endTime - startTime));
    }

    /**
     * 检测forEach循环所需时间
     * */
    function testDefaultForeach(){
        let startTime, endTime, sum = 0;
        startTime = new Date();
        arr.forEach(function(d, i){
            sum += d;
        })
        endTime = new Date();
        console.log('foreach循环所需要时间：' + (endTime - startTime));
    }

    /**
     * 检测while循环所需时间
     * */
    function testDefaultWhile(){
        let startTime, endTime, sum = 0, i = 0;
        startTime = new Date();
        while (i < max){
            sum += arr[i]*1;
            i++;
        }
        endTime = new Date();
        console.log('while循环所需要时间：' + (endTime - startTime));
    }

    /**
     * 检测while循环所需时间
     * */
    function testDefaultForIn(){
        let startTime, endTime, sum = 0;
        startTime = new Date();
        for(let i in arr){
            sum += i*1;
        }
        endTime = new Date();
        console.log('forin循环所需要时间：' + (endTime - startTime));
    }

    /**
     * 检测map循环所需时间
     * */
    function testDefaultMap(){
        let startTime, endTime, sum = 0;
        startTime = new Date();
        arr.map(function(d){
            sum += d*1;
        });
        endTime = new Date();
        console.log('map循环所需要时间：' + (endTime - startTime));
    }

    /**
     * 检测filter循环所需时间
     * */
    function testDefaultFilter(){
        let startTime, endTime, sum = 0;
        startTime = new Date();
        arr.filter(function(d){
            sum += d*1;
        });
        endTime = new Date();
        console.log('filter循环所需要时间：' + (endTime - startTime));
    }

最终得到的结果是：

  • 普通for循环所需要时间：99
  • 普通for循环所需要时间：76
  • foreach循环所需要时间：431
  • while循环所需要时间：81
  • forin循环所需要时间：1317
  • map循环所需要时间：1513
  • filter循环所需要时间：493
  • <font color="#f00">综合而言，forin与map最慢，优化后的for循环最快。</font>

17.总是使用带类型的判断符比较判断

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

18.变量赋值时的逻辑操作

逻辑操作符 || 和 && 也可被用来返回布尔值。如果操作对象为非布尔对象，那每个表达式将会被自左向右地做真假判断。基于此操作，最终总有一个表达式被返回回来。这在变量赋值时，是可以用来简化你的代码的。
推荐

x = x || y || 1

不推荐

if(!x){
    if(!y){
        x = 1
    } else {
        x = y
    }
}

19.代码注释规范

注释是你自己与你的小伙伴们了解代码写法和目的的唯一途径。特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。

函数注释：
推荐

/**
* 测试的fun函数
* @param id 某个订单的订单id
* @param type 订单类型 0:未支付；1:支付成功；2:支付中；3:支付失败；
* @param callback 回调函数
* @returns {Promise.<TRsult>}
*/
function testFun(id, type, callback){
    ..........
}

单行注释：
推荐

var test = '你好'； // 测试的字段注释

20.使用严格模式

use strict;
........

为什么使用严格模式:

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。

另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。

21.禁用eval()

由于 eval 方法比较 evil，所以我们约定禁止使用该方法

22.禁用with()

由于 with 方法会产生神奇的作用域，所以我们也是禁止使用该方法的

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