摘要：最近閱讀了編寫(xiě)可維護(hù)的，在這里記錄一下讀書(shū)筆記。禁止使用，，，的字符串形式。避免使用級(jí)事件處理函數(shù)。讓事件處理程序成為接觸到對(duì)象的唯一函數(shù)。檢測(cè)函數(shù)是檢測(cè)檢測(cè)函數(shù)的最佳選擇。為特定瀏覽器的特性進(jìn)行測(cè)試，并僅當(dāng)特性存在時(shí)即可應(yīng)用特性檢測(cè)。

最近閱讀了《編寫(xiě)可維護(hù)的 JavaScript》，在這里記錄一下讀書(shū)筆記。書(shū)中主要基于三個(gè)方向來(lái)講解怎么增加代碼的可維護(hù)性：編程風(fēng)格、編程實(shí)踐、自動(dòng)化。

筆記已加入到我的博客里，歡迎 Star。

縮進(jìn)方式

使用空格（推薦）。

使用制表符（Tab 鍵）。

不同的操作系統(tǒng)對(duì)于制表符的解釋不一致，導(dǎo)致看起來(lái)不一致。

命名方式

變量名用名詞。

常量使用大寫(xiě)單詞加下劃線 MAX_NUM。

函數(shù)名用動(dòng)詞開(kāi)頭

構(gòu)造函數(shù)用大駝峰寫(xiě)法。

null 對(duì)象的用法

初始化一個(gè)變量。

和一個(gè)已經(jīng)初始化的變量做比較。

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

函數(shù)返回值是對(duì)象時(shí)，可以當(dāng)做返回值。

// 好的寫(xiě)法
var person = null;

function getPerson(num){

  if (num >5) {
    return new Person("Lily");
  } else {

    // 好的寫(xiě)法
    return null;
  }
}

var person = new Person();

// 好的寫(xiě)法
console.log(person === null);

不要和非對(duì)象，或者未賦值變量做比較。

不要用來(lái)檢測(cè)函數(shù)參數(shù)是否傳入。

var person;

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

function doSomeThing(arr1, arr2){

  // 不好的寫(xiě)法
  if(arr1 === null){
    console.log("arr1 參數(shù)沒(méi)有傳遞");
  }
}

使用注釋的一般原則是：讓代碼變得更清晰。我們一般通過(guò)這幾點(diǎn)來(lái)注釋代碼：

難以理解的代碼。

可能被誤解的代碼。

瀏覽器 hack。

注釋的書(shū)寫(xiě)規(guī)范：

注釋的上方需要一個(gè)空行。

單行注釋，如果在尾部注釋，需要加一個(gè)空格。

多行注釋中的每一行需對(duì)齊，最好也有一個(gè)星號(hào)。

可以加一些注釋聲明。

TODO 代碼未完成。

HACK 代碼走了一個(gè)捷徑，應(yīng)注明原因

FIXME 代碼有問(wèn)題，應(yīng)盡快修復(fù)

REVIEW 代碼的改動(dòng)需要評(píng)審

var person = null;

if (condition) {

  // 做一些事情
  doSomeThing(); // 做一些事情
}

/*
  * 這是創(chuàng)建一個(gè)對(duì)象
  * 第二行
*/
var p = new Person();


/**
@method merge
@param {Object} 被合并的對(duì)象
@return {Object} 一個(gè)新的對(duì)象
**/
function doSomeThing(obj) {
  return Object.assign(obj,{asd:123});
}

// REVIEW: 有更好的寫(xiě)法嗎？
if(document.all){

}

在語(yǔ)句和表達(dá)式一章，書(shū)中主要是寫(xiě)關(guān)于大括號(hào)對(duì)齊方式等，以下兩點(diǎn)讓我影響特別深刻：

循環(huán)中盡可能避免使用 continue，使用條件判斷替代（可讀性更好）。

for in 循環(huán)只是用來(lái)遍歷對(duì)象的，不要用來(lái)遍歷數(shù)組。如果不需要遍歷原型鏈上的對(duì)象，可以使用 hasOwnProperty。

定義變量

合并 var 語(yǔ)句，讓代碼更短。

函數(shù)內(nèi)部的變量定義應(yīng)作為函數(shù)內(nèi)的第一條語(yǔ)句。

for 語(yǔ)句初始化部分不應(yīng)該有變量聲明，應(yīng)提前到外面。

立即執(zhí)行的函數(shù)需要被一眼看出來(lái)，可以將函數(shù)用一堆圓括號(hào)包裹起來(lái)。

嚴(yán)格模式不要加在全局，只應(yīng)加在需要用到的函數(shù)作用域內(nèi)，避免影響其他庫(kù)。

禁止使用 eval，new Function，setTimeOut，setInterval 的字符串形式。

三元運(yùn)算符僅僅用在賦值語(yǔ)句上，不要成為 if else 的替代品。

提示
String 類型可以調(diào)用 String 包裝器的方法，是因?yàn)檎Z(yǔ)句的背后，JS 引擎創(chuàng)建了 String 類型的新實(shí)例，緊跟著就銷毀了，所以給 String 類型上添加屬性和方法是沒(méi)有用的。

在 WEB 開(kāi)發(fā)中，用戶界面是由三個(gè)彼此隔離又相互作用的層定義的：HTML、CSS、JavaScript。由于這三個(gè)部分是相互作用的，應(yīng)該盡量分開(kāi)這幾個(gè)模塊，以增強(qiáng)代碼的可維護(hù)性。

將 JS 從 CSS 中抽離出來(lái)。

避免使用 CSS 表達(dá)式。

將 CSS 從 JS 中抽離出來(lái)。

避免使用 JS 直接操作 dom.style 屬性。

應(yīng)該只需要操作 CSS 的 className 屬性。

將 JS 從 HTML 中抽離出來(lái)。

避免使用 DOM0 級(jí)事件處理函數(shù)。 例如：

使用自定義事件處理函數(shù)。

將 HTML 從 JS 中抽離出來(lái)。

避免 JS 使用寫(xiě)死的 HTML 字符串，去 innerHTML 插入代碼。

div.innerHTML = "
你好
";

JS 可以使用一下幾種方式來(lái)操作 HTML：

請(qǐng)求服務(wù)器，返回一段 HTML 文本，然后 innerHTML。

簡(jiǎn)單客戶端模板，寫(xiě)一個(gè)頁(yè)面不可見(jiàn)的模板，用變量的值去填充模板后，插入到頁(yè)面中來(lái)。

復(fù)雜客戶端模板，使用 Handlebars，創(chuàng)建模板，渲染數(shù)據(jù)。

我們都知道，在全局作用域下定義的變量和方法，都會(huì)掛載到 window 對(duì)象上，隨著對(duì)象越掛越多，項(xiàng)目也就越來(lái)越難以維護(hù)了。創(chuàng)建全局變量還會(huì)導(dǎo)致以下幾個(gè)問(wèn)題：

命名沖突

代碼脆弱性

如果大量函數(shù)都引用了全局變量，而一旦某個(gè)地方不小心改變了值，所有使用的地方就完了。

難以測(cè)試

開(kāi)發(fā)環(huán)境，測(cè)試環(huán)境，線上環(huán)境，都需要引入一套不同的全局變量，不方便維護(hù)。

單全局變量

只使用一個(gè)對(duì)象定義在全局變量上，其他的對(duì)象都作為這個(gè)對(duì)象的屬性和方法。

引用命名空間概念：

調(diào)用 namespace() 來(lái)聲明開(kāi)發(fā)者將要使用的命名空間，即：將對(duì)象掛載到哪個(gè)對(duì)象下，如果不存在，就創(chuàng)建一個(gè)對(duì)象。

AMD 模塊化

定義一個(gè) define 方法，將模塊名，依賴，都傳進(jìn)去，在工廠方法里就能使用所依賴的模塊了。

// AMD 模塊定義
define("module-name",["dep1","dep2"],function(dep1,dep2){});

使用 RequireJS 更好地引入模塊。

RequireJS 增加了另一個(gè)全局函數(shù) require()，專門(mén)用來(lái)加載指定的依賴和執(zhí)行回調(diào)函數(shù)。

require(["my-book"], function(books){
  console.log(books);
});

零全局變量

如果你的腳本非常短，并且不需要和其他代碼產(chǎn)生交互，可以使用一個(gè)自執(zhí)行函數(shù)來(lái)實(shí)現(xiàn)模塊化。

在編寫(xiě)事件處理程序時(shí)，我們應(yīng)該遵守一下幾點(diǎn)：

隔離應(yīng)用邏輯。將應(yīng)用邏輯從所有的事件處理程序中抽離出來(lái)。

不要分發(fā)事件對(duì)象。只傳遞需要的數(shù)據(jù)，給應(yīng)用邏輯就行了。

讓事件處理程序成為接觸到 Event 對(duì)象的唯一函數(shù)。其他需要用到的，就從事件處理程序中傳遞。

實(shí)際應(yīng)用場(chǎng)景是這樣的：

click me

推薦使用 typeof 來(lái)檢測(cè)原始類型的值。typeof 本身是一個(gè)表達(dá)式，所以推薦使用無(wú)括號(hào)的寫(xiě)法。

JS 檢測(cè)自定義類時(shí)，最好的做法是使用 instanceof，這也是唯一的方法。

function Person(){}

var p = new Person():

console.log(p instanceof Person);

instanceof 也可以檢測(cè)引用對(duì)象的值。但可能會(huì)檢測(cè)到原型對(duì)象上。

var now = new Date();

console.log(now instanceof Date); // true
console.log(now instanceof Object); // true

typeof 是檢測(cè) JS 檢測(cè)函數(shù)的最佳選擇。但 IE8 及其以前的瀏覽器對(duì) DOM 上的方法實(shí)現(xiàn)方式有問(wèn)題。

// IE 8 會(huì)存在問(wèn)題
typeof document.getElementById    // object

使用 Object.prototype.toString.call(value) === "[object Array]" 檢測(cè)數(shù)組效果很不錯(cuò)，在 ES6 中可以通過(guò) Array.isArray 來(lái)實(shí)現(xiàn)。

檢測(cè)屬性使用以下兩個(gè)操作符：

in 運(yùn)算符（會(huì)檢測(cè)原型鏈上的屬性）

hasOwnProperty

在實(shí)際的項(xiàng)目中可以遇到這種問(wèn)題，本來(lái)只需要更改一些靜態(tài)數(shù)據(jù)，但由于不小心改到了其他業(yè)務(wù)代碼，導(dǎo)致部分業(yè)務(wù)代碼報(bào)錯(cuò)。所以，把需要配置的靜態(tài)數(shù)據(jù)抽離出來(lái)是非常利于維護(hù)的。一般按照以下幾點(diǎn)將數(shù)據(jù)抽離出來(lái)：

URL

展示給用戶的字符串

重復(fù)的值

設(shè)置信息

任何可能發(fā)生變更的值

我們可以將抽離出來(lái)的配置數(shù)據(jù)放在以下幾個(gè)地方：

抽離數(shù)據(jù)到一個(gè) JSON 文件中。（通過(guò)請(qǐng)求去獲取）

抽離封裝到一個(gè) JSONP 文件中。（通過(guò) script 標(biāo)簽獲?。?/p>

使用純 javascript。（直接讀?。?/p> 拋出自定義錯(cuò)誤

我們?cè)陂_(kāi)發(fā)項(xiàng)目時(shí)，遇到錯(cuò)誤其實(shí)并不可怕，可怕的將這些錯(cuò)誤帶到線上環(huán)境中去。為此，在程序的一些關(guān)鍵地方，使用自定義錯(cuò)誤，可以讓我們?cè)谏暇€前提前發(fā)現(xiàn)問(wèn)題，避免出錯(cuò)的影響變大。編寫(xiě)自定義錯(cuò)誤可以遵守一下幾點(diǎn)：

總是在錯(cuò)誤信息中包含函數(shù)名稱，以及函數(shù)失敗的原因。

只在該拋出錯(cuò)誤的地方拋出錯(cuò)誤，不必要過(guò)度的進(jìn)行錯(cuò)誤預(yù)判，拋出錯(cuò)誤。

如果使用 try catch ，catch 里不能為空，應(yīng)該對(duì)錯(cuò)誤做一些處理。

對(duì)于自定義錯(cuò)誤，最好是繼承 Error 錯(cuò)誤類型，瀏覽器會(huì)給 Error 對(duì)象附加一些額外的信息。

function MyError(message){
  this.message = message;
}
MyError.prototype = new Error();

// 早期瀏覽器不支持 getElementById
if(document.getElementById){
  var dom = document.getElementById("xx")
} else if(document.all){
  var dom = document.all("xx")
}

if(document.getElementsByTagName){
  var dom = document.getElementById("xx")
}

if(document.all){
  console.log("This is IE");
}