如何让你的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 相关文章推荐
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 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
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
python 链接和操作 memcache方法
2017/03/04 Python
python实现flappy bird小游戏
2018/12/24 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python定义类self用法实例解析
2020/01/22 Python
Flask处理Web表单的实现方法
2021/01/31 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
工商管理专业应届生求职信
2013/11/04 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
机关出纳岗位职责
2014/04/03 职场文书
团拜会策划方案
2014/06/07 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
中秋客户感谢信
2015/01/22 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python