寫好你的JavaScript

標籤：javascrip   nbsp   入門   效能   程式員   typeof   命名   項目   類型   

關於

• 公眾號：前端呼啦圈（Love-FED）
• 我的部落格：勞蔔的部落格
• 知乎專欄：前端呼啦圈

前言

在實際工作中，我們應該經常會看到一些功能上沒有問題，但編碼風格和規範卻十分糟糕的代碼，這往往會讓人不敢再往下閱讀，甚至會影響閱讀者一天的心情。這些代碼不僅不易閱讀，而且難以維護，它們一般會出自剛入門的編程新手，也會出自工作了好幾年的老程式員手下。因此本文的目的在於協助那些沒有養成良好的編碼風格，缺乏相應編碼規範意識的JavaScript學習者們改善他們的編碼形象。

編碼形象

以上我提出了編碼形象的概念，我個人認為：

編碼形象 = 編碼風格 +　編碼規範

 

一個良好的編碼形象就等於一個穿著得體的青年，對於程式員來說這是同行瞭解你優秀能力的最直接最簡單的方式。

我們來看一下一段糟糕的編碼形象：

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

上方代碼整體縮在了一起，缺乏規範意識，閱讀體驗很差，不忍直視。

再來看一段良好的代碼形象：

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

上方的代碼是不是感覺舒服多了？

由此可見養成一個良好的編碼形象是至關重要的，而本文主要講解的是基於JavaScript的編碼形象，即基於JavaScript的編碼風格和編碼規範。

那麼什麼是編碼風格，什麼是編碼規範，兩者的區別又是什嗎？

編碼風格

首先編碼風格既然是風格，就沒有對錯之分。就好比每個人的穿著打扮不同，有的人穿的比較得體，有的人穿的比較隨意而已。

而在JavaScript編碼風格中，也有一套比較得體的風格，尤其在團隊開發中，我們不能隨意的書寫屬於自己的風格。

下面就列舉幾種隨意的編碼風格，並將其與良好的編碼風格進行對比。

1.合理注釋

// 不推薦的寫法var name = ‘勞蔔‘;//代碼和注釋之間沒有間隔if (name) {    /*     *注釋之前無空行     *星號後面無空格     */}

// 推薦的寫法var name = ‘勞蔔‘; // 代碼和注釋之間有間隔if (name) {    /*     * 注釋之前有空行     * 星號後面有空格     */}

2.合理間隔

// 不推薦的寫法var name=‘勞蔔‘; // 等號和兩側之間沒有間隔// if塊級語句間沒有間隔if(name){    console.log(‘hello‘);}

// 推薦的寫法var name = ‘勞蔔‘; // 等號和兩側之間有間隔// if塊級語句間有間隔if (name) {    console.log(‘hello‘);}

3.合理縮排

// 不推薦的寫法：沒有合理縮排function getName() {console.log(‘勞蔔‘); }

// 推薦的寫法：合理縮排function getName() {    console.log(‘勞蔔‘);}

4.合理空行

// 不推薦的寫法: 代碼功能塊之間沒有空行function getName() {    var name = ‘勞蔔‘;    if (name) {        console.log(‘hello‘);    }}

// 推薦的寫法：代碼功能塊之間有空行function getName() {    var name = ‘勞蔔‘;    if (name) {        console.log(‘hello‘);    }}

5.合理命名

// 不推薦的寫法var getName = ‘勞蔔‘; // 變數命名首碼為動詞// 函數命名首碼為名詞function name() {   console.log(‘hello‘);}

// 推薦的寫法var name = ‘勞蔔‘; // 變數命名首碼為名詞// 函數命名首碼為動詞function getName() {   console.log(‘hello‘);}

6.合理聲明

// 不推薦的寫法：函數在聲明之前使用getName(); function getName() {    console.log(‘hello‘);}

// 推薦的寫法：函數在聲明之後使用function getName() {    console.log(‘hello‘);}getName();

7.合理結尾

// 不推薦的寫法：沒有使用分號結尾var name = ‘勞蔔‘ var getName = function() {    console.log(‘hello‘)}

// 推薦的寫法：使用分號結尾var name = ‘勞蔔‘; var getName = function() {    console.log(‘hello‘);};

以上主要列舉了7個比較常見的編碼風格的例子進行了比較，在推薦的寫法和不推薦的寫法中兩者並沒有對錯之分，只是推薦的寫法相比較而言更容易閱讀和維護，更適用於團隊開發，也是良好編碼形象的體現。

編碼規範

對於編碼規範，既然是規範，那我們就應該按照一定的規則來編寫。隨意編寫違反編碼規範的代碼，可能會導致程式的出錯和潛在的bug，因此其相對於編碼風格來說應該更加嚴謹，也有人會把編碼風格包含在編碼規範之中。

下面就列舉幾個常見的執行個體代碼：

1.比較參數

// 不推薦的寫法：==和!=比較時會進行類型轉換，應盡量避免使用var num = 123;if (num == ‘123‘) {    console.log(num);} else if (num != ‘321‘) {    console.log(‘321‘);}

// 推薦的寫法：使用===和!==來進行比較var num = 123;if (num === ‘123‘) {    console.log(num);} else if (num !== ‘321‘) {    console.log(‘321‘);}

2.包裹if語句

// 不推薦的寫法：if語句不用大話號包裹會出現潛在bugvar num = 123;if (num === ‘123‘)    console.log(num);

// 推薦的寫法：if語句用大話號包裹var num = 123;if (num === ‘123‘) {    console.log(num);}

3.慎用eval

// 不推薦的寫法：應避免使用eval，不安全，非常耗效能（一次解析成js語句，一次執行）var json = ‘{"name": "勞蔔", "func": alert("hello")}‘;eval(‘(‘ + json + ‘)‘); // 彈出“hello”

// 推薦的寫法var json = ‘{"name": "勞蔔", "func": alert("hello")}‘;JSON.parse(json); // 校正報錯

4.判斷類型

// 不推薦的寫法：用typeof來判斷建構函式建立的對象var str = new String(‘勞蔔‘); console.log(typeof str); // ‘object‘

// 推薦的寫法：用instanceof來判斷建構函式建立的對象var str = new String(‘勞蔔‘); console.log(str instanceof String); // true

5.檢測屬性

// 不推薦的寫法：使用undefined和null來檢測一個屬性是否存在if (obj[‘name‘] !== undefined) {    console.log(‘name屬性存在‘); // 若obj.name為undefined時則會導致判斷出錯}if (obj[‘name‘] !== null) {    console.log(‘name屬性存在‘); // 若obj.name為null時則會導致判斷出錯}

// 推薦的寫法：使用in運算子來檢測對象屬性是否存在，使用hasOwnProperty方法來檢測不包含原型鏈上的對象屬性是否存在if (‘name‘ in obj) {    console.log(‘name屬性存在‘);}if (obj.hasOwnProperty(‘name‘)) {    console.log(‘name屬性存在‘);}

以上主要列舉了5個常見的編碼規範的例子，合理地規範自己的代碼能夠很大程度上減少不必要的維護成本和潛在的bug風險，對於JavaScript學習者來說應該銘記於心。

結語

“程式是寫給人讀的，只是偶爾讓電腦執行一下。”我們不能為了貪圖一時的方便而親手毀了自己的代碼形象，這會給他人和整個項目帶來不必要的麻煩。

本文內容參考自《編寫可維護的JavaScript》一書。

?

寫好你的JavaScript