幾個月之前我接到一個新的開發任務，要在一個舊的Web頁面上面增添一些新的功能。在開發的過程中發現舊的代碼中有很多常見的不合適的寫法，結合這些問題，如何寫出更好的，更規范的，更可維護的代碼，就是這篇文章要闡述的內容。
首先我查看了該Web頁面的HTML代碼，發現了一些典型的問題：
- HTML頁面中包含了很多Javascript和CSS代碼
- HTML頁面中引用了大量的外部Javascript文件和CSS文件
接下來就這些問題，我們逐個討論一下：
HTML頁面中包含了很多Javascript和CSS代碼
一個正常的Web頁面通常有以下三部分組成，HTML，CSS，Javascript，其中HTML是數據，CSS負責樣式，而Javascript負責交互，三者的關系如下圖：
在構建Web頁面的過程中，要盡量讓這三者保持松耦合的關系，不要牽一發而動全身，一個層面小的改動需要改動另外兩個層面。首先要從文件級別上隔離這三部分，在HTML中通過引入文件的方式導入Javascript和CSS。
要做到三者的松耦合，開發中需要注意的地方又如下幾點：
- 在CSS代碼中不要包含Javascript
- 在Javascript代碼中不要包含CSS
- 在HTML代碼中不要包含Javascript
- 在Javascript中不要包含HTML
CSS代碼中不要包含Javascript，指的是在CSS代碼中慎用可計算的樣式，如IE 8的 expression，CSS3的calc等等，從使用角度來講全是很強大，從代碼維護的角度來看，不推薦使用。出現了Bug的時候，需要同時Check Javascript和CSS代碼。
Javascript代碼中不要包含CSS，我們經常需要在Javascript中去動態改變某一個Dom元素的樣式，經常寫出如下代碼：
element.style.color = 'red';
這樣的代碼會導致當需求改變的時候，需要在Javascript代碼中全文檢索 red 關鍵字，深怕漏掉一點。推薦的做法如下：
//在CSS文件中定義樣式類型 .red-class{ color: red; } //Javascript中改變樣式 element.className += " red-class"; // jQuery $(element).addClass("red-class");
在Javascript中操縱Dom對象的Class來改變樣式，需求改變的時候，只需要調整CSS文件就可以了。
HTML代碼中不要包含Javascript:
<input type="button" value="click me" id="mybutton" onclick="do()"/>
推薦使用下面的代碼：
var btn = document.getElementById('mybutton'); btn.addEventListener("click", do);
Javascript代碼中不要包含HTML：
var div = document.getElementById("my-div"); div.innerHTML = "<h3>Error</h3><p>Invalid e-mail address.</p>";
在Javascript代碼中完全隔絕HTML很難，這一點可以根據實際情況來權衡使用。Javascript 模版技術就是一種有效隔離HTML和Javascript代碼的手段，如下是jQuery Template的用法：
// HTML <script id="bookTemplate" type="text/x-jQuery-tmpl"> <div> <img src="BookPictures/${picture}" alt="" /> <h2>${title}</h2> price: ${formatPrice(price)} </div> </script> // Javascript // Create an array of books var books = [{ title: "ASP.NET 4 Unleashed", price: 37.79, picture: "AspNet4Unleashed.jpg" }]; // Render the books using the template $("#bookTemplate").tmpl(books).appendTo("#bookContainer"); function formatPrice(price) { return "$" + price.toFixed(2); }
HTML頁面中引用了大量的外部Javascript文件和CSS文件
HTML頁面中引用了大量的外部Javascript文件和CSS文件，我們知道每一個引用外部文件的<script>或者<style>都會引起一個HTTP請求，而一個HTTP請求的代價其實是很高昂的，下圖是HTTP請求的整個過程：
首先要通過DNS Server把域名變為IP，然后在瀏覽器與服務器之間建立TCP鏈接，建立TCP鏈接之后，瀏覽器向服務器發送HTTP請求，服務器處理完請求后，將結果返回給瀏覽器，最后關閉TCP鏈接。整個HTTP的請求的代價還是很大的，更多關於HTTP和TCP的信息，請參考：http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol，http://en.wikipedia.org/wiki/Transmission_Control_Protocol。
另外瀏覽器對於HTTP請求的並發數量是有限制的，每個瀏覽器不等，基本在4個左右。
當HTML頁面中引用了大量的外部Javascript文件和CSS文件，我們可以考慮通過合並以及壓縮Javascript，CSS文件來達到減少HTTP請求數量，以及HTTP結果的目的。
Grunt是一個基於任務的JavaScript項目命令行構建工具，通過Grunt可以將多個文件合並成一個文件，並且進行壓縮處理。Grunt沒有開發平台的限制，只要是前端項目，都可以使用Grunt來配置任務。Grunt有着廣泛的社區支持，有很多的現有的插件。
另外如果你是ASP.NET的項目的話，ASP.NET 4.5加入了Bundle，通過Bundle技術合並壓縮Javascript和CSS。關於Bundle技術可以參考 http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification。
Javascript代碼全局變量
看完了HTML代碼之后，又過了一下頁面主要的Javascript代碼，發現的問題主要是Javascript代碼引入了太多的全局變量。JavaScript全局變量在很小的程序中可能會帶來方便，但隨着程序越來越大，它很快變得難以處理。因為一個全局變量可以被程序的任何部分在任意時間改變，使得程序的行為被極大地復雜化。在程序中使用全局變量降低了程序的可靠性。
定義Javascript的方式有三種：
// 在所有函數外部使用var定義變量 var foo = 10; // 沒有使用var，直接聲明變量 foo = 10; window.foo = 10;
其中第二種隱式的聲明了全局變量，尤其需要注意。
我們應該盡量少的引入全局變量，jQuery也不過提供了兩個全局變量：$, jQuery。那么有沒有可能在注入Javascript到HTML頁面之后，實現零個全局變量的引入？
通過立即執行函數可以達到這一點，參見下面的代碼：
(function(win) { "use strict"; var doc = win.document; // declare other variables here // other code goes here }(window));
如果你需要將該對象返回，可以使用如下的方式：
var module1 = (function(){ var _count = 0; var m1 = function(){ //... }; var m2 = function(){ //... }; return { m1 : m1, m2 : m2 }; })();
這樣的話只會引入一個全局變量 module1，而且該對象具有很好的封裝性，其內部變量“_count”，在外部是無法訪問的。 整個頁面其實也還有一些其他小的問題，在這里就不一一贅述了。 說了半天老代碼的問題，其實沒有對老代碼有任何偏見，因為不論它是否美丑，都在為系統服務，都在產生價值。我們只是在追求更好的代碼，更可讀，更易維護的代碼。