一個Web頁面的問題分析

標籤：style   blog   http   color   io   os   使用   java   ar   

一個Web頁面的問題分析

幾個月之前我接到一個新的開發工作單位，要在一箇舊的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}"  />            <h2>${title}</h2>            price: ${formatPrice(price)}        </div> </script>// Javascript// Create an array of booksvar 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”，在外部是無法訪問的。

整個頁面其實也還有一些其他小的問題，在這裡就不一一贅述了。

說了半天老代碼的問題，其實沒有對老代碼有任何偏見，因為不論它是否美醜，都在為系統服務，都在產生價值。我們只是在追求更好的代碼，更可讀，更易維護的代碼。

一個Web頁面的問題分析