如何让你的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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
javascript实现简单的进度条
Jul 02 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 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默认安装产生系统漏洞
2006/10/09 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
Smarty模板配置实例简析
2019/07/20 PHP
web前端开发也需要日志
2010/12/09 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
深入浅析Python传值与传址
2018/07/10 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
超市七夕促销活动方案
2014/08/28 职场文书
余世维讲座观后感
2015/06/11 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
在js中修改html body的样式
2021/11/11 Javascript
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
python神经网络Xception模型
2022/05/06 Python