如何让你的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 代码的方法小结
Jul 16 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
layui分页效果实现代码
May 19 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
Puppet的一些技巧
Sep 17 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
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
php Memcache 中实现消息队列
2009/11/24 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
vue $set 给数据赋值的实例
2019/11/09 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python3常见函数range()用法详解
2019/12/30 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
为什么要使用servlet
2016/01/17 面试题
会计专业的自荐信
2013/12/12 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
公司年终奖分配方案
2014/06/16 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
经济纠纷起诉状
2015/05/20 职场文书
毕业证明书
2015/06/19 职场文书