写一手漂亮的js

BetaRabbit 发布于2019-08-21 17:52 / 1356人阅读

摘要：介绍看了很多，却没有人教我怎么去写一手漂亮的代码，今天我来讲讲我自己写的经验不要在代码中留大段注释掉的代码留给去管理，不然你要干嘛适当地换行适当的添加注释，但不要疯狂的添加注释对一段代码或者一行特别需要注意的代码注释不要疯狂的注释，太啰嗦，

介绍

看了很多best practice，却没有人教我怎么去写一手漂亮的js代码，今天我来讲讲我自己写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" ? world

: null // good const a = this.props.prop_a === "hello" ? world

: null 总结

个人经验，如有错误，还望指正

云服务器 GPU云服务器漂亮的js表格 js漂亮的效果漂亮的导航菜单js 用js写自己的网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90133.html

写一手漂亮的js(react篇)

摘要：哈哈，又是我，废话不多说，直接看代码个人原则既然是组件化的，那么相同的代码，我不会写第二遍不在结构中夹杂太多逻辑遵守上一篇写一手漂亮的的规则可读性在我心里永远大于性能追求极致性能场景除外对生命周期函数排序传递多个时注意换行利用对象展开符传递哈哈，又是我，废话不多说，直接看代码个人原则既然react是组件化的，那么相同的代码，我不会写第二遍不在dom结构中夹杂太多js逻辑遵守...

ad6623 2019-08-22 13:53 评论0 收藏0
码如其人，小老弟，你能写一手漂亮的Python函数吗

摘要：返回值函数可以且应该被视为一个独立的小程序。以下的函数是幂等的无论何时调用，其返回值都是。与多数现代编程语言一样，在 Python 中，函数是抽象和封装的基本方法之一。你在开发阶段或许已经写过数百个函数，但并非每个函数都生而平等。写出「糟糕的」函数会直接影响代码的可读性和可维护性。那么，什么样的函数是「糟糕的」函数呢？更重要的是，要怎么写出「好的」函数呢？简单回顾数学中充满了函数...

goji 2019-07-31 10:28 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 评论0 收藏0