如何让你的JS代码更好看易读

2024-05-06 16:41:13

字体：大中小

来源：转载

供稿：网友

作为JS程序员，自己写的代码如果好看易读，不只是自己看起来好看，在别的程序员接手以后，也会是交接工作异常顺利。

不要在代码中留大段注释掉的代码

留给git去管理，不然你要git干嘛

// bad// function add() {// const a = b + c// return a// }function add() { return a + 1000}// goodfunction add() { return a + 1000}

适当地换行

// badfunction a() { const { state_a, state_b, state_c } = this.state this.setState({state_a: state_a * 2}) return 'done'}// goodfunction a() { const { state_a, state_b, state_c } = this.state this.setState({state_a: state_a * 2}) return 'done'}

适当的添加注释，但不要疯狂的添加注释

对一段代码或者一行特别需要注意的代码注释

不要疯狂的注释，太啰嗦，漂亮的代码自己会说话

// badconst a = 'a' // 这是aconst b = 'b' // 这是bconst c = 'c' // 这是c// good/** * 申明变量 */ const a = 'a' const b = 'b' const c = 'c'

将类似行为、命名的代码归类在一起

// badfunction handleClick(arr) { const a = 1 arr.map(e => e + a) const b = 2 return arr.length + b}// goodfunction 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() {}// badarr.map(a => { return add(a)})setTimeout(() => { doSomething()}, 1000)// goodarr.map(add)setTimeout(doSomething, 1000)

箭头函数

// badconst a = (v) => { return v + 1}// goodconst a = v => v + 1// badconst b = (v, i) => { return { v, i }}// goodconst b = (v, i) => ({v, i})// badconst c = () => { return (dispatch) => { // doSomething }}// goodconst c = () => dispatch => { // doSomething}

提前对对象取值(写react的同学一定懂)

// badconst a = this.props.prop_a + this.props.prop_bthis.props.fun()// goodconst { prop_a, prop_b, fun} = this.propsconst a = prop_a + prop_bfun()

合理使用各种表达式

// badif (cb) { cb()}// goodcb && cb()// badif (a) { return b} else { return c}// goodreturn a ? b : c// badif (a) { c = a} else { c = 'default'}// goodc = a || 'default'

链式调用写法

// badfetch(url).then(res => { return res.json()}).then(() => { // doSomething}).catch(e => {})// goodfetch(url) .then(res => { return res.json() }) .then(() => { // doSomething }) .catch(e => { })

保持代码是纵向发展的

发现那些在整个文件中特别'突出'的代码时，应该考虑对他们做换行处理了

// badreturn handleClick(type, key, ref, self, source, props)// goodreturn handleClick( type, key, ref, self, source, props)// badconst a = this.props.prop_a === 'hello' ? <di>world</div> : null// goodconst a = this.props.prop_a === 'hello' ? <di>world</div> : null

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：javascript中new Array()和var arr=[]用法区别

下一篇：React Native 使用Fetch发送网络请求的示例代码