保藏本站 保藏本站
真钱棋牌网主页 - 软件测验 - 常用手册 - 站长东西 - 技能社区
主页 > JavaScript > JS根底入门 > 正文

主页 - PHP - 数据库 - 操作体系 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS指令 - jQuery - CSS款式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

怎样让你的JS代码更美观易读

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

根据js 字符串indexof与search办法的差异(详解)
1.indexof办法indexOf()办法可回来某个指定的字符串值在字符串中初次呈现的方位。语法:留意:有可选的参数(即设置开端的检索方位)。2、search办法sear

浅析四种常见的Javascript声明循环变量的书写办法
Javascript中的循环变量声明,究竟应该放在哪儿?习气1:不声明直接运用functionloop(arr){for(i=0;iarr.length;i++){//dosomething}}十分风险的运用习气,一般情况下

Javascript中的数据类型之旅
尽管Javascript是弱类型言语,可是,它也有自己的几种数据类型,分别是:Number、String、Boolean、Object、Udefined、Null。其间,Object归于杂乱数据类型,Object

本周排行

更新排行

强悍的草根IT技能社区,这儿应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 ystekkfj.com. All Rights Rreserved  京ICP备05050695号