作为 JS 程序员,自己写的代码如果好看易读,不只是自己看起来好看,在别的程序员接手以后,也会是交接工作异常顺利。
不要在代码中留大段注释掉的代码
留给 git 去管理,不然你要 git 干嘛
适当地换行
- // bad
- // function add() {
- // const a = b + c
- // return a
- // }
- function add() {
- return a + 1000
- }
- // good
- function add() {
- return a + 1000
- }
- // bad
- function a() {
- const {
- state_a,
- state_b,
- state_c
- } = this.state this.setState({
- state_a: state_a * 2
- }) return 'done'
- }
- // good
- function a() {
- const {
- state_a,
- state_b,
- state_c
- } = this.state
- this.setState({
- state_a: state_a * 2
- })
- return 'done'
- }
适当的添加注释,但不要疯狂的添加注释
对一段代码或者一行特别需要注意的代码注释
不要疯狂的注释,太啰嗦,漂亮的代码自己会说话
- // bad
- const a = 'a' // 这是a
- const b = 'b' // 这是b
- const c = 'c' // 这是c
- // good
- /**
- * 申明变量
- */
- const a = 'a'
- const b = 'b'
- const c = 'c'
将类似行为、命名的代码归类在一起
- // bad
- function handleClick(arr) {
- const a = 1
- arr.map(e = >e + a)
- const b = 2
- return arr.length + b
- }
- // good
- function handleClick(arr) {
- const a = 1 const b = 2
- arr.map(e = >e + a)
- return arr.length + b
- }
在不破坏语义性的情况下,'能省则省'
牢记 js 中函数是一等公民
但是,如果省略到影响可读性了,就是失败的
在可读性和简洁性至今必须选一个的话,永远先选可读性
- function add(a) {
- return a + 1
- }
- function doSomething() {
- }
- // bad
- arr.map(a = >{
- return add(a)
- })
- setTimeout(() = >{
- doSomething()
- },
- 1000)
- // good
- arr.map(add)
- setTimeout(doSomething, 1000)
箭头函数
- // bad
- const a = (v) = >{
- return v + 1
- }
- // good
- const a = v = >v + 1
- // bad
- const b = (v, i) = >{
- return {
- v,
- i
- }
- }
- // good
- const b = (v, i) = >({
- v,
- i
- })
- // bad
- const c = () = >{
- return (dispatch) = >{
- // doSomething
- }
- }
- // good
- const c = () = >dispatch = >{
- // doSomething
- }
提前对对象取值 (写 react 的同学一定懂)
- // bad
- const a = this.props.prop_a + this.props.prop_b
- this.props.fun()
- // good
- const {
- prop_a,
- prop_b,
- fun
- } = this.props
- const a = prop_a + prop_b
- fun()
合理使用各种表达式
- // bad
- if (cb) {
- cb()
- }
- // good
- cb && cb()
- // bad
- if (a) {
- return b
- } else {
- return c
- }
- // good
- return a ? b: c
- // bad
- if (a) {
- c = a
- } else {
- c = 'default'
- }
- // good
- c = a || 'default'
链式调用写法
- // bad
- fetch(url).then(res = >{
- return res.json()
- }).then(() = >{
- // doSomething
- }).
- catch(e = >{
- })
- // good
- fetch(url).then(res = >{
- return res.json()
- }).then(() = >{
- // doSomething
- }).
- catch(e = >{
- })
保持代码是纵向发展的
发现那些在整个文件中特别'突出'的代码时,应该考虑对他们做换行处理了
- // bad
- return handleClick(type, key, ref, self, source, props)
- // good
- return handleClick(
- type,
- key,
- ref,
- self,
- source,
- props
- )
- // bad
- const a = this.props.prop_a === 'hello' ? <di>world</div> : null
- // good
- const a = this.props.prop_a === 'hello'
- ? <di>world</div>
- : null
来源: http://www.jb51.net/article/129597.htm