怎么寫(xiě)好JavaScript

這篇文章將為大家詳細(xì)講解有關(guān)怎么寫(xiě)好JavaScript，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

編碼形象

以上我提出了編碼形象的概念，我個(gè)人認(rèn)為：

編碼形象 = 編碼風(fēng)格 +　編碼規(guī)范

一個(gè)良好的編碼形象就等于一個(gè)穿著得體的青年，對(duì)于程序員來(lái)說(shuō)這是同行了解你優(yōu)秀能力的最直接最簡(jiǎn)單的方式。

我們來(lái)看一下一段糟糕的編碼形象：

//打個(gè)招呼
function func(){
 var age=18,sex='man';
 var greeting='hello';
 if(age<=18&&sex=='man'){
 console.log(greeting+'little boy')
 }
 ...
}
func()

上方代碼整體縮在了一起，缺乏規(guī)范意識(shí)，閱讀體驗(yàn)很差，不忍直視。

再來(lái)看一段良好的代碼形象：

// 打個(gè)招呼
function greetFn() {
 var age = 18,
 sex = 'man',
 greeting = 'hello';
 if (age <= 18 && sex === 'man') {
 console.log(greeting + 'little boy');
 }
 ...
};
greetFn();

上方的代碼是不是感覺(jué)舒服多了？

由此可見(jiàn)養(yǎng)成一個(gè)良好的編碼形象是至關(guān)重要的，而本文主要講解的是基于JavaScript的編碼形象，即基于JavaScript的編碼風(fēng)格和編碼規(guī)范。

那么什么是編碼風(fēng)格，什么是編碼規(guī)范，兩者的區(qū)別又是什么？

編碼風(fēng)格

首先編碼風(fēng)格既然是風(fēng)格，就沒(méi)有對(duì)錯(cuò)之分。就好比每個(gè)人的穿著打扮不同，有的人穿的比較得體，有的人穿的比較隨意而已。

而在JavaScript編碼風(fēng)格中，也有一套比較得體的風(fēng)格，尤其在團(tuán)隊(duì)開(kāi)發(fā)中，我們不能隨意的書(shū)寫(xiě)屬于自己的風(fēng)格。

下面就列舉幾種隨意的編碼風(fēng)格，并將其與良好的編碼風(fēng)格進(jìn)行對(duì)比。

1.合理注釋

// 不推薦的寫(xiě)法
var name = '勞卜';//代碼和注釋之間沒(méi)有間隔

if (name) {
 /*
 *注釋之前無(wú)空行
 *星號(hào)后面無(wú)空格
 */
}

// 推薦的寫(xiě)法
var name = '勞卜'; // 代碼和注釋之間有間隔

if (name) {
 /*
 * 注釋之前有空行
 * 星號(hào)后面有空格
 */
}

2.合理間隔

// 不推薦的寫(xiě)法
var name='勞卜'; // 等號(hào)和兩側(cè)之間沒(méi)有間隔

// if塊級(jí)語(yǔ)句間沒(méi)有間隔
if(name){
 console.log('hello');
}

// 推薦的寫(xiě)法
var name = '勞卜'; // 等號(hào)和兩側(cè)之間有間隔

// if塊級(jí)語(yǔ)句間有間隔
if (name) {
 console.log('hello');
}

3.合理縮進(jìn)

// 不推薦的寫(xiě)法：沒(méi)有合理縮進(jìn)
function getName() {
console.log('勞卜'); 
}

// 推薦的寫(xiě)法：合理縮進(jìn)
function getName() {
 console.log('勞卜');
}

4.合理空行

// 不推薦的寫(xiě)法: 代碼功能塊之間沒(méi)有空行
function getName() {
 var name = '勞卜';
 if (name) {
 console.log('hello');
 }
}

// 推薦的寫(xiě)法：代碼功能塊之間有空行
function getName() {
 var name = '勞卜';

 if (name) {
 console.log('hello');
 }
}

5.合理命名

// 不推薦的寫(xiě)法
var getName = '勞卜'; // 變量命名前綴為動(dòng)詞

// 函數(shù)命名前綴為名詞
function name() {
 console.log('hello');
}

// 推薦的寫(xiě)法
var name = '勞卜'; // 變量命名前綴為名詞

// 函數(shù)命名前綴為動(dòng)詞
function getName() {
 console.log('hello');
}

6.合理聲明

// 不推薦的寫(xiě)法：函數(shù)在聲明之前使用
getName(); 

function getName() {
 console.log('hello');
}

// 推薦的寫(xiě)法：函數(shù)在聲明之后使用
function getName() {
 console.log('hello');
}

getName();

7.合理結(jié)尾

// 不推薦的寫(xiě)法：沒(méi)有使用分號(hào)結(jié)尾
var name = '勞卜' 

var getName = function() {
 console.log('hello')
}

// 推薦的寫(xiě)法：使用分號(hào)結(jié)尾
var name = '勞卜'; 

var getName = function() {
 console.log('hello');
};

以上主要列舉了7個(gè)比較常見(jiàn)的編碼風(fēng)格的例子進(jìn)行了比較，在推薦的寫(xiě)法和不推薦的寫(xiě)法中兩者并沒(méi)有對(duì)錯(cuò)之分，只是推薦的寫(xiě)法相比較而言更容易閱讀和維護(hù)，更適用于團(tuán)隊(duì)開(kāi)發(fā)，也是良好編碼形象的體現(xiàn)。

編碼規(guī)范

對(duì)于編碼規(guī)范，既然是規(guī)范，那我們就應(yīng)該按照一定的規(guī)則來(lái)編寫(xiě)。隨意編寫(xiě)違反編碼規(guī)范的代碼，可能會(huì)導(dǎo)致程序的出錯(cuò)和潛在的bug，因此其相對(duì)于編碼風(fēng)格來(lái)說(shuō)應(yīng)該更加嚴(yán)謹(jǐn)，也有人會(huì)把編碼風(fēng)格包含在編碼規(guī)范之中。

下面就列舉幾個(gè)常見(jiàn)的實(shí)例代碼：

1.比較參數(shù)

// 不推薦的寫(xiě)法：==和!=比較時(shí)會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換，應(yīng)盡量避免使用
var num = 123;

if (num == '123') {
 console.log(num);
} else if (num != '321') {
 console.log('321');
}

// 推薦的寫(xiě)法：使用===和!==來(lái)進(jìn)行比較
var num = 123;

if (num === '123') {
 console.log(num);
} else if (num !== '321') {
 console.log('321');
}

2.包裹if語(yǔ)句

// 不推薦的寫(xiě)法：if語(yǔ)句不用大話(huà)號(hào)包裹會(huì)出現(xiàn)潛在bug
var num = 123;
if (num === '123')
 console.log(num);

// 推薦的寫(xiě)法：if語(yǔ)句用大話(huà)號(hào)包裹
var num = 123;
if (num === '123') {
 console.log(num);
}

3.慎用eval

// 不推薦的寫(xiě)法：應(yīng)避免使用eval，不安全，非常耗性能（一次解析成js語(yǔ)句，一次執(zhí)行）
var json = '{"name": "勞卜", "func": alert("hello")}';
eval('(' + json + ')'); // 彈出“hello”

// 推薦的寫(xiě)法
var json = '{"name": "勞卜", "func": alert("hello")}';
JSON.parse(json); // 校驗(yàn)報(bào)錯(cuò)

4.判斷類(lèi)型

// 不推薦的寫(xiě)法：用typeof來(lái)判斷構(gòu)造函數(shù)創(chuàng)建的對(duì)象
var str = new String('勞卜'); 
console.log(typeof str); // 'object'

// 推薦的寫(xiě)法：用instanceof來(lái)判斷構(gòu)造函數(shù)創(chuàng)建的對(duì)象
var str = new String('勞卜'); 
console.log(str instanceof String); // true

5.檢測(cè)屬性

// 不推薦的寫(xiě)法：使用undefined和null來(lái)檢測(cè)一個(gè)屬性是否存在
if (obj['name'] !== undefined) {
 console.log('name屬性存在'); // 若obj.name為undefined時(shí)則會(huì)導(dǎo)致判斷出錯(cuò)
}
if (obj['name'] !== null) {
 console.log('name屬性存在'); // 若obj.name為null時(shí)則會(huì)導(dǎo)致判斷出錯(cuò)
}

// 推薦的寫(xiě)法：使用in運(yùn)算符來(lái)檢測(cè)對(duì)象屬性是否存在，使用hasOwnProperty方法來(lái)檢測(cè)不包含原型鏈上的對(duì)象屬性是否存在
if ('name' in obj) {
 console.log('name屬性存在');
}
if (obj.hasOwnProperty('name')) {
 console.log('name屬性存在');
}

以上主要列舉了5個(gè)常見(jiàn)的編碼規(guī)范的例子，合理地規(guī)范自己的代碼能夠很大程度上減少不必要的維護(hù)成本和潛在的bug風(fēng)險(xiǎn)，對(duì)于JavaScript學(xué)習(xí)者來(lái)說(shuō)應(yīng)該銘記于心。

關(guān)于“怎么寫(xiě)好JavaScript”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。