JS語法系列(九)—— JS編程風(fēng)格

所謂“編程風(fēng)格”正勒,指的是編寫代碼的樣式規(guī)則。

程序員固然可以自由選擇編程風(fēng)格悼尾,但是好的編程風(fēng)格有助于寫出質(zhì)量更高柿扣、錯(cuò)誤更少疗韵、更易于維護(hù)的程序盐股。

所以,”編程風(fēng)格”的選擇不應(yīng)該基于個(gè)人愛好就谜、熟悉程度舷胜、打字量等因素娩践,而要考慮如何盡量使代碼清晰易讀、減少出錯(cuò)烹骨。你選擇的翻伺,不是你喜歡的風(fēng)格,而是一種能夠清晰表達(dá)你的意圖的風(fēng)格沮焕。這一點(diǎn)吨岭,對(duì)于JS這種語法自由度很高的語言尤其重要。

一峦树、縮進(jìn)


空格和Tab鍵辣辫,都可以產(chǎn)生縮進(jìn)效果(indent)旦事。

Tab鍵可以節(jié)省擊鍵次數(shù),但不同的文本編輯器對(duì)Tab的顯示不盡相同急灭,有的顯示四個(gè)空格姐浮,有的顯示兩個(gè)空格,所以有人覺得葬馋,空格鍵可以使得顯示效果更統(tǒng)一卖鲤。

無論你選擇哪一種方法,都是可以接受的畴嘶,要做的就是始終堅(jiān)持這一種選擇蛋逾。不要一會(huì)使用Tab鍵,一會(huì)使用空格鍵窗悯。

二区匣、區(qū)塊


如果循環(huán)和判斷的代碼體只有一行,JS允許該區(qū)塊省略大括號(hào)蟀瞧。
但是這樣容易造成錯(cuò)誤沉颂,建議總是使用大括號(hào)表示區(qū)塊。

表示區(qū)塊起首的大括號(hào)悦污,不要另起一行铸屉。因?yàn)镴S會(huì)自動(dòng)添加句末的分號(hào),導(dǎo)致一些難以察覺的錯(cuò)誤切端。

return
{ 
    key: value
};
// 相當(dāng)于
return;
{ 
    key: value
};

三彻坛、圓括號(hào)


圓括號(hào)在JS中有兩種作用,一種表示函數(shù)的調(diào)用踏枣,一種表示表達(dá)式的組合昌屉。

// 圓括號(hào)表示函數(shù)的調(diào)用
console.log('abc');

// 圓括號(hào)表示表達(dá)式的組合
(1 + 2) * 3

我們可以用空格,區(qū)分這兩種不同的括號(hào)茵瀑。

1间驮、表示函數(shù)調(diào)用時(shí),函數(shù)名名與左括號(hào)之間沒有空格马昨。
2竞帽、表示函數(shù)定義時(shí),函數(shù)名與左括號(hào)之間沒有空格鸿捧。
3屹篓、其他情況時(shí),前面位置的語法元素與左括號(hào)之間匙奴,都有一個(gè)空格堆巧。

四、行尾的分號(hào)


分號(hào)表示一條語句的結(jié)束。JS規(guī)定谍肤,行尾的分號(hào)可以省略啦租。事實(shí)上,確實(shí)有一些開發(fā)者行尾從來不寫分號(hào)荒揣。但是刷钢,強(qiáng)烈建議還是不要省略這個(gè)分號(hào)。

4.1乳附、不需要使用分號(hào)的情況

有一些語法結(jié)構(gòu)不需要在語句的結(jié)尾添加分號(hào),主要是以下三種情況伴澄。
(1)for和while循環(huán)

for ( ; ; ) {
} // 沒有分號(hào)

while (true) {
} // 沒有分號(hào)

需要注意的是do...while循環(huán)是有分號(hào)的赋除。

do { 
    a--;
} while(a > 0); // 分號(hào)不能省略

(2)分支語句:if,switch非凌,try

if (true) {
} // 沒有分號(hào)

switch () {
} // 沒有分號(hào)

try {
} catch {
} // 沒有分號(hào)

(3)函數(shù)的聲明語句

function f() {
} // 沒有分號(hào)

但是函數(shù)表達(dá)式仍然要使用分號(hào)举农。

var f = function f() {};

以上三種情況,如果使用了分號(hào)敞嗡,并不會(huì)出錯(cuò)颁糟。因?yàn)椋忉屢鏁?huì)把這個(gè)分號(hào)解釋為空語句喉悴。

4.1棱貌、其它情況一律要寫上分號(hào),不要讓JS引擎去猜測(cè)

五箕肃、全局變量


JS最大的語法缺點(diǎn)婚脱,可能就是全局變量對(duì)于任何一個(gè)代碼塊,都是可讀可寫勺像。這對(duì)代碼的模塊化和重復(fù)使用障贸,非常不利。

因此吟宦,盡量避免使用全局變量篮洁。

六、變量聲明


JS會(huì)自動(dòng)將變量聲明”提升”到代碼塊的頭部殃姓。

為了避免可能出現(xiàn)的問題袁波,最好把變量聲明都放在代碼塊的頭部。

所有函數(shù)都應(yīng)該在使用之前定義辰狡,函數(shù)內(nèi)部的變量聲明锋叨,都應(yīng)該放在函數(shù)的頭部。

七宛篇、new命令


JS使用new命令娃磺,從構(gòu)造函數(shù)生成一個(gè)新對(duì)象。

var o = new myObject();

上面這種做法的問題是叫倍,一旦你忘了加上new偷卧,myObject()內(nèi)部的this關(guān)鍵字就會(huì)指向全局對(duì)象豺瘤,導(dǎo)致所有綁定在this上面的變量,都變成全局變量听诸。

因此坐求,建議使用Object.create()命令,替代new命令晌梨。如果不得不使用new桥嗤,為了防止出錯(cuò),最好在視覺上把構(gòu)造函數(shù)與其他函數(shù)區(qū)分開來仔蝌。比如泛领,構(gòu)造函數(shù)的函數(shù)名,采用首字母大寫敛惊,其他函數(shù)名一律首字母小寫渊鞋。

八、with語句


不要使用with語句瞧挤。

九锡宋、相等和嚴(yán)格相等


JS中有兩個(gè)表示“相等”的運(yùn)算符:“相等”和“嚴(yán)格相等”。

因?yàn)椤跋嗟取边\(yùn)算符會(huì)自動(dòng)轉(zhuǎn)換變量類型特恬,造成很多意想不到的情況执俩。因此,不要使用“相等”(==)運(yùn)算符癌刽,只使用“嚴(yán)格相等”(===)運(yùn)算符奠滑。

十、語句的合并


有些程序員追求簡(jiǎn)潔妒穴,喜歡合并不同目的的語句宋税。比如,原來的語句是

a = b;
if (a) { // ...}

他喜歡寫成下面這樣讼油。

if (a = b) { // ...}  //賦值永遠(yuǎn)都會(huì)成功

雖然語句少了一行杰赛,但是可讀性大打折扣,而且會(huì)造成誤讀矮台,讓別人誤解這行代碼的意思是下面這樣乏屯。

if (a === b){ // ...}

建議不要將不同目的的語句,合并成一行瘦赫。

十一辰晕、自增和自減運(yùn)算符


自增(++)和自減(--)運(yùn)算符,放在變量的前面或后面确虱,返回的值不一樣含友,很容易發(fā)生錯(cuò)誤。事實(shí)上,所有的++運(yùn)算符都可以用+= 1代替窘问。

十二辆童、switch...case結(jié)構(gòu)


switch...case結(jié)構(gòu)要求,在每一個(gè)case的最后一行必須是break語句惠赫,否則會(huì)接著運(yùn)行下一個(gè)case把鉴。這樣不僅容易忘記,還會(huì)造成代碼的冗長(zhǎng)儿咱。

而且庭砍,switch...case不使用大括號(hào),不利于代碼形式的統(tǒng)一混埠。

建議避免使用switch...case結(jié)構(gòu)逗威,用對(duì)象結(jié)構(gòu)代替。

(本系列完結(jié))

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末岔冀,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子概耻,更是在濱河造成了極大的恐慌使套,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鞠柄,死亡現(xiàn)場(chǎng)離奇詭異侦高,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)厌杜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門奉呛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人夯尽,你說我怎么就攤上這事瞧壮。” “怎么了匙握?”我有些...
    開封第一講書人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵咆槽,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我圈纺,道長(zhǎng)秦忿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任蛾娶,我火速辦了婚禮灯谣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蛔琅。我一直安慰自己胎许,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著呐萨,像睡著了一般杀饵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上谬擦,一...
    開封第一講書人閱讀 52,549評(píng)論 1 312
  • 那天切距,我揣著相機(jī)與錄音,去河邊找鬼惨远。 笑死谜悟,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的北秽。 我是一名探鬼主播葡幸,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼贺氓!你這毒婦竟也來了蔚叨?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤辙培,失蹤者是張志新(化名)和其女友劉穎蔑水,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扬蕊,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡搀别,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了尾抑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片歇父。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖再愈,靈堂內(nèi)的尸體忽然破棺而出榜苫,到底是詐尸還是另有隱情,我是刑警寧澤翎冲,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布单刁,位于F島的核電站,受9級(jí)特大地震影響府适,放射性物質(zhì)發(fā)生泄漏羔飞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一檐春、第九天 我趴在偏房一處隱蔽的房頂上張望逻淌。 院中可真熱鬧,春花似錦疟暖、人聲如沸卡儒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽骨望。三九已至硬爆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間擎鸠,已是汗流浹背缀磕。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留劣光,地道東北人袜蚕。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像绢涡,于是被迫代替她去往敵國(guó)和親牲剃。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • FreeCodeCamp - Basic JavaScript 寫在前面: 我曾經(jīng)在進(jìn)谷前刷過這一套題雄可,不過當(dāng)時(shí)只...
    付林恒閱讀 16,455評(píng)論 5 28
  • 標(biāo)簽: 我的筆記 ---學(xué)習(xí)資料:http://javascript.ruanyifeng.com/ 1. 導(dǎo)論 ...
    暗夜的怒吼閱讀 817評(píng)論 0 1
  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法凿傅,類相關(guān)的語法,內(nèi)部類的語法数苫,繼承相關(guān)的語法聪舒,異常的語法,線程的語...
    子非魚_t_閱讀 31,664評(píng)論 18 399
  • 大選前后 開門見山室梅。黃金是避險(xiǎn)工具戏仓,所以往往這地球上發(fā)生重大的危機(jī),經(jīng)濟(jì)下滑亡鼠,或者是極大的不確定性事件都會(huì)導(dǎo)致黃金...
    馬碩_磕基閱讀 314評(píng)論 0 3
  • 心目中的英雄赏殃,孤獨(dú)患者。有的人看起來孤獨(dú)间涵,但也并非所以仁热。孤獨(dú)的人之所以孤獨(dú)不是因?yàn)樗麑⑹澜缇苤焕恚?..
    顏兒志夏閱讀 161評(píng)論 0 2