Web前端領域，什麼樣的實踐，才是好的處理方式？在《JavaScript高階程式設計》一書中，從三個不同的方面來描述最佳實踐：

1、可維護性
什麼是可維護性的程式碼？那麼它可能需要做到：

可理解性——其他人可接手程式碼並理解其意圖
直觀性——程式碼中的東西一看就能明白，不管其操作過程多麼複雜
可適應性——程式碼一種資料上的變化不要求重寫的方法
可擴充套件性——程式碼在架構上考慮未來對核心功能的擴充套件
可調式性——當有地方出錯時，程式碼給予足夠的提示資訊來確定問題所在
程式碼約定
<1>、可讀性

讓自己的程式碼保證良好的縮排是有必要的

給自己的程式碼寫註釋是有必要的

<2>、變數和函式命名

命名是提高程式碼可讀性的非常重要的一環

命名包括變數名、函式名、class名等等。

變數名應該是名詞，函式名應該是動詞開始。

函式也可分為邏輯功能以及事件。 

<3>、變數型別透明

每申明一個變數，應該給這個變數一個初始值。
var str = '';//代表string型別
var num = 0;//代表number型別
var bool = false;//代表boolean型別

鬆散耦合
<1>、解耦 HTML/JavaScript

一般而言，JavaScript的強大能力，使得它能夠操作DOM，比如它能夠隨意的建立DOM元素、隨意的新增DOM元素到document中。但是這樣的程式碼不僅效能上存在問題，而且可讀性非常差！！！

我們要有的一個思想就是，HTML用來表示介面的內容，而JavaScript只用來定義行為。

<2>、解耦 CSS/JavaScript

JavaScript同樣能用來操作CSS，可是千萬不要這樣做！！除非你是要寫執行函式。

<3>、解耦應用邏輯和事件處理程式

操作dom，我們使用的是事件函式

作為Js，有另外一部分功能是和DOM操作不相關的邏輯，應該單獨隔離出來，封裝成函式。

程式設計實踐
<1>、尊重物件所有權

儘量的不要改變原生物件的方法，如toString()、push()、sort()等等，改變或者重寫的後果，就是合作開發的時候，別人不知道這個方法已經改變，可能就會出錯。

一定不要修改別人的物件，如果這個物件不是你建立並且維護的，那麼你就只有使用的權利。

<2>、避免全域性量

這個很好理解，全域性變數的過多使用，很可能在合作開發的時候造成衝突。如果需要使用，那就用盡可能使用較少的全域性變數。

//使用一個obj可以表示三個變數的功能。
var obj = {
    a,
    b,
    c,
}

<3>、使用常量

你定義一個東西，一定要想，這個東西到底後面會不是被改變，如果不會被改變的話，那就儘量的把它定義成常量，作為一個公共的東西提取出來。

2、保證程式碼效能
保證自己的程式碼效能，是每個web開發人員的基本素養，雖然這方面的東西可量化的地方不多，但還是有一些比較好的程式設計模式值得去借鑑：

注意作用域
<1>、避免全域性查詢

使用全域性變數的函式，一定要比使用區域性變數的函式的開銷更大，因為要涉及到作用域鏈上的查詢。

function updateUI(){
    var imgs = document.getElementsByTagName("img");
    var obox = document.getElementById("box");
}

這樣的函式，呼叫了兩次document，也就是自己在作用域鏈上查找了兩次。

function updateUI(){
    var doc = document;//這裡只調用一次document。
    var imgs = doc.getElementsByTagName("img");
    var obox = doc.getElementById("box");
}

避免多次的全域性作用域查詢，在程式設計實踐中，是很有必要的。

<2>、避免使用with語句 
with語句的使用，會有額外的作用域鏈的開銷。

選擇正確方法
<1>、避免不必要的屬性查詢 
多層的屬性查詢的代價會很大，比如這個的示例：

var query = window.location.href.substring(window.location.href.indexof("?"));
兩次使用window.location.href，這樣還不如這麼寫：

var url = window.location.href;
var query = url.substring(url.indexof("?"));

這樣的方式，效能明顯更高。

<2>、優化迴圈

大多數迴圈是從0開始，但是很多情況下，從最大值開始，進行減值迭代的效果明顯更高。

var list = document.getElementsByTagName('li');
for(var i = 0; i < list.length; i++){
    //code
}

上面的for迴圈每次都要重新計算list的長度，這就存在效能問題，所以在for迴圈中，我們有一種說法是——優化終止條件。 
下面的寫法可能會好一點：

var list = document.getElementsByTagName('li');
for(var i = 0,len = list.length; i < len; i++){
    //code
}

有時候，一些迴圈是沒有必要的，我們增加一些if判斷，可能要減少很多無用操作。

<3>、避免雙重解釋 
JavaScript程式碼想解析JavaScript的時候會存在雙重解釋懲罰。

當使用eval()、Function()建構函式、setTimeout()的時候，傳入一個字串，都會發生這種情況。

原因就是JavaScript解析這些字串是需要重新開啟一個解析器來解析新的程式碼。（這是不容忽視的開銷）。

eval("alert('hello world!')");//一定要避免

最小化語句數
var i = 0,j,k;
var i = 0；
var j；
var k；

這兩個申明變數的方式相比，第一是一個申明變數的語句，第二個是三個申明變數的語句。

優化DOM互動
<1>、最小化現場更新 
大量的dom操作是造成頁面效能的最大幫凶，比如多次向頁面新增元素。特別是在for迴圈中！！！ 
使用文件片段來構建DOM結構，可能是一個好方法。

var fragment = document.createDocumentFragment();
for(var i = 0; i < 10; i++){
    item = document.createElement('li');
    fragment.appendChild(item);
    item.appendChild(document.createTextNode('Item'+i));
}
list.appendChild(fragment);

<2>、使用innerHTML

把innerHTML設定為某個值的時候，後臺會自動建立一個HTML解析器，然後使用內部的DOM呼叫來建立DOM結構。

<3>、使用事件代理 
一個ul列表，給新增一個點選事件，儘量別for迴圈新增。使用事件代理的方式，新增到ul上效能會好很多。

原文：https://blog.csdn.net/mapbar_front/article/details/78635412