編寫可維護的JavaScript--編程風格篇

AnthonyHan 發布于2019-08-21 14:18 / 3250人閱讀

摘要：寫在前面新司機最近讀完編寫可維護的，學到不少東西。書分為編程風格編程實踐自動化三個部分。編程風格并不是絕對的，每個人或團隊都有自己的編程風格，但知道哪些地方需要注意的話，還是有助于新司機完成代碼風格的轉變。

寫在前面

新司機最近讀完《編寫可維護的JavaScript》，學到不少東西。書分為編程風格、編程實踐、自動化三個部分。其中編程風格是你的代碼格式約定，統一的格式不僅僅有利于團隊，也有助于提高新司機的代碼質量和程序的可維護性。編程風格并不是絕對的，每個人或團隊都有自己的編程風格，但知道哪些地方需要注意的話，還是有助于新司機完成代碼風格的轉變。

第1章基本的格式化

1.1 縮進：制表符統一tab縮進或空格縮進，不能混用
1.2 語句結尾不省略分號

// 錯誤的例子
var x = 5
(function(){
    alert("不要省略分號");
})();

1.3 單行長度：80字符以內，長字符用“+”分割
1.4 拆分換行：兩個制表符縮進，打斷點在符合后
1.5 空行，添加空白行區分代碼塊

每個流程控制語句(if,while,for...)之前

在方法定義之間

方法中局部變量和第一條語句之前

多行或單行注釋之前

方法內邏輯片段之間

1.6 命名：

變量和函數，遵守駝峰大小寫命名法，變量前綴為名詞，函數前綴為動詞，常見約定：can/has/is返回一個布爾值

常量：使用大寫字母和下劃線來命名

構造函數：首字母大寫的駝峰命名法

var setValue = function(){},    
    getValue = function(){},
    isEmpty = false,
    CONST_VALUE,                // 常量
    ConstructFunction;          // 構造函數

1.7 直接量：

字符串：統一使用雙引號，多行字符串由『+』連接

null使用場景：將它當作占位符

初始化可能賦值對象的變量

與一個已經初始化的變量比較

當函數的參數期望是對象時，用作參數傳入

返回值期望是對象時，用作返回值

null不適合場景：不用null檢測是否傳入參數

禁用undefined

對象直接量初試化數組或對象

var arr = [1, 2, 3, 4],
    obj = {key1: value1, key2: value2}

第2章注釋

2.1 單行注釋：

用來解釋下一行代碼，注釋前有一個空行，縮進與下一行一致

代碼尾部注釋，代碼與注釋間至少有一個縮進，超過字符限度則應放在代碼上方

2.2 多行注釋：

注釋前有一個空行，縮進與下一行一致

2.3 注釋的使用：代碼不夠清晰時添加注釋

難以理解的代碼

可能被誤認為錯誤的代碼

瀏覽器特性hack

文檔注釋：為如下內容添加注釋，所有方法的功能、期望參數和返回值、構造函數自定義類型和期望參數

第3章語句和表達式

3.1 花括號對齊方式：左括號放在第一句末尾，右括號放在代碼后一行
3.2 括號語句間隔：左括號之前，右括號之后添加空格
3.3 switch不漏掉break
3.4 避免使用with
3.5 for中避免使用continue
3.6 for-in使用 hasOwnProperty()方法遍歷實例屬性，for-in用來遍歷對象，不要用來遍歷數組

第4章變量、函數和運算符

4.1 變量聲明：將局部變量集中放在函數內部第一條，var合并為一個，初始化獨占一行放前面，沒初始值的放在后面。

var node1 = null,
    node2 = null,
    msg = "",
    i, len;

4.2 函數聲明：先聲明再使用，函數聲明不應該出現在流程控制語句塊之內。

// 錯誤實例，函數提升使程序不會像想象中的那樣運行
if(document.getElementsByClassName("cls")){
    function getClass(){ // someCode }
} else {
    function getClass(){ // someCode }
}

// 函數提升后，可以看成是
function getClass(){ /* someCode */ }
function getClass(){ /* someCode */ }
if(document.getElementsByClassName("cls")){
} else {
}

4.3 函數調用：函數名與括號間不加空格
4.4 匿名函數立即調用：使用括號包裹起來，或添加注釋
4.5 嚴格模式：在函數體內使用，而不要在全局作用域使用
4.6 相等：應該使用 === 和 !== ，能夠避免強制類型轉換，禁止直接使用原始類型

GPU云服務器云服務器編寫可維護的javascript 編程語言的編寫如何編寫高性能的javascript 編程風格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87867.html

《編寫可維護的JavaScript》之編程實踐

摘要：最近讀完編寫可維護的，讓我受益匪淺，它指明了編碼過程中，需要注意的方方面面，在團隊協作中特別有用，可維護性是一個非常大的話題，這本書是一個不錯的起點。擴展閱讀編寫可維護的歡迎來到石佳劼的博客，如有疑問，請在原文評論區留言，我會盡量為您解答。最近讀完《編寫可維護的JavaScript》，讓我受益匪淺，它指明了編碼過程中，需要注意的方方面面，在團隊協作中特別有用，可維護性是一個非常大的話...

張春雷 2019-08-19 18:30 評論0 收藏0
<<編寫可維護的javascript>> 筆記3(語句和表達式)

摘要：所有的塊語句都應當使用花括號包括花括號的對齊方式第一種風格第二種風格塊語句間隔第一種在語句名圓括號和左花括號之間沒有空格間隔第二種在左圓括號之前和右圓括號之后各添加一個空格第三種在左圓括號后和右圓括號前各添加一個空格我個人喜歡在右括號之后添所有的塊語句都應當使用花括號, 包括: if for while do...while... try...catch...finally 3....

OBKoro1 2019-08-21 12:02 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

李世贊 2019-08-29 14:08 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

MudOnTire 2019-08-21 18:25 評論0 收藏0