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


Posted in Javascript onDecember 01, 2017

作为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'
}

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

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

不要疯狂的注释,太??拢??恋拇?胱约夯崴祷?/p>

// 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
Javascript 相关文章推荐
jquery实现浮动的侧栏实例
Jun 25 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
详解JavaScript常量定义
Jan 03 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
vuex实现购物车功能
Jun 28 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 #Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 #Javascript
利用JS测试目标网站的打开响应速度
Dec 01 #Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 #Javascript
javascript按顺序加载运行js方法
Dec 01 #Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 #Javascript
javascript Function函数理解与实战
Dec 01 #Javascript
You might like
ZF等常用php框架中存在的问题
2008/01/10 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python中count函数简单用法
2020/01/05 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
银行求职信个人范文
2013/12/16 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
如何写新闻稿
2015/07/18 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
Python re.sub 反向引用的实现
2021/07/07 Python