javascript代碼風(fēng)格指北

546669204 發(fā)布于2019-05-23 17:32 / 728人閱讀

摘要：這段代碼工作正常，盡管沒(méi)有用分號(hào)在某些場(chǎng)景下是很管用的，特別是，有時(shí)候可以幫助減少代碼錯(cuò)誤。比如不好的寫(xiě)法盡管這段代碼能正常工作，但代碼中我們應(yīng)盡量避免使用。

前言

在我們平時(shí)工作中寫(xiě)代碼是最頻繁的事情了，但我們的代碼真的"好看"嗎？

預(yù)計(jì)本文閱讀時(shí)間(10分鐘)

正文 1.1--語(yǔ)句結(jié)尾

我們來(lái)看一段代碼

//合法的代碼
var name = "Dreams";
function sayName() {
    alert(name);
}
//合法的代碼，但不推薦這樣寫(xiě)
var name = "Dreams"
function sayName() {
    alert(name)
}

這里我們可以看到上面兩段代碼的區(qū)別就是在于一段加了分號(hào)，一段沒(méi)有加，那么問(wèn)題來(lái)了，我們到底該不該加分號(hào)？

解釋

這里其實(shí)有賴(lài)于分析的自動(dòng)分號(hào)插入(Automatic Semicolon Insertion, ASI)機(jī)制，Javascript代碼省略分號(hào)也是可以正常工作的。ASI會(huì)自動(dòng)尋找代碼中應(yīng)當(dāng)使用分號(hào)但實(shí)際沒(méi)有分號(hào)額位置，并插入分號(hào)。大多數(shù)場(chǎng)景下ASI都會(huì)正確插入分號(hào)，不會(huì)產(chǎn)生錯(cuò)誤。但ASI的分號(hào)插入規(guī)則非常復(fù)雜且很難記住，因此推薦大家不要省略分號(hào)?？匆幌逻@段代碼：

// 原始代碼
function getData() {
    return
    {
        title: "Dreams",
        author: "Dreams"
    }
}
//分析器會(huì)將它理解成
function getData() {
    return;
    {
        title: "Dreams",
        author: "Dreams"  
    };
}

在這段代碼中，函數(shù)getData()的本意是返回一個(gè)包含一些數(shù)據(jù)的對(duì)象。然而，return之后新起了一行，導(dǎo)致return后被插入了一個(gè)分號(hào)，這會(huì)導(dǎo)致函數(shù)返回值是undefined. 可以通過(guò)將左花括號(hào)移至與return同一行的位置來(lái)修復(fù)這個(gè)問(wèn)題。

//這段代碼工作正常，盡管沒(méi)有用分號(hào)
function getData() {
    return {
        title: "Dreams",
        author: "Dreams"  
    }
}

ASI在某些場(chǎng)景下是很管用的，特別是，有時(shí)候ASI可以幫助減少代碼錯(cuò)誤。當(dāng)某個(gè)場(chǎng)景我們認(rèn)為不需要插入分號(hào)而ASI認(rèn)為需要插入時(shí)，常常會(huì)產(chǎn)生錯(cuò)誤。所以我們盡量養(yǎng)成加分號(hào)的習(xí)慣，在某種意義上加上分號(hào)還提高程序的性能哦！

1.2--換行

當(dāng)一行長(zhǎng)度達(dá)到了單行最大字符數(shù)限制時(shí)，就需要手動(dòng)將一行拆成兩行。通常我們會(huì)在運(yùn)算符后換行，下一行會(huì)增加兩個(gè)層級(jí)的縮進(jìn)。比如這樣。

在這個(gè)例子中，逗號(hào)時(shí)一個(gè)運(yùn)算符，應(yīng)當(dāng)作為前一行的行尾。這個(gè)換行位置非常重要，因?yàn)锳SI機(jī)制會(huì)在某些場(chǎng)景下在行結(jié)束的位置插入分號(hào)?？偸菍⒁粋€(gè)運(yùn)算符置為行尾，ASI就不會(huì)自作主張地插入分號(hào)，也就避免了錯(cuò)誤的發(fā)生。

1.3--命名

我們只要是代碼，都會(huì)涉及變量和函數(shù)，因此變量和函數(shù)命名對(duì)于增強(qiáng)代碼可讀性至關(guān)重要。那么在js中，ECMAScript推薦我們遵循**駝峰式大小寫(xiě)(Camel Case)**的命名方式.這種命名方式是小寫(xiě)字母開(kāi)始的，后續(xù)每個(gè)單詞首字母都大寫(xiě)，比如：

var thisMyName;
var anotherVariable;
var aVeryLongVariableName;

函數(shù)的命名

我們推薦函數(shù)函數(shù)前用動(dòng)詞開(kāi)頭

//好的寫(xiě)法
var count = 10;
var myName = "Dreams"
var found = true
//不好的寫(xiě)法:變量看起來(lái)像函數(shù)
var getCount = 10;
var isFound = true;
//好的寫(xiě)法
function getName() {
    return myName;
}
//不好的寫(xiě)法:函數(shù)看起來(lái)像變量
function theName() {
    return myName;
}

命名是一種學(xué)問(wèn)，更是一門(mén)技術(shù)！，通常我們應(yīng)盡量保持盡可能的簡(jiǎn)短，抓重點(diǎn)的命名方式。通過(guò)函數(shù)命就大概可以看出這個(gè)是干什么的函數(shù)。記住寫(xiě)代碼永遠(yuǎn)不是在給自己寫(xiě)，而是在給你下一個(gè)接手的人寫(xiě)，所以代碼寫(xiě)的規(guī)范對(duì)大家都有好處 我們推薦的函數(shù)有：can has is get set 例如：canDo hasClass isBlack getData setData

1.4--null

null是一個(gè)特殊值，但我們常常誤解它，將它和undefined搞混。在下列場(chǎng)景中應(yīng)當(dāng)使用null.

用來(lái)初始化一個(gè)變量

用來(lái)和一個(gè)已經(jīng)初始化的變量比較，這個(gè)變量可以是也可以不是一個(gè)對(duì)象

當(dāng)函數(shù)的參數(shù)期望是對(duì)象時(shí)，用作參數(shù)傳入。

當(dāng)函數(shù)的返回值期望是對(duì)象時(shí)，用作返回值傳出

還有下面一些場(chǎng)景不應(yīng)當(dāng)使用null.

不要使用null來(lái)檢測(cè)是否傳入了某個(gè)參數(shù)。

不要用null來(lái)檢測(cè)一個(gè)未初始化的變量

示例代碼：

//好的用法
var person = null;
function getPerson() {
    if (condition) {
        return new Person("Dreams");
    } else {
        return null;
    }
}
var person = getPerson();
if (person !== null) {
    doSomething();
}

//不好的寫(xiě)法：用來(lái)和未初始化的變量比較
var person;
if (person != null) {
   doSomething() 
}
//不好的寫(xiě)法:用來(lái)和未初始化的變量比較
var person;
if (person != null) {
    doSomething();
}
//不好的寫(xiě)法：檢測(cè)是否傳入了參數(shù)
function doSomething(arg1,arg2,arg3,arg4) {
    if (arg4 != null) {
        doSomethingElse();
    }
}

1.5--undefined

undefined是一個(gè)特殊值，我們常常把它和null搞混。其中一個(gè)讓人頗感困惑的就是null == undefined結(jié)果是true。然而，這兩個(gè)值的用途卻各不相同。那些沒(méi)有被初始化的變量都有一個(gè)初始值，即undefined,表示這個(gè)變量等待被賦值。比如：

//不好的寫(xiě)法
var person;
console.log(person === undefined);//true

盡管這段代碼能正常工作，但代碼中我們應(yīng)盡量避免使用undefined。這個(gè)值常常和返回"undefined"的typeof運(yùn)算符混淆。事實(shí)上，typeof的行為也很讓人費(fèi)解，因?yàn)椴还苤凳莡ndefined的變量還是未聲明的變量，typeof運(yùn)算結(jié)果都是"undefined"，比如：

//foo未被聲明
var person;
console.log(typeof person);//"undefined"
console.log(typeof foo)//"undefined"

在這段代碼中，person和foo都會(huì)導(dǎo)致tpyeof返回"undefined" 當(dāng)變量未聲明時(shí)，如果你使用了一個(gè)可能(或可能不會(huì))賦值為一個(gè)對(duì)象的變量時(shí)，則將其賦值為null

//好的做法
var person = null;
console.log(person === null);//true

將變量初始值賦值為null表明了這個(gè)變量的意圖，他最終很可能賦值為對(duì)象。typeof運(yùn)算符運(yùn)算null的類(lèi)型時(shí)返回"object"，這樣就可以和undefined區(qū)分開(kāi)了

1.6--對(duì)象字面量

聲明數(shù)組和對(duì)象時(shí)推薦下面的做法

//好的寫(xiě)法
var book = {}
var numbers = [1,2,3,4]
//不好的寫(xiě)法
var book = new Object();
var numbers = new Array(1,2,3,4)

結(jié)語(yǔ)

本文內(nèi)容參考至<<編寫(xiě)可維護(hù)的javascript>>

在日常工作中我們應(yīng)當(dāng)合理使用上述方法對(duì)變量/方法/對(duì)象/數(shù)組進(jìn)行管理，而不是胡亂的起名和管理，這樣會(huì)對(duì)我們項(xiàng)目后續(xù)的維護(hù)不利，如果大家還有什么好的習(xí)慣，可以在評(píng)論區(qū)提出哦。

GPU云服務(wù)器云服務(wù)器代碼風(fēng)格指北入坑指北 javascript代碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/7356.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

546669204

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

自己的主機(jī)怎么備案-我用自己的電腦做服務(wù)器，網(wǎng)站怎么備案？

閱讀 5354·2021-09-22 15:59
搬瓦工日本軟銀 JPOS_1 機(jī)房是 CN2 GIA 線路嗎？怎么沒(méi)有 59.43 節(jié)點(diǎn)？

閱讀 1916·2021-08-23 09:42
一些今天看的要點(diǎn)

閱讀 2593·2019-08-29 18:42
（CSS）帶有右側(cè)邊欄的響應(yīng)式頁(yè)面的CSS樣式

閱讀 3476·2019-08-29 10:55
logback 配置文件編寫(xiě)

閱讀 2100·2019-08-27 10:57
JavaScript中的淺拷貝與深拷貝

閱讀 1784·2019-08-26 18:27
談一談原型和原型鏈

閱讀 2749·2019-08-23 18:26
一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置

閱讀 2956·2019-08-23 14:40

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

javascript代碼風(fēng)格指北

解釋

相關(guān)文章

JavaScript 作用域不完全指北

React Native 基礎(chǔ)練習(xí)指北（一）

**[Javascript]cssText基本使用指北**

**[Javascript]cssText基本使用指北**

Nginx配置指北之gzip

發(fā)表評(píng)論

0條評(píng)論

546669204

男|高級(jí)講師

TA的文章

自己的主機(jī)怎么備案-我用自己的電腦做服務(wù)器，網(wǎng)站怎么備案？

搬瓦工日本軟銀 JPOS_1 機(jī)房是 CN2 GIA 線路嗎？怎么沒(méi)有 59.43 節(jié)點(diǎn)？

一些今天看的要點(diǎn)

（CSS）帶有右側(cè)邊欄的響應(yīng)式頁(yè)面的CSS樣式

logback 配置文件編寫(xiě)

JavaScript中的淺拷貝與深拷貝

談一談原型和原型鏈

一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

javascript代碼風(fēng)格指北

解釋

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！