我的JavaScript代码风格-唐霜

长期写代码，逐渐形成（或胁迫自己养成）一【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】些特定的代码风格。一些普适性风格就没有必【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】要在这里列出来，只列出那些可能与众不同，【转载请注明来源】【本文受版权保护】或者说在可左可右的情况下，在我的风格里胁本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。迫自己选择其中一种。这份风格清单还会继续【关注微信公众号：wwwtangshuangnet】【转载请注明来源】更新。它的主要依据有以下几点：

易于git diff阅读未经授权，禁止复制转载。

【本文受版权保护】

【原创不易，请尊重版权】

【未经授权禁止转载】

转载请注明出处：www.tangshuang.net

未经授权，禁止复制转载。

少敲代码，键盘按键个数少、次数少和距离舒转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。适

【原创不易，请尊重版权】

不故意加入反人类的风格，比如“逗号前置”

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

【作者：唐霜】

便于注释（主要针对条件分支语句）【访问 www.tangshuang.net 获取更多精彩内容】

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

【原创内容，转载请注明出处】

1. 以换行而非分号结束语句【本文受版权保护】

未经授权，禁止复制转载。【作者：唐霜】【转载请注明来源】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

var a = 1
var b = 10

不想加分号的原因有：【原创不易，请尊重版权】

javascript并不一定以分号作为语【作者：唐霜】未经授权，禁止复制转载。句的结束，虽然确实可以这样做，但是换行也【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。可以做到，光是 “可以加分号但是大家都不加” 的语未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net言就有：Go, Scala, Ruby,【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】 Python, Swift, Groo转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。vy…，所以我觉得写成没有分号的语句更好看。转载请注明出处：www.tangshuang.net

【本文首发于唐霜的博客】

本文版权归作者所有，未经授权不得转载。

【作者：唐霜】

【未经授权禁止转载】

不以分号结束，有利于后期新增代码时，直接【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。往下加即可。比如.pipe，如果要在之后本文版权归作者所有，未经授权不得转载。【本文受版权保护】再增加一个.pipe，只需要换行以后继续【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net写.pipe即可，而不需要删除分号。

【原创内容，转载请注明出处】

【本文受版权保护】

在git中不会提示有分号那一行也被修改，【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net有利于git commits的美观。

【原创不易，请尊重版权】

【本文首发于唐霜的博客】

【未经授权禁止转载】

转载请注明出处：www.tangshuang.net

没有分号也让代码量变小，当然不利于Min本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】ify，但是一般Minify都是用工具做【本文受版权保护】【关注微信公众号：wwwtangshuangnet】到的，都会自动加分号。

注意点原创内容，盗版必究。

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

Array.prototype.log = function() {
  console.log(this)
}
[1, 2, 3].log()

上面这段代码会报错，为什么呢？因为当使用function(){}[]这种形式的代码时，函数会被立即执行，这也【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。是个坑，函数执行完之后得到一个返回值un【作者：唐霜】转载请注明出处：www.tangshuang.netdefined，然后再执行undefin【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】ed.log()赋值给Array.pro本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nettotype.log，undefined【作者：唐霜】本文作者：唐霜，转载请注明出处。.log()的地方自然就会报错。解决方案【作者：唐霜】原创内容，盗版必究。是：

【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】原创内容，盗版必究。【本文受版权保护】

在句首是 ( [ / + –【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。时在前面加分号
【原创不易，请尊重版权】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】原创内容，盗版必究。

不过既然如此，那么在我的风格中，就应该禁原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】止以([/+-作为句首，一般使用这些操作符作为行首都是【版权所有】唐霜 www.tangshuang.net【本文受版权保护】想实现一些直接的运算，比如上面那段报错的转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。代码，这虽然看上去简便了很多，但实际上这【原创不易，请尊重版权】【未经授权禁止转载】种运算在实践中意义不是很大，更多的是用在【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】测试中。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。【转载请注明来源】著作权归作者所有，禁止商业用途转载。

实际上，这个问题的本质是对js语句的理解未经授权，禁止复制转载。【未经授权禁止转载】。一个语句会以怎样的方式开始？又会以怎样【未经授权禁止转载】未经授权，禁止复制转载。的方式结束？前一个问题理解透之后，再理解【关注微信公众号：wwwtangshuangnet】【作者：唐霜】后一个问题作为补充。

【作者：唐霜】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

表达式语句：a=b+c, d()【原创不易，请尊重版权】

转载请注明出处：www.tangshuang.net

【原创内容，转载请注明出处】

未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。

复合语句和空语句：{}, ;转载请注明出处：www.tangshuang.net

【未经授权禁止转载】

本文作者：唐霜，转载请注明出处。

【作者：唐霜】

声明语句：var, function转载请注明出处：www.tangshuang.net

【本文首发于唐霜的博客】

转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】

本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。

条件判断语句：if, switch【未经授权禁止转载】

【访问 www.tangshuang.net 获取更多精彩内容】

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

循环语句：for, while【本文首发于唐霜的博客】

转载请注明出处：www.tangshuang.net

本文作者：唐霜，转载请注明出处。

【作者：唐霜】

【原创内容，转载请注明出处】

跳转语句：break, continue未经授权，禁止复制转载。【未经授权禁止转载】, return, throw

本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。

width、debugger和use s本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】trict

【本文受版权保护】

原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。

【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。

上面这些就是javascript的语句。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。大部分语句的开始都不会带来不写分号的问题【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】，但是必须注意表达式语句。

【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】

例如:【本文受版权保护】

【本文首发于唐霜的博客】【本文受版权保护】【本文受版权保护】著作权归作者所有，禁止商业用途转载。

a = 1
b = a + 1
c.log()
d ++
Math.abs(e)
window.log(f)

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

('a' + 'b').split('')
[2, 4].join('')
(function(){})()

等等，这类语句也非常像表达式语句，但是它【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net们的前提是先要进行运算后在进行操作。面对【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】这类表达式语句，应该先赋值给变量后，在进原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】行变量表达式操作：

var a = 'a' + 'b'
a.split('')
var b = [2, 4]
b.join('')
var c = function() {}
c()

当以变量开始语句时，就不会在发生上述问题著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。。但是有的时候，你并不希望产生一个多余的【转载请注明来源】【转载请注明来源】变量，这种情况下，最好的办法就是在这种复【关注微信公众号：wwwtangshuangnet】【转载请注明来源】杂表达式前面加分号;

【作者：唐霜】【本文受版权保护】【本文首发于唐霜的博客】

几乎所有的分号问题，都是因为使用了复杂的原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。表达式语句产生的。如果遵循了上面我提到的【作者：唐霜】【未经授权禁止转载】先变量赋值再进行简单表达式语句的话，就可【转载请注明来源】未经授权，禁止复制转载。以有效避免这个问题。

原创内容，盗版必究。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】

我以前觉得不敲分号会比较好看，但是现在看【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】来会有一些问题，主要有两个：

我博客里的很多代码由于数据库迁移问题，导著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。致代码换行失效，代码全部挤在一行里面了，【版权所有，侵权必究】【转载请注明来源】而如果当初我坚持分号结束语句，那么及时出【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net现了这个状况，还可以用格式化工具快速格式未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。化代码，但是由于没有用分号，导致只能自己【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。手敲。虽然这个情况在实际编码的时候很少遇本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。到，但是多打一个分号在类似的情况下还是有转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。好处。但是，即使有分号，如果代码中有行内【版权所有，侵权必究】【本文受版权保护】注释//，换行丢失也会导致代码跑不了。

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。

转载请注明出处：www.tangshuang.net

未经授权，禁止复制转载。

【关注微信公众号：wwwtangshuangnet】

我是vscode重度用户，但是vscod【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。e会有一个代码提示功能，我又不喜欢空格结【本文首发于唐霜的博客】【原创内容，转载请注明出处】束语句，而打分号可以解决这个问题。

【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】

本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】

现在也比较纠结这个问题。转载请注明出处：www.tangshuang.net

【本文首发于唐霜的博客】【原创不易，请尊重版权】【本文首发于唐霜的博客】【原创不易，请尊重版权】原创内容，盗版必究。

2. 用逗号分开的变量、参数、表达式，逗【作者：唐霜】原创内容，盗版必究。号后面空一格

var x, y
function a(x, y) {}
a(12, 14)
var [m, n, l] = [j, ...k]
stream.on('end', () => {})

3. 使用===而非==，!==同理，只【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。有当希望发生类型转化时，才用==

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【转载请注明来源】

if(typeof a === 'undefined') {}
if(0 == false) {} // 有的情况下，我不确定被判断值到底是0还是false，这时，可以通过==判断，但这时特殊情况，因此，当阅读到只有两个==时，我就会下意识问下自己，这里是不是肯定有类型转化

全等会判断数据类型，比如null和fal【作者：唐霜】原创内容，盗版必究。se就不全等，0和false也不全等。

原创内容，盗版必究。转载请注明出处：www.tangshuang.net【作者：唐霜】本文作者：唐霜，转载请注明出处。

4. 使用”引用字符串，使用【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net“引用带变量的字符串，仅在h本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。tml，json等有必要的地方使用【版权所有，侵权必究】【原创内容，转载请注明出处】221;”

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【转载请注明来源】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】

var a = 'k'
var b = 'This is my first dog!'
var c = `Do you see a ${a} on the wall?`

之所以不适用双引号，主要是考虑打双引号要【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。一只手按住shift键，另一只手按引号键本文作者：唐霜，转载请注明出处。【未经授权禁止转载】。但是html中双引号更好，因为一些do原创内容，盗版必究。【转载请注明来源】m操作会使用双引号来添加属性。有些地方只转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。能使用双引号，使用单引号还会引起一些错误转载请注明出处：www.tangshuang.net【本文受版权保护】，比如使用js去写一段嵌入式的shell【转载请注明来源】【原创不易，请尊重版权】时，这个时候，就需要在shell命令内部原创内容，盗版必究。【原创内容，转载请注明出处】使用双引号。还有就是，像angular、【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。vue这些模板中，会使用”&转载请注明出处：www.tangshuang.net原创内容，盗版必究。#8221;作为一个作用域去运行js语句原创内容，盗版必究。未经授权，禁止复制转载。，外面使用双引号，那么里面就只能使用单引【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】号，这样也可以保持js引号的使用一致性。

5. ‘{‘前面【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】有一个空格，函数的'(‘前面原创内容，盗版必究。转载请注明出处：www.tangshuang.net不要空格，其他'(‘要一个空未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。格，’)’后面要【未经授权禁止转载】原创内容，盗版必究。有一个空格，’}’【本文受版权保护】【关注微信公众号：wwwtangshuangnet】;后面应该换行，命令符不贴(，命令符关键本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。字后面空格，函数名紧贴(

【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【原创内容，转载请注明出处】【未经授权禁止转载】

if (a === 10) {}
else {}
arr.forEach(item => {})

上面 else 一行换行遵循本文版权归作者所有，未经授权不得转载。'}'后面应该换行 并且有利于对整个block进行外部注释本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】（比较讨厌Prettier将if的注释丢【作者：唐霜】【本文首发于唐霜的博客】在外面，把else的注释丢到if的blo未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ck中去）。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

if () {} 
function get() {} 
get()
switch () {
  case '': {} // case关键字后面空格
}

其实{前面有空格，和下面的6也有关系，因【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。为{前面总是那种后面需要跟空格的符号。但著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。是也有例外，就是声明一个类的时候：class MyClass {}，这种情况下就体现了这条规则是必须的。【原创不易，请尊重版权】

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

(跟在函数（或方法函数）后面，作为参数列【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。表时，和函数名之间不需要有空格【这种用法未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。由于1的原因，不会使用，只有在某些特定闭【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net包才会使用】；但是跟在if, while未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。等语句关键字后面时，加上一个空格。这使得【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】我们很容易区分是js语言命令符，还是函数转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。。

【未经授权禁止转载】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】

6. =, ==, !=, ===, !【未经授权禁止转载】【本文首发于唐霜的博客】==, &&, ||, 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】=>前后都有空格，但!后面不空格

var a = 10
if(a === 20) {}
setTimeout(() => {}, 1000)
if(!b) {}

7. ()内部紧贴表达式部分不留空格【转载请注明来源】

【转载请注明来源】本文作者：唐霜，转载请注明出处。【作者：唐霜】

if (a === b) {}
function c(go, to) {}

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文受版权保护】【作者：唐霜】著作权归作者所有，禁止商业用途转载。

8. 命名：普通变量、函数用驼峰，类用大原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。写开头的驼峰，键名用_隔开的命名，常量用【原创内容，转载请注明出处】【原创内容，转载请注明出处】全大写和_隔开，文件名用全小写-隔开

【原创内容，转载请注明出处】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

var yourName = 'tom'
function runTask() {}
class MyTask {}
whiteHouse.set('left_color', 'grey')
const SOME_NAME = 'some name'

之所以不用连接线-作为连接符是因为，使用原创内容，盗版必究。本文作者：唐霜，转载请注明出处。-的字符串无法直接作为属性名称，例如a[【原创内容，转载请注明出处】【版权所有，侵权必究】‘left-color【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。217;]，而下划线则可以a.left_转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netcolor。文件名杜绝使用大写，避免在l【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netinux环境下识别问题。

【本文受版权保护】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

9. 冒号’:’未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。前面无需空格，后面要有一个空格

【未经授权禁止转载】【转载请注明来源】【原创不易，请尊重版权】

{
  age: 10,
}

代表数据类型的:后面不加空格原创内容，盗版必究。

【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】原创内容，盗版必究。

let a:string = 'ok'

10. 以逗号结尾的换行变量组中，最后一未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】个变量加上逗号

原创内容，盗版必究。【原创不易，请尊重版权】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

var obj = {
  name: 'Nick',
  age: 10,
  sex: 'man',
}
function factory(
  arg1,
  arg2 = 10,
) {}

未经授权，禁止复制转载。【原创不易，请尊重版权】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

有些风格喜欢“逗号前置”的形式来处理这个【作者：唐霜】本文作者：唐霜，转载请注明出处。点，比如：

【本文首发于唐霜的博客】【转载请注明来源】【作者：唐霜】未经授权，禁止复制转载。【未经授权禁止转载】

var a = 10
    , b = 20
    , c = 30
var d, e, f

这样的好处是通过逗号分离的多个变量声明即【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】使删掉最后一个，也不会造成错误。但是这种转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】风格给人反人类的感觉，不喜欢，所以我的声未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】明遵循11条。

11.声明时一个变量占一行，使用逗号一次转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】性声明多个变量仅用在未赋值的变量，且至于转载请注明出处：www.tangshuang.net【作者：唐霜】一组声明的最后

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】

var a = 1
var b = 2
var c, d, f

这样做的好处避免了上文提到的删掉最后一个【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。声明变量时引起的问题。而如果想给某个原本【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。未赋值的变量赋值时，git diff中会转载请注明出处：www.tangshuang.net原创内容，盗版必究。有两行变化，这也有利于我们看出来实际的改本文作者：唐霜，转载请注明出处。【本文受版权保护】变情况。

【本文首发于唐霜的博客】【转载请注明来源】未经授权，禁止复制转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。

12.if条件语句的中括号不可以省略；单著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。条if…else赋值语句用?【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】:代替

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

function() {
  ...
  if(xxx) return
  ...
  if(xxx) a = 1
  else a = 0
  a = xxx ? 1 : 0
  ...
}

13.代码缩进和tab使用两个空格本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。

理由非常简单，tab不能直接使用\t，因【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】为在不同的环境下，缩进距离会不一样，不使【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net用4个空格是因为在一些条件下，我们需要手【转载请注明来源】本文作者：唐霜，转载请注明出处。动输入空格来表示缩进，手动输入四个空格跟本文作者：唐霜，转载请注明出处。原创内容，盗版必究。两个空格真是的不一样的体验。尽可能手动输著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。入两个空格，而不是使用tab键（当然，如【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。果IDE已经帮忙处理了，按一个键肯定比按著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。两次舒服）。

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

14.数组的第一个和最后一个元素紧贴中括本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。号，而对象大括号需要有一个空格

【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【作者：唐霜】

var a = [1, 2, 3, 4]
var o = { a: 1, b: 2 }

15.当一行代码太长，需要分行时，应该将本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。连接符至于换行后第二行的开头

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

if (
  a === b
  && c === d
  && e === f
) {}
// 三元运算符在下文有专门的一条
var o = a === b 
  ? that 
  : theOne

之所以这样，是为了让看代码的人立即知道换原创内容，盗版必究。原创内容，盗版必究。行后第二行处于怎样的一个逻辑语句里面，如本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。果不把连接符放在第二行句首，就不知道。而未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。且这样还有一个好处，当删除最后一行时，语【本文受版权保护】【本文首发于唐霜的博客】句仍然不报错。换行后应该缩进显示。

【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】原创内容，盗版必究。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

【本文首发于唐霜的博客】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

<div
  custom-attr="1"
  custom-attr2="2"
>
</div>

这条规则，这样可以在后期增加属性而不影响【转载请注明来源】原创内容，盗版必究。原有行，同时适用于JSX。

未经授权，禁止复制转载。原创内容，盗版必究。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

17. 一组值换行【本文首发于唐霜的博客】

【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】未经授权，禁止复制转载。

数组内部结构复杂或元素较多时，应换行，换【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】行后末位元素末尾加分号

【本文受版权保护】

【转载请注明来源】

【作者：唐霜】

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

函数参数超过3个属性，应换行，换行后末位转载请注明出处：www.tangshuang.net原创内容，盗版必究。元素末尾加分号

原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。

【未经授权禁止转载】

函数传参数内部结构复杂或超过3个属性，应【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。换行，换行后末位元素末尾加分号

【关注微信公众号：wwwtangshuangnet】

【未经授权禁止转载】

本文作者：唐霜，转载请注明出处。

// 结构简单且数量少，可以不用换行
[a, b, c] 
{ a, b, c }

// 结构复杂
[
  { id: 1 },
  { id: 2 },
]

// 数量多
{
  a: 1,
  b: 2,
  c: 3,
}

// 参数多
function (
  $scope,
  $rootScope,
  $state,
  $stateParams,
) {}

// 传参数复杂
save(
  'http...',
  (request) => {
    // ...
  },
  (response) => {
     // ...
  },
)

【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】未经授权，禁止复制转载。

对于对象或类实例，不应该被修改（赋值）的著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。属性用 $ 开头。以 $ 开头的方法，后【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。期可能改使用方式，或者被删除，如果外部使本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。用这些方法导致升级报错，我不负责任。私有【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。属性或方法仅在我自己代码中调用，随时可能【本文受版权保护】【版权所有，侵权必究】更换名字，不允许调用，要是调用私有属性或【原创内容，转载请注明出处】【本文受版权保护】方法导致报错，概不负责。

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】【原创内容，转载请注明出处】【转载请注明来源】

switch (some) {
  case one: {}
  case tow: {}
  default: {}
}

和教科书上不同，我的 case 后面会加【未经授权禁止转载】未经授权，禁止复制转载。上 {} 来约束 case 后面的代码换原创内容，盗版必究。【本文首发于唐霜的博客】行逻辑。

【未经授权禁止转载】转载请注明出处：www.tangshuang.net【本文受版权保护】著作权归作者所有，禁止商业用途转载。

20. 三目运算符换行原创内容，盗版必究。

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

const z = a > b ? x : m > n ? y : null
// 第一种换行：以:开头的换行
const z = 
  a > b ? x // 第一句
  : m > n ? y // 第二句
  : null // 第三句
// 上面换行等效于
let z = null
if (a > b) {
  z = x
}
else if (m > n) {
  z = y
}
else {
  z = null
}

// 第二种换行：在第二句及以后有子条件，此时，用括号扩起来，括号内遵循换行逻辑
const some = (
  a + b > c ? x
  : (
    d > e ? m
    : f > h ? m
    : null
  )
  : (
    l > n ? ok
    : g > j ? no
    : yes
  )
  : null
)

// 第三种换行：连续?换行
// 原始写法
const some = a + b > c ? (d > e ? m : f) : n
// 换行写法
const some = (
  a + b > c ? (
    // 此处连续两个?
    d > e ? m
    : f
  // 注意此处，eslint 要求将 ) : 放在一行，否则无法通过检查，但我们的写法不是按照该规则进行
  ) 
  : (
    g > h ? i
    : j
  )
)

之所以和eslint默认的换行逻辑不同，【原创内容，转载请注明出处】【未经授权禁止转载】是因为这种换行方式我方便写注释，每一个?【作者：唐霜】未经授权，禁止复制转载。前面的是条件，后面的是该条件下的结果，所本文版权归作者所有，未经授权不得转载。【作者：唐霜】以，将?作为行内标记更方便注释这一行的内【原创内容，转载请注明出处】原创内容，盗版必究。容。在eslint中，可通过配置inde【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。nt规则的flatTernaryExpr【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。essions为true来实现这个效果。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。三目运算符换行时，要善用()，通过()可本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】以有效的解决一些eslint报错问题。

原创内容，盗版必究。转载请注明出处：www.tangshuang.net原创内容，盗版必究。转载请注明出处：www.tangshuang.net原创内容，盗版必究。

21. 形状用type接口才用inter【未经授权禁止转载】【本文首发于唐霜的博客】face

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【作者：唐霜】【本文受版权保护】

type和interface的区别在于，【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。interface可以（理论上也应该）被本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netimplement，如果我们仅仅是规定一未经授权，禁止复制转载。原创内容，盗版必究。个对象的结构，应该用type，而如果真的转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】是在设计一个接口，希望被implemen转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nett或extends，则应该使用inter【本文受版权保护】【版权所有】唐霜 www.tangshuang.netface。

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【作者：唐霜】【原创不易，请尊重版权】【未经授权禁止转载】原创内容，盗版必究。未经授权，禁止复制转载。【本文受版权保护】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【本文受版权保护】著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【本文首发于唐霜的博客】未经授权，禁止复制转载。【版权所有，侵权必究】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【作者：唐霜】【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net原创内容，盗版必究。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【转载请注明来源】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【作者：唐霜】转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】未经授权，禁止复制转载。原创内容，盗版必究。【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】

2016-12-05 6032

唐霜

我的JavaScript代码风格

1. 以换行而非分号结束语句【本文受版权保护】

2. 用逗号分开的变量、参数、表达式，逗【作者：唐霜】原创内容，盗版必究。号后面空一格

3. 使用===而非==，!==同理，只【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。有当希望发生类型转化时，才用==

6. =, ==, !=, ===, !【未经授权禁止转载】【本文首发于唐霜的博客】==, &&, ||, 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】=>前后都有空格，但!后面不空格

7. ()内部紧贴表达式部分不留空格【转载请注明来源】

9. 冒号’:’未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。前面无需空格，后面要有一个空格

10. 以逗号结尾的换行变量组中，最后一未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】个变量加上逗号

11.声明时一个变量占一行，使用逗号一次转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】性声明多个变量仅用在未赋值的变量，且至于转载请注明出处：www.tangshuang.net【作者：唐霜】一组声明的最后

12.if条件语句的中括号不可以省略；单著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。条if…else赋值语句用?【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】:代替

13.代码缩进和tab使用两个空格本文作者：唐霜，转载请注明出处。

14.数组的第一个和最后一个元素紧贴中括本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。号，而对象大括号需要有一个空格

15.当一行代码太长，需要分行时，应该将本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。连接符至于换行后第二行的开头

16.HTML标签属性换行时，属性要缩进【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。，结束反中括号要换行

17. 一组值换行【本文首发于唐霜的博客】

18. 只读属性或不稳定方法用 $ 开头本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】，私有属性或方法 _ 开头

19. switch…cas【版权所有，侵权必究】原创内容，盗版必究。e 语句

20. 三目运算符换行原创内容，盗版必究。

21. 形状用type接口才用inter【未经授权禁止转载】【本文首发于唐霜的博客】face

为价值买单，打赏一杯咖啡

声明

关于

生态