收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > 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 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
手游棋牌游戏运营
香港开奖琭场直播统果 分分赛记录 四川快乐十二任五遗漏查询 四川快乐12预测 赛车pk拾开奖软件 代发重庆时时计划 河南福彩快3下载 百盛金服app彩票 河南快三玩法技巧 江苏时时开奖走势图 qq分分彩开奖 秒速时时票官网网址 白小姐特碼 上海快三历史开奖记录 老时时走势图经 欢乐2人麻将下载