如何让你的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的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 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
谈一谈收音机的高放电路
2021/03/02 无线电
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python脚本替换指定行实现步骤
2017/07/11 Python
浅谈Django REST Framework限速
2017/12/12 Python
简单实现python画圆功能
2018/01/25 Python
Python模块的加载讲解
2019/01/15 Python
python实现多进程通信实例分析
2019/09/01 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Python使用type动态创建类操作示例
2020/02/29 Python
Python常用编译器原理及特点解析
2020/03/23 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
销售经理工作职责
2014/02/03 职场文书
烹饪自我鉴定
2014/03/01 职场文书
影视广告专业求职信
2014/09/02 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
英雄儿女观后感
2015/06/09 职场文书
获奖感言范文
2015/07/31 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis