本文來自 Isobar公司的 github repo
中文版翻譯： @老碼農的自留地

概述

本文檔包含了Isobar公司的創意技術部（前端工程）開發web應用的規範。現在我們把它開放給任何希望瞭解我們迭代過程最佳實踐的人。

編寫本文檔的主要驅動力是兩方面： 1) 代碼一致性以及 2) 最佳實踐。通過保持代碼風格和傳統的一致性，我們可以減少遺留系統維護的負擔，並降低未來系統崩潰的風險。而通過遵照最佳實踐，我們能確保優化的頁面加載、性能以及可維護的代碼。

總體指導原則◊

前端開發核心思想◊

總體原則◊

縮進◊

對於所有編程語言，我們要求縮進必須是軟tab（用空格字符）。在你的文本編輯器裏敲 Tab 應該等於 4個空格 。

可讀性 vs 壓縮◊

對於維護現有文件，我們認爲可讀性比節省文件大小更重要。大量空白和適當的ASCII藝術都是受鼓勵的。任何開發者都不必故意去壓縮HTML或CSS，也不必把Javascript代碼最小化得面目全非。

我們會在服務器端或build過程中自動最小化並gzip壓縮所有的靜態客戶端文件，例如CSS和JS。

標記◊

任何網頁的首要組件就是基於標籤的HTML標記語言。超文本標記語言 (HTML) 曾有一段不堪回首的歷史，但最近幾年已經是 皇上回宮 了。經過對它基於XML的XHTML變種的漫長試驗之後，整個行業終於接受了HTML代表web的未來這一事實。

標記定義了文檔的結構和綱要，並提供結構化的內容。除了最基本的概念（例如標題、段落和列表）之外，標記並不是用來定義頁面上內容的外觀和體驗的。HTML的表現屬性都已經被廢棄了，有關樣式的定義應該被包含在樣式表中。

HTML5◊

HTML5 是HTML 和 XHTML 的新版本。在 HTML5 草案的規範中定義了可以用 HTML 和 XML編寫的單一的語言，意在解決在之前HTML的迭代中發現的一些問題並滿足web應用的需求，這是以前HTML沒有充分覆蓋到的領域（來源）。

在合適的時候，我們會使用HTML5 Doctype 和 HTML5 特性。

我們會對照 W3C 校驗器測試我們的標記，以確保標記是結構良好的。我們的目標並不是100%的合法代碼，但是校驗肯定對於編寫可維護的站點以及調試代碼都大有幫助。 Isobar公司不保證代碼都是100%合法，而是確信跨瀏覽器體驗會相當一致 。

模板◊

對HTML5文件，我們使用 H5BP 針對我們自己項目需求修改的一個分支。你也可以從這裏Fork H5BP。

Doctype◊

標記中必須總是使用合適的Doctype來指示瀏覽器觸發標準模式. 永遠要避免Quirks模式。

HTML5特別好的一個方面就是它簡化了Doctype需要的代碼。無意義的屬性被棄用了，DOCTYPE 聲明也被顯著地簡化了。另外，也無需再用 CDATA 對內聯JavaScript代碼進行轉義，而這在此之前爲了讓XHTML符合XML的嚴密性是必需的。

HTML5 Doctype

1.<!DOCTYPE html>

字符編碼◊

所有標記必須通過UTF-8編碼傳遞，因爲這種編碼方式是對國際化最友好的。必須在HTTP的header和HTML文檔的head部分都指定這種編碼。

設定字符編碼是通過 <meta> 標籤進行。

1.<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8"
/>

如果是HTML5，則只需要寫：

1.<meta
charset="utf-8">

標記的總體原則◊

下面是編寫HTML標記的總體原則。提醒大家一點，在創建的HTML文檔裏總是要使用能夠代表內容語義的標記。

段落分隔符要使用實際對應的<p>元素，而不是用多個<br>標籤。
在合適的條件下，充分利用<dl> （定義列表）和<blockquote> 標籤。
列表中的條目必須總是放置於<ul>、<ol>或<dl> 中，永遠不要用一組 <div>或<p> 來表示。
給每個表單裏的字段加上 <label> 標籤，其中的 for 屬性必須和對應的輸入字段對應，這樣用戶就可以點擊標籤。同理，給標籤加上 cursor:pointer; 樣式也是明智的做法。 ^{討論 1

討論 2}
不用使用輸入字段中的 size 屬性。該屬性是和輸入字段裏文本的 font-size 相關的。應該使用CSS寬度。
在某些閉合的 </div> 標籤旁邊加上一段html註釋，說明這裏閉合的是什麼元素。這在有大量嵌套和縮進的情況下會很有用。
不要把表格用於頁面佈局。
在合適的條件下，利用 microformats 和/或者 Microdata ，具體說是 hCard 和 adr。
在合適的條件下，利用 <thead>、<tbody>和<th>標籤 (以及Scope屬性）。

具備恰當語法結構(THEAD,TBODY,TH [scope])的 Table 標記

<table
summary="This is a chart of year-end returns for 2005.">
    <thead>
        <tr>
            <th
scope="col">Table header 1</th>
            <th
scope="col">Table header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table
data 1</td>
            <td>Table
data 2</td>
        </tr>
    </tbody>
</table>

對於頁眉和標題，永遠使用首字母大寫格式。不要在標記中使用全部大寫或小寫的標題，而是應用CSS屬性 text-transform:uppercase/lowercase 。

屬性加引號◊

在HTML5規範裏並沒有嚴格要求屬性值兩邊加引號。但考慮到一些屬性可以接受空白值，爲了保持一致性，我們要求所有屬性值必須加上引號。

1.<p
class="line note"
data-attribute="106">This is my paragraph of special text.</p>

CSS◊

網頁的第二個組件就是在層疊樣式表（CSS）中包含的表現信息。Web瀏覽器成功實現CSS後，整整一代web開發者對他們網站的外觀和體驗擁有了全部的控制權。

正如網頁信息在語義方面由 HTML 標記描述， CSS 從表現方面則是通過對視覺屬性的定義來描述網頁。 CSS 的強大之處在於，這些屬性可以混合並通過各種標示符匹配，它可以通過樣式規則的分層（”層疊“）來控制頁面的佈局和視覺特徵。

編碼總體原則◊

從外部文件加載CSS，儘可能減少文件數。加載標籤必須放在文件的 HEAD 部分。
用 LINK 標籤加載，永遠不要用@import。
加載樣式表

1.<link rel="stylesheet" type="text/css" href="myStylesheet.css" />

不要用內聯式樣式

1.<p style="font-size: 12px; color: #FFFFFF">This is poor form, I say</p>
不要在文件中用內聯式引入的樣式，不管它是定義在樣式標籤裏還是直接定義在元素上。這樣會很難追蹤樣式規則。
使用 normalize.css 讓渲染效果在不同瀏覽器中更一致。
使用類似 YUI fonts.css 的字體規格化文件。
定義樣式的時候，對樣式在頁面只出現一次的元素用id，其他的用class。
理解層疊和選擇器的明確度，這樣你就可以寫出非常簡潔且高效的代碼。
編寫性能優化的選擇器。儘可能避免使用開銷大的CSS選擇器。例如，避免 * 通配符選擇器，也不要疊加限定條件到 ID 選擇器（例如 div#myid）或 class 選擇器（例如 table.results）上。這對於速度至上幷包含了成千上萬個DOM元素的web應用來說尤爲重要。更多相關內容請參閱 MDN 上的這篇《編寫高效CSS》。

CSS盒子模型◊

深入學習和理解CSS及基於瀏覽器的盒子模型，對於掌握CSS佈局的基礎是非常必要的。

3D CSS 盒子模型示意圖，由 Jon Hicks 繪製。

CSS 校驗◊

我們一般不用 W3C 校驗器。

CSS 格式◊

最低要求：選擇器單獨佔一行，每個屬性佔一行。屬性聲明要有縮進。

作爲提高的要求，關聯或孩子樣式要增加2-4個空格的縮進。這樣有利於分層查看和組織，產生（對某些人來說）可讀性更好的樣式表。

另外，在給一個樣式指定多個選擇器的時候，把每個選擇器單獨放一行是個好主意。這樣可以避免一行變得太長，也能提高可讀性及版本控制流程。

.post-list li a{
    color:#A8A8A8;
}
    .post-list li a:hover{
        color:#000;
        text-decoration:none;
    }
    .post-list li .author a,
    .post-list li .author a:hover{
         color:#F30;
         text-transform:uppercase;
    }

在多個開發者協作環境下，避免用單行CSS格式，因爲這樣會給版本控制帶來問題。

字母排序◊

如果你對性能情有獨鍾，對CSS屬性進行字母排序有利於在GZIP壓縮中識別大量可重複的特徵。

Classes vs. IDs◊

對於所用的樣式只出現一次的元素，給它設一個id屬性。這個屬性只會應用於該元素，不會用到其他地方。Class屬性則可以用到多個具有相同樣式屬性的元素上。具有相同外觀和表現的元素可以具有相同的class名。

1.<ul
id="categories">
2.    <li
class="item">Category 1</li>
3.    <li
class="item">Category 2</li>
4.    <li
class="item">Category 3</li>
5.</ul>

選擇器命名的慣例◊

無論是 ID 還是 class，對任何東西最好總是根據 它是什麼 而不是 它看上去是什麼樣子 來命名。比如一個頁面上的特別提示的 class 名是 bigBlueText （大藍字），可它的樣式早就被改成紅色小字體，這個名字就沒意義了。使用更聰明的慣例如 noteText （提示文字）就好多了，因爲即使視覺樣式改變了，它也還是管用的。

選擇器◊

CSS3 選擇器規格引入了一整套對於更好地選擇元素極其有用的 CSS 選擇器。

僞類◊

僞類使你能動態地修飾網頁內容的樣式。有些僞類從CSS1 （:visited, :hover等）和 CSS2 （:first-child, :lang）那時候開始就有了。CSS3又往列表里加入了16個新的僞類，這些僞類對於動態地修飾網頁內容的樣式特別有用。學習如何深度使用僞類。

組合及屬性選擇器◊

組合選擇器提供了爲特定元素選擇其後代元素、孩子元素或兄弟元素的快捷方式。

屬性選擇器適用於具有特定屬性和/或特定值的元素。正則表達式的知識對屬性選擇大有幫助。

明確度◊

瀏覽器會通過計算選擇器的明確度來決定應用哪個CSS規則。如果兩個選擇器都適用於同樣的元素，具有更高明確度的那個會勝出。

ID 選擇器比屬性選擇器明確度高，class 選擇器比任何數量的元素選擇器明確度高。儘量使用 ID 選擇器來提高明確度。有時候我們可能會想方設法給一個元素應用一條CSS規則，但用盡方法也不能如願。這種情況有可能是因爲我們使用的選擇器比另外一個的明確度低，所以明確度高的另一個選擇器裏的屬性就比我們想應用的選擇器優先了。這種情況在更大或更復雜的樣式表裏更爲常見。在小一些的項目裏，通常這不是大問題。

計算明確度◊

當你在一個很大很複雜的樣式表上幹活的時候，知道如何計算選擇器的明確度會有很大幫助，會節約你的時間，並讓你的選擇器更有效率。

明確度的計算方式是對你的CSS的各種組件計數，並用 (a,b,c,d) 格式表達出來。

元素，僞元素: d = 1 – (0,0,0,1)
類，僞類，屬性: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
內聯樣式: a = 1 – (1,0,0,0)

不過，也許使用現成的明確度計算器更好一些。

使用 !important 會覆蓋掉所有的明確度，不管它有多高。因此我們傾向於避免使用它。大部分時候是沒必要用它的。即使你需要覆蓋某個你訪問不到的樣式表裏的選擇器，往往也會有其他的辦法去覆蓋。儘可能避免使用它。

像素 vs. Em◊

我們使用 px 作爲定義 font size 的度量單位，因爲它能提供對文本的絕對控制。我們知道爲字體大小使用 em 單位一度很流行，這樣可以解決 IE6 無法改變基於像素的文本大小的問題。不過，現在所有的主流瀏覽器（包括 IE7 和 IE8）都支持基於像素單位的文本大小和/或整頁縮放。既然 IE6 被廣泛認爲已廢棄，用像素定義文本尺寸更好。另外，無單位的 line-height 也應該優先考慮，因爲它不會從父元素繼承一個百分比值，而是基於 font-size 的一個乘數。

正確

#selector {
    font-size:
13px;
    line-height:
5;  /*  13 * 1.5 = 19.5 ~ Rounds to 20px. */
}

不正確

/*  Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px.
*/
#selector {
    font-size:
813em;
    line-height:
25em;
}

IE Bugs◊

不可避免地，當所有其他瀏覽器看起來都正常工作的時候，各種版本的IE瀏覽器就會冒出一些莫名其妙的bug，讓部署一拖再拖。雖然我們鼓勵排除問題，產出無需打補丁就能在所有瀏覽器上運行的代碼，有時候爲了在樣式表中使用CSS鉤子，還是有必要用到CSS if IE 條件註釋。從 paulirish.com 瞭解更多信息。

修復 IE

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<body>
<!--<![endif]-->

1..box {
float: left;
margin-left: 20px; }
2..ie6
.box { margin-left:
10px; }

如果你在用HTML5（以及 HTML5 Boilerplate），我們推薦使用 Modernizer JavaScript庫和下列模式：

<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html
class="no-js"
lang="en"><!--<![endif]-->

速記格式◊

一般情況下要優先使用CSS速記格式，一是因爲它的簡潔，二是用它也可以擴充已有的值，例如margin和padding的情況。開發者必須注意TRBL 縮寫，它表示元素的各邊按順時針方向定義的順序：上、右、下、左。如果bottom沒有定義，它就會從top繼承值。同理，如果left未定義，它從right繼承值。如果只有top的值有定義，所有的邊都會繼承那一個值。

下面是關於減少樣式表代碼冗餘和使用CSS速記格式的更多內容：

圖片◊

對於（用於背景的）重複圖片，要使用比 1×1 像素大的圖片
永遠不要用空白圖片。
多使用 CSS精靈（sprites）。它會使懸停狀態更簡單，改善頁面加載速度，並減少二氧化碳的排放。
一般情況下，所有的圖片都應該切成帶透明背景（PNG8），並裁減成緊密貼合圖片外邊框。
- 不過，logo必須總是帶有背景遮片，並在裁減內容之外留出內邊框。

顏色管理◊

確認團隊所有成員都有一致的顏色管理設置。
- 任意兩臺顯示器顯示的顏色很可能會有所不同，但必須使用sRGB顏色作爲缺省配置。
- 當你在Photoshop打開文件時，要注意顏色配置警告，當Photoshop建議把圖片轉換到另一個配置時，要通知其他團隊成員。
永遠不要把顏色配置嵌入到圖片裏。
- 當你從Photoshop保存圖片時，務必去掉”Embed Color Profile”選項的勾選。

通用的文本和字體樣式◊

標題◊

要給 h1-h6 標題 — 包括作爲鏈接的標題 — 定義缺省樣式。在你的CSS文檔頂部定義它們，在必要時修改它們以保持整個站點的一致性。
標題必須有層次，能表明從大到小不同級別的重要性，h1具有最大的字體大小。
SEO：要大致地瞭解頁面的層次組織和閱讀效果，在開發者工具裏關閉CSS效果，你會看到一個基於文字的視圖，包括所有的 h1-h6 ， strong， em 等標籤。

鏈接◊

必須定義鏈接的缺省樣式，樣式要和主要的文字樣式不同，載懸停狀態下也要有不同的樣式。
當給鏈接加下劃線樣式時，使用 border-bottom 並用 text-decoration: none; 加點內邊框。這樣看起來更好一些。

JavaScript◊

JavaScript 是網頁的第三個主要部件。在網頁上適當地應用JavaScript 代碼，通過綁定事件和控制整體行爲層，能夠增強整體的用戶和基於瀏覽器的體驗。

隨着功能強勁的新瀏覽器撐起基於瀏覽器的完整web應用，JavaScript 在近年的流行度爆棚。另外，對Javascript的細緻運用爲全面操控另外兩個部件 — HTML 標記和 CSS — 提供了手段。現在，在無需刷新整個頁面的情況下，頁面結構和頁面視覺樣式都可以被實時操控。

JavaScript庫◊

我們開發新應用主要會用到 jQuery，不過我們對原生 JavaScript 和所有現代 javascript 庫也具有專業經驗。

編碼總體原則◊

99%的代碼必須封裝在外部Javascript文件中。這些文件必須在 BODY 標籤的尾部引入，讓頁面的性能最大化。
不要依賴於 user-agent 字符串。進行適當的特性檢測. （更多信息參見深入 HTML5：檢測和 jQuery 支持文檔）
不要使用 document.write()。
所有布爾變量的命名必須用 “is” 開頭
對正條件的測試

1.isValid = (test.value >= 4 && test.success);
給變量和函數的命名要有邏輯意義：例如： popUpWindowForAd 就比 myWindow 好多了。
不要人爲縮短命名到最小。除了傳統的 for 循環中的計數器 i 等簡化的情況，變量命名必須長到有明確意義。
文檔必須遵循 NaturalDocs 結構。
常量或配置變量（例如動畫持續時間等）必須放在文件的頂部。
盡力編寫可通用化的函數，讓它接受參數並返回值。這樣有利於充分的代碼重用，而且一旦與引入及外部腳本配合起來，能在腳本需要修改時減少開銷。例如，相比硬編碼一個帶有窗口大小、選項和url的彈出式窗口，不如編寫一個接受大小、url和選項作爲變量的函數。
給代碼添加註釋！這會有利於減少在調試Javascript函數上花費的時間。
不要把時間浪費在用  給你的內聯Javascript加註釋上，除非你還在關注 Netscape 4。 :)
把你的代碼組織成一套對象常量/單例，按照模塊化模式，或做成帶構造器的對象。
最小化全局變量 – 你創建的全局變量越少越好。一般來說，用於你的應用命名空間，1會是個好的數字。
在描述任何全局變量的時候要明確指認。

1.window.globalVar = { ... }

留空◊

總的來說，使用留空應該遵循源遠流長的英語閱讀慣例。例如，每個逗號和冒號（以及適用的分號）後面要空一格，但在括號內部的左側和右側都不要加空格。另外，大括號應該總是和他們前面的參數出現在同一行。

來看看下面的 JavaScript for循環的例子…

正確

1.for
(var 
i = 0, j = arr.length; i < j; i++) {
2.    // Do something.
3.}

不正確

1.for
( var 
i = 0, j = arr.length; i < j; i++ )
2.{
3.    // Do something.
4.}

也不正確

for(var
i=0,j=arr.length;i<j;i++){
    // Do something.
}

plugins.js 和 script.js◊

從 H5BP 開始我們看到了兩個文件， plugins.js 和 script.js。本節概述這兩個文件的基本用法。

plugins.js◊

Plugins.js 的用處是存放網站的所有插件代碼。相比鏈接到很多不同的文件，我們可以把插件代碼統一放到這個文件裏，從而改善性能。這種用法會有也應該有例外。例如，一個超級大的插件，又只是用在一個很少被訪問到的頁面上，放在單獨的一個下載鏈接裏就會更好，這樣只會在目標頁面被打開的時候纔會被訪問。不過，大部分情況下，直接把所有插件的最小化版本粘貼到這裏以便訪問是靠譜的。

下面就是一個樣例文件，包括一個小目錄。它可以作爲所用到插件的隨身指南，包括文檔URL，使用它們的思路，諸如此類。

/* PLUGIN DIRECTORY
本文件中出現的插件 [按出場順序排序]
 
       1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect
       2.) jQuery Easing Plugin - http://gsgd.co.uk/sandbox/jquery/easing/
       3.) jQuery Ajax Form plugin - http://jquery.malsup.com/form/#download           
       4.) jQuery validation plugin (form validation) - http://docs.jquery.com/Plugins/Validation
           -password strength
       5.) Styled Selects (lightweight) - http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
*/
 
/**
* 1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect
* @author Alexander Farkas
* v. 1.21
*/
(function($) {
   if(!document.defaultView || !document.defaultView.getComputedStyle){
// IE6-IE8
   //SNIPPED
   };
})(jQuery);
 
 
/**
* 2.) jQuery Easing Plugin (we're not using jQuery UI as of yet) - http://gsgd.co.uk/sandbox/jquery/easing/
*/
 
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
 
jQuery.extend( jQuery.easing,
{
   //SNIPPED
    
});
;(function($) {
   $.fn.ajaxSubmit =
function(options) {
   //SNIPPED
   }
})(jQuery);
 
/*
* jQuery Styled Select Boxes
* version: 1.1 (2009/03/24)
* @requires jQuery v1.2.6 or later
*
* Examples and documentation at: http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
*
* Copyright (c) 2008 Lasar Liepins, liepins.org, [email protected]
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
*/
 
jQuery.fn.styledSelect =
function(settings) {
//SNIPPED
       return
this;
};

Script.js◊

Script.js 的用處是存放網站或應用的代碼代碼。再次說明，這種方式並不總是最佳解決方案，因爲更大的團隊和/或規模更大、功能更多的項目可以得益於將應用代碼分解爲模塊或功能特性相關的文件。不過，對於較小較簡單的應用，以及最初的原型開發，把所有工作集中到 scripts.js 還是靠譜的。

下面是一個簡化了的例子，用到了基於標記的低調全面的DOM-ready執行模式（【譯者注】這裏的‘低調’原文是Unobtrusive ，是一種將Javascript從HTML結構抽離的設計概念，避免在HTML標籤中夾雜一堆onchange、onclick……等屬性去掛載Javascript事件，讓HTML與Javascript分離，依MVC的原則將功能權責清楚區分，使HTML也變得結構化容易閱讀。），看起來會類似於這樣：

/* Name: Demo
Author: Demo King */
/*demo namespace*/
demo = {
 common : {
   init     :
function(){
       //initialize
   },
   finalize :
function(){
       //finalize
   },
   config : {
       prop :
"my value",
       constant :
"42"
   }
 },
 mapping : {
   init     :
function(){
       //create a map
   },
   geolocate    :
function(){
       //geolocation is cool
   },
   geocode :
function(){
       //look up an address or landmark
   },
   drawPolylines :
function(){
       //draw some lines on a map
   },
   placeMarker :
function(){
       //place markers on the map
   }
 }
}

變量，ID 及 class◊

所有的 JavaScript 變量必須寫成全小寫或駝峯法。一個例外是構造器函數，按慣例是首字母大寫。所有CSS裏的 id 和 class 聲明都必須只用小寫。不允許用連接符或下劃線。

事件代理◊

在分配低調（unobtrusive）的事件監聽器時，通常可接受的做法是把事件監聽器直接分派給那些會觸發某個結果動作的元素。不過，偶爾也會有多個元素同時符合觸發條件，給每個元素都分配事件監聽器可能會對性能有負面影響。這種情況下，你就應該改用事件代理了。

從性能角度考慮，jQuery的 delegate() 優於 live()。

調試◊

即使採用了最好的校驗器，瀏覽器的怪異性也會不可避免地產生一些問題。有幾個堪稱無價之寶的工具可以幫助優化代碼的健全性和加載速度。很重要的一點是，你手頭準備好了這些工具，不管你主要用來開發的瀏覽器是哪個。我們推薦先在Firefox和Safari上做開發，然後用Google Chrome和Opera，最後針對IE用條件判斷做一些額外的微調。下面列出的是一些有幫助的調試器和速度分析器：

Firefox: Firebug, Page Speed, YSlow
Safari: Web Inspector
Google Chrome: Developer Tools
Opera: Dragonfly
Internet Explorer 6-7: Developer Toolbar
Internet Explorer 8-10: Developer Tools

優化 JavaScript 的特徵◊

編寫可維護的代碼
單變量模式
Hoisting：把所有變量聲明統一放到函數的起始位置（在後部聲明的變量也會被JS視爲在頭部定義，由此會產生問題）
不要擴充內置原型（雖然給Object(), Function()之類的內置原型增加屬性和方法很巧妙，但是會破壞可維護性）
不要用隱含的類型轉換
不要用 eval()
用 parseInt() 進行數字轉換
（規範）左大括號的位置
構造器首字母大寫
寫註釋
不要用 void
不要用 with 語句
不要用 continue 語句
儘量不要用位運算

Stoyan Stefanov 的博文包含了以上原則並有詳細說明（【譯者注】這篇博文值得一看）。

易用性◊

美國政府相關法規508節：局域網和互聯網信息及應用標準。

— 本公司開發的接口必須符合相關法規508節的要求。

W3C 的易用性檢查點清單。

— 本公司開發的接口必須符合第一優先級指南。

— WCAG 1.0 指南。

性能◊

當我們持續把web的能力發揮到極致的時候，讓網頁在最小開銷或等待時間下可用依然是同樣重要的問題。下面的章節說明如何優化網頁使用戶滿意。

優化CSS 和 Javascript傳輸◊

在生產環境傳輸CSS和Javascript，必須採用很多優化措施：

遵循 Yahoo 性能指南
使用 smush.it 對圖片進行無損壓縮優化。還有，用 YSlow 可以把你所有的圖片自動壓縮（【譯者注】YSlow不僅僅提供性能優化工具，還詳細說明了性能優化的34條規則，例如不要用CSS表達式、不要用空白的src或href、使用CDN、緩存AJAX響應、不要用過濾器、減少DOM元素數量等等）。
不要在HTML中寫內聯腳本 <script> 塊。它們會阻塞頁面渲染操作，對頁面加載時間帶來破壞性的影響。
適當地設置緩存標題。
針對靜態資源，考慮單獨配置一個無cookie的子域。
CSS 必須放在文檔的 <head> 部分, Javascript 必須正好放在 </body> 標籤的前面。
CSS 和 JavaScript 都必須以最小化方式加載。大部分人會使用 YUI 壓縮器做這件事。
CSS 和 JavaScript 都必須以gzip形式傳輸。
CSS 必須串接在一起。顯然，只有具備相同媒體類型（例如屏幕或打印）的文件才能合在一起。這裏的總體目標是在加載頁面的時候減少因爲依賴關係而產生的HTTP連接數。
JavaScript 必須串接在一起。雖然用一個AJAX腳本依賴性管理器（類似於 YUI 3 Loader）可能會比較理想，但實施起來還是挺複雜的。在這裏我還是想推薦單次下載站點用到的所有腳本。（當然了，適當的緩存也是必需的，這樣可以讓文件在合理的時間內儘可能保持在本地）。
串接和最小化通常發生在自動build的過程中，這時候要把代碼打包用於發佈或生產。有很多人用一些工具做這件事，例如 Ant 或 Maven 。

優化 JavaScript 執行◊

在頁面加載的時候，通常會有很多腳本等待執行，但你可以設定優先級。下面的順序就是基於用戶反饋設定的優先級：

改變頁面視覺習性的腳本絕對要首先執行。這包括任何的字體調整、盒子佈局、或IE6 pngfix。
頁面內容初始化
頁面標題、頂部導航和頁腳的初始化
綁定事件處理器
網頁流量分析、Doubleclick，以及其他第三方腳本

借力 CSS 精靈◊

CSS 精靈（Sprites）基本上就是把一批圖片資源合併成單個圖片文件。然後每個部分用 CSS background-position 來展現。典型的 CSS 看起來是這樣的

1.a.expandbox {
display:block;
width: 75px;
height: 15px;
text-indent: -999px;
overflow:hidden;
2.             background:
url(../img/sprite.png) 
no-repeat -50px 
-5px;  }

接力 sprites 實現 :hover 懸停效果是很普遍的。這種情況下你會看到類似於這樣的定義：

1.a.expandbox:hover {
background-position: 
-50px -20px; }

使用 sprites 可以減少頁面大小，也減少了HTTP連接數，這會加速頁面加載。在 css-tricks.com 上有更多總體性的技術和概述。儘可能地利用CSS 精靈總體來說是一項最佳實踐。

除了主要的sprite之外，很多開發者還會使用一個垂直方向的sprite。這個垂直方向的sprite的寬度（以及高度）會小於或等於100px，包含了通常一個挨着一個的圖標，諸如列表元素的着重號或對應功能的鏈接和按鈕。Yahoo 就用到了一些，例如這個。

有個注意事項就是別把sprite弄得太大，不管是高還是寬超過1000px都會導致用掉大量內存。你可以學習一下使用sprite的時機及內存佔用，如果需要了解更多關於創建sprite的總體性提示和技巧，請參閱 Mozilla 開發博客。

圖片格式◊

你應該會用到四種主要的圖片格式，細節如下：

JPEG. – 這種格式涵蓋了所有基於攝影的圖片，例如主頁和目錄頁推銷廣告圖片，或任何顏色數很高的圖片。
PNG24. – 這種格式在Photoshop裏用起來很方便，它輸出高顏色數圖片，並完全支持像素級的漸變透明度。相對來說，它是相當重量級的格式，達到KB級大小。它也是IE6唯一需要執行pngfix的格式。在那種情況下，本公司推薦使用 DD_belatedPNG 腳本（這是一個 pngfix ，它能修正 PNG24 在 IE6 裏冒出灰色或淺藍色背景的問題。它們並不總是和 background-position 兼容）。在很多情況下，你可以使用GIF替代PNG24作爲對IE6的應變方案。這在需要用PNG24做sprite的情況下尤其適用。所有的 pngfixes 都會特別慢而且開銷巨大，所以最好不要用它們。
PNG8. – 在256色中可以抓取到如此多樣的顏色，所以用JPG之前嘗試一下PNG是值得的。而且，PNG比GIF有更高的可壓縮度（使用類似 pngcrush 和 pngquant的工具）。這種格式支持在幾乎所有瀏覽器中實現漸變透明度，但在IE6中那些半透明像素會顯示爲100%透明。不過在很多情況下這也夠用了。它也無需運行pngfix腳本，所以對於速度是優化的。Photoshop 無法正確輸出這些半透明文件，但是Fireworks 可以。更多細節請參閱： http://www.sitepoint.com/png8-the-clear-winner/
透明 GIF 89a. – GIF 89a 提供透明度的靈活性和廣泛的瀏覽器支持，但也有限制，它不支持漸變透明度和超過256的色深。就我們的經驗而言，64的色深就可以提供質量很好的縮略圖，並保持相對小的文件大小。所有低顏色數圖片，例如圖表或主題圖形應該用PNG8格式製作，因爲它是這四種格式中具有最高文件大小效率的。PNG8是我們對於大部分網站圖形的主要推薦方案。

關於PNG格式、瀏覽器支持以及各種格式優缺點的詳細信息可以在這篇優秀的文章中找到。

如需進一步優化所有這些格式，從 Yahoo的 Smush.It 查看圖片可以發現縮小它們的辦法。

緩存◊

對於靜態內容，瀏覽器應該把文件在本地緩存，在合理的前提下，保留儘可能長的時間。應該較長遠期緩存的內容包括：

CSS 和 JavaScript
產品圖片
主題圖形
favicon.ico
flash .swf’s
優惠信息圖片（可能緩存時間會略短）

爲了最佳緩存效果，利用http頭部的Expires。下面是一個遠期的Expires頭，它告訴瀏覽器這個響應在2015年5月15日之前都無需更新：

Expires: Thu, 15 Apr 2015 20:00:00 GMT

如果你的服務器是Apache，可以使用 ExpiresDefault 指令設置相對當前日期的失效日期。下面的例子設置失效日期爲請求時間的一年之後：

ExpiresDefault "access plus 1 year"

http頭部的 Expires 必須設爲據現在一個月到一年（遠期）之間的值。緩存只適用於那個指定的URL，所以文件名或任何資源的改變都會產生一個新的拷貝。很多開發者使用build過程來給它們的資源增加一個版本號或時間戳。每個隨後的build會開始一個全新的緩存版本，讓你在使用遠期緩存日期時無需擔心。 Google 的這篇文章裏有更多關於瀏覽器緩存的細節信息。

把資源文件跨域分片◊

靜態內容當然應該由不同於HTML所在服務器的另一個域提供訪問。這是優化的方案，這樣對所有靜態內容的請求就無需額外的cookies頭。而且爲整個域編寫緩存規則也就容易得多了。（同時，當前域的任何子域會繼承當前域的cookies，所以使用全新的域是值得的）。

不過，對於足夠多的資源（特別是圖片），請求數的增加足以讓頁面加載變慢。很多瀏覽器對於他們從每個域能併發下載的資源數有比較低的限制。（在IE6和IE7，這個數字僅僅是2）。在這種情況下，我們可以把資源存放在多個子域，例如：

static1.otherdomain.com
static2.otherdomain.com
static3.otherdomain.com

Google Speed 上更多有關域分片的信息

避免用IFRAME◊

Iframe 是能添加到指定頁面的各種元素中上開銷最大的一個。它們會阻塞頁面讓它無法觸發onload事件，直到它們加載完成。有時候它們被其他機構用來處理追蹤腳本。例如 Doubleclick floodlight 標籤就是一個 iframe，管理員可以從他們的管理面板向裏面增加追蹤像素。在加入iFrame的任何情況下，它應該在window的onload事件被觸發之後再動態加入到DOM中。更多細節請參閱 Yahoo 的性能站點。

第三方集成◊

Omniture◊

我們推薦在頁面加載完成（DOM ready 事件或 window 的 load事件）之後，再用 Javascript 把 Omniture Javascript 代碼加入DOM中。通過使用這個技術，可以避免外部域腳本的依賴性，這種依賴性會減慢（並可能掛起）頁面加載過程。

Flash◊

在所有情況下， Flash 的位置必須有備選的HTML內容，以使SEO值最大化。對於 XML 驅動的 Flash，備選 HTML 內容必須利用同一個 XML 文件，以確保數據的一致性。

所有替換內容必須使用 SWFObject ，但不應加入內聯腳本標籤。 SWFObject 的初始化必須在 DOM Ready 事件後觸發。最小的播放器版本必須設置爲最小 v9，以確保 AS3 兼容性。

跨瀏覽器性能策略◊

談到瀏覽器體驗，有兩個主要的事實：

每個人都想要可能實現的響應性最好的體驗。
加到頁面上的所有內容都會使它變慢。

那麼，基於這兩條人生真諦，我們需要通過什麼樣的步驟讓大家滿意呢？

與客戶一起確定成功的性能指標◊

這些指標必須針對你的客戶和項目來定製，在線框圖佈局階段之前完成。這些目標從技術角度必須是合理的，也是可測試的。

可能適用的一些目標

在支持的瀏覽器中，最慢的那個也必須在5秒鐘之內完成從空白緩存到完全加載並初始化的過程。
懸停狀態（以及其他實時變化）必須在100毫秒內響應。
動畫必須流暢顯示，其中跳變發生的時間 < 15%（包括所有瀏覽器）。

對於加載時間的目標，定義基準系統是很重要的。類似於 PageTest 的工具是個好的選擇。另外，目標也可以分開多個頁面來定義，例如：訪問量最大的兩個目標網頁（比如主頁和支持頁面）。

如果客戶對於意向設計有比合理目標更激進的目標，就必須在整個項目決策委員會中統一期望值，並讓項目組瞭解性能指標是最關鍵的。

在設計階段溝通性能的影響◊

內部

在 IA、IxD 和視覺設計階段，前端工程師是負責溝通性能對於交互特性的影響或在目標瀏覽器上採用特定的視覺技術的角色。要給出設計師的限制條件：“如果我們使用Cufon，每個頁面上用到定製字體的元素就不能超過10個。”

外部

需要設定期望值： 並不是所有的瀏覽器都有相同的體驗。它們的表現不會彼此相同，指望它們的特性完全一樣也不現實。在IE7的體驗中放棄一些新的特性也許是合理的。會考慮被放棄的一些特性可能是： 陰影、過渡、圓角、透明度、漸變色。

當溝通某件事的影響時

儘可能詳細地明確影響程度：“這對頁面加載有害” vs “這會在IE中增加2秒的頁面加載時間“
如有可能，提供快捷的概念驗證（Proof of Concept）：”沒有siFR的相似頁面在2秒鐘內加載，而用了siFR的用了8秒，而且在滾動時有延遲“

遵循最佳實踐進行開發◊

選擇那些性能優化的庫和插件。基於性能目標做出明智的架構決定。同時在可能的前提下儘量減少 DOM 操作，設計樣式要讓頁面在加載和初始化的時候避免視覺變化。

在QA流程中評估性能◊

QA 團隊也應該把性能相關的因素和視覺、功能和可用性問題放在一起來確定優先級。開發者和 QA 必須確定如何分配優先級。在 QA 過程中，成功的指標必須定期測試。

測試用的工具

YSlow, Page Speed, Hammerhead, MSFast, PageTest

如果性能指標沒有達到，有三個選擇：

代碼返工 – 重做架構，發現瓶頸，重構代碼，優化指標讓系統在瀏覽器裏更快執行
放棄該特性 – 只對較慢的瀏覽器關閉它
重新設計用戶交互方式 – 也許新的設計會有一招搞定問題的辦法

我們認爲，通過這個方法，在應對性能挑戰的過程中，項目相關各方都有更好的機會統一期望，共同前進，並形成更加行之有效的工作流程。

瀏覽器測試和支持◊

今天的用戶可以從相當大的範圍中選擇web瀏覽器，每種瀏覽器都提供了略微（或相當）不同的體驗。作爲開發者，我們的責任恰恰是選擇我們創建的網頁展示給用戶的方式。本節描述我們是如何做出這當中的一些決定的。

我們支持的瀏覽器◊

Isobar 支持任何 Yahoo 瀏覽器支持分級中列出的A級瀏覽器，除了Opera之外。對此也可能會有其他的例外，基於地區市場和它們特定的指標。

我們會努力支持任何客戶指定的其他任務關鍵瀏覽器 (IE 5.5, Opera, Konqueror, Safari 3 on PC, 等等)，雖然我們不能保證所有功能都可能實現。

我們的測試方式◊

全面的瀏覽器測試對於每個web項目都是必須的。必須付出大量精力進行跨瀏覽器和平臺測試，以確保質量和一致的用戶體驗。配置測試環境會是一項挑戰，卻是值得去做的。

在Microsoft Windows上的測試◊

IE 測試◊

由於不可能在一臺PC上安裝多於一個IE瀏覽器，IE的測試是個挑戰。幸好微軟最終提供了老版本IE的開發版下載。這些運行拆解版Microsoft Windows的虛擬磁盤時不時地失效（過期）。通常隔幾個月就需要重新設置它們。從你的MSD版權（如果有）獲取的Microsoft Windows開發版也會是一個選擇，取決於你能夠獲取到的東西。

虛擬 PC – 虛擬PC必須安裝在你的計算機上，如果你用的是Windows 7，你必須使用”XP 模式”。
Microsoft Windows VPC 映像 – 有多種虛擬磁盤映像，你可能需要安裝多個以構成全面的測試環境，這取決於你的項目。

此外，其他不是那麼有效的IE測試選項（通常是不推薦的）包括了 IETester，它還是好於 Multiple_IE 和 IE7 standalone。

Firefox◊

Firefox 3.6+ 也必須安裝在本地 – 以及通過移動應用獲取的 3.0 版本。
如果你能勝任，安裝 Firefox 3, 3.5, 和/或 3.6 版，和 FF4 安裝在一起。Firefox 配置管理器允許你安裝到不同的目錄並爲每個版本保持不同的配置文件。

PC 版 Safari◊

使用最新的PC版Safari版本. 它和 OSX 版的 Safari 的一致性達到 98% ，但不是完全一致，所以如果它是必需的平臺就需要測試。

Opera◊

你可以下載存檔的舊版本。要運行多個版本，可以把它們安裝到不同的文件夾中。

Google Chrome 和 Chrome 版本◊

Google Chrome 會自動更新，正常情況下絕大部分用戶都會有最新版本。要是每種瀏覽器都這樣多好啊。對於Google Chrome就不需要擔心舊版本的問題了。

在 Mac OS X上的測試◊

對於核心的Mac OSX 瀏覽器，Mozilla Firefox, Google Chrome和Apple Safari 提供的瀏覽體驗基本和它們的Windows版本一樣。儘管如此，某些操作系統級的差異還是會出現，網站必須在兩個平臺上進行測試。典型的差異是關於字體渲染，所以有時候會冒出間距問題。

測試在Mac上安裝的Windows環境◊

在 Mac OSX 上測試基於Windows的瀏覽器有幾種選擇。首先，Mac 提供了一個 “boot camp” 分區，它允許你在Mac 上啓動一個Microsoft Windows分區。這是一個複雜但完整的測試環境。一旦你用Windows啓動，就可以用通常 Windows 環境下的測試方法。

其他選擇包括在 Mac OSX 內部虛擬化 Windows，讓你可以在Mac OS內部運行Windows。

Microsoft 虛擬磁盤在這裏的大部分選擇中是可以打開或轉換的，這樣就能在一定程度上利用Windows 用戶可以用到的那些測試方法。即使你也可以同時在Mac上測試，有些人還是會認爲這樣更加靈活…

Parallels – Parallels 可用，而且可能已經被本公司IT部安裝到你的Mac上了。
VMWare Fusion – VMWare Fusion 通過它們的 Fusion 產品提供了同一級別的 Windows 虛擬化。

Mozilla Firefox◊

正如在Windows 上一樣，你可以在一臺Mac 上安裝和運行 Mozilla Firefox 的多個拷貝，雖然通過配置管理器設置多個配置更爲複雜一些。儘管如此，你可以通過一些小技巧，通過Automator程序創建分開的配置並順利運行它們。

IE standalone 版會出現的bug◊

注意：IE6 standalone 版在某些情況下對透明度的實現是有bug的。這會導致任何應用於CSS 過濾器的透明度（例如alpha透明度或者24位PNG）失效。在這種情況下必須測試透明度，你會需要本地安裝的IE6。

還有人發現安裝在Vista 平臺上的IE7 和Windows XP 上的IE7 確實有差異，所以，你可能會希望確保團隊中的某個人也有這種配置。IETester 修復了一批這樣的問題，和Xenocode 瀏覽器的做法類似。

瀏覽器分辨率◊

除了適應各種瀏覽器，開發者還必須持續注意用戶的屏幕分辨率。隨着顯示器屏幕越來越大，分辨率的廣度也隨之增加。下面是關於分辨率的一些工作準則。

1024px 分辨率

估算的摺疊位置在 570px 處。
優化寬度： 960px – 在兩側留出合適的內邊距，960可以被很多數字整除，而且能夠很好地配合IAB 廣告的標準寬度
增大寬度： 970px – 在大部分瀏覽器中還會留出一些內邊距。這個數字和黃金比例吻合得比較好
最大寬度： 996px – 在主流瀏覽器中還不會產生水平滾動條。基於此處的研究，如果你不希望出現水平滾動條，寬度的最大值是 1003px。

關於窗口大小的當前統計

不過，系統分辨率和瀏覽器尺寸並不是一樣的

搜索引擎優化（SEO）◊

良好的web設計和開發的一個重要部分就是SEO 。要想確保一個網頁不僅能讓搜索引擎合適地索引到，而且能讓那些只有有限的web能力的人訪問到，結構良好的代碼是其中的關鍵。

注意SEO最佳實踐◊

打印媒體 CSS 的最佳實踐。
站點/應用符合瀏覽器分辨率指南。
站點/應用兼容瀏覽器測試與支持描述的瀏覽器需求。
注意可用性最佳實踐，例如 508法規和 WCAG 標準
- http://www.section508.gov
- http://www.w3.org/TR/WCAG20/.

易於索引◊

你必須使用語義化的標記，在關閉 Javascript 和 CSS 之後它仍然是可讀和邏輯的。所有頁面內容必須是HTML 形式；我們不希望使用iframe 或 Javascript 來加載初始的可索引內容。

所有鏈接都必須指向 HTML

1.<a
href="/shelf/jordan/page/2">

而不是這種

1.<a
href="javascript:loadPage(2);">

這樣既能被搜索引擎正確索引，也能讓用戶在新窗口或新標籤中打開鏈接。

優化◊

每個頁面的 title 標籤應該突出目標關鍵字。每個頁面的 title 應該是獨特的。標題（h1,h2,等等）應該構成文檔的輪廓並代表該頁面最重要的關鍵字。URL 應該是人類可讀的，其中包含主要的目標關鍵字：

http://domain.com/mens-shoes/basketball/jordan/jordan-mens-ajf-6-basketball-shoe/

http:// domain.com/ecomm.cfm?view=prod&prodId=23425

Flash和圖片替換◊

總是爲 flash 使用備選HTML 內容。所有廣告促銷圖片應該使用基於 CSS 的替代圖片而不僅僅設定 alt 屬性。

>對不支持flash 版本的應變

1.<a
href="/nike/morethanagame/"
id="morethan">
2.  <h4>Nike: More Than A
Game</h4>
3.  <h5>Experience the movement
and view apparel</h5>
4.</a>

1.a#more than {
background:url(/promos/nikegame.jpg)
no-repeat; width:
200px; height:
100px;
2.             text-indent:
-999px; overflow:hidden;
display:block; }

Google 的 SEO報告卡◊

Google 的 SEO報告卡是給 Google 的產品團隊提供關於通過簡單易接受的優化改進他們的產品頁面的思路的一項措施。這些優化手段不僅僅是爲了幫助搜索引擎更好地理解他們頁面的內容，也是改進他們的用戶體驗。

訪問他們的站點時，諸如修復404錯誤和無效鏈接、簡化URL 選項、提供易於理解的標題以及頁面摘錄等簡單的步驟，其實對用戶和搜索引擎都是有利的。

代碼審查◊

代碼審查是確保系統質量和用戶體驗的正式流程中的基石。這涉及到召開一個由標記編寫者、審查者和其他相關人員參加的會議，在會上提交有關材料，產生後續的代碼修改要求。簡單地說，我們鼓勵進行代碼審查，磨刀不誤砍柴工嘛。

爲啥俺要參加代碼審查涅？

代碼審查是用於降低項目風險的戰略性時間投資。

經常地，接口開發者被要求根據線框圖或視覺構圖編寫標記。不過，有可能設計的屏幕不能輕易轉換爲標記，或者轉換後質量有損失。代碼審查爲在頁面投入生產之前發現並解決這些風險提供了一個機會。

代碼審查能夠提升跨項目的整體知識水平

既然代碼審查涉及到項目內外的成員，這有利於在整個團隊中分享技術和最佳實踐。

代碼審查能在bug從一些模板繁衍到多個頁面之前就封殺它們

理想情況下，代碼審查是在開發過程的早期進行的，早於頁面開始全面投入生產。當模板被團隊審查並在多個校驗工具和瀏覽器運行，潛在的bug就會冒出來。這是修復bug的理想時機。

代碼審查給不熟悉項目的外部成員提供了發現代碼中問題的機會

項目外部的審查者比在代碼上工作了更長時間的標記編寫者更容易發現問題。

哪些人應該參加代碼審查？

歸根到底，項目的前端工程主管要負責確保代碼審查遵循合適的流程。

理想情況下，一位部門主管應該作爲代碼審查的主持人，除非部門主管自己正好是被審查代碼的接口開發者。在這種情況下，由一位項目經理進行主持。

審查小組應該包括至少兩位來自接口技術團隊精通開發和最佳實踐的資深成員。

代碼審查中有哪些要求？

在進行代碼審查之前，需要審查的模板必須整體完成開發、經過校驗、並針對項目需要用到的瀏覽器和平臺進行了測試。

部門主管和/或接口開發者必須在代碼審查前至少48小時分發以下材料：

所有頁面代碼，相關的服務器端引用，CSS 和Javascript。這些必須有完整註釋，左側列出行號，在每個打印頁的頁腳標明文件/頁面名稱。
每個模板的截屏
如果適用，標明模板對應的URL
項目支持的瀏覽器和平臺的清單
已知問題和關注領域的清單

很典型的情況是，直到代碼審查進行之前，代碼還在不斷地修改。不幸的是，這樣就沒有足夠的時間來校驗和測試了。如果這種情況發生了，最好是重新安排代碼審查的時間以確保其效果。

另外，部門主管和/或接口開發者應該預定一間會議室和電話會議號碼並提供給所有參與者，因爲有可能某些項目組或審查組成員不在現場。用一個小時來審查兩三個模板應該足夠了；不過，需要的時間也隨模板的大小和複雜度而不同。

在代碼審查過程中，一位部門主管和/或接口開發者應該主持會議，而部門主管或項目經理做記錄並分配行動事項。審查者應該在事前審閱過代碼並準備好提問或提供反饋意見。

記錄和行動事項（包括負責人）應該在代碼審查後分發給所有參與者。如果代碼審查產生了本質性的變更，或沒有完成對所有代碼的審查，就有必要安排第二次代碼審查。不過，這必須在項目組內討論以確定其可行性。

附錄◊

下面是引用、工具和其他與本文檔相關的內容。

（【譯者注】下面的內容以鏈接爲主，是一些輔助性的材料，這次就不翻譯了。如有不理解的內容，可與本人聯繫。）

附錄 A: 校驗器◊

W3C CSS Validation Service
HTML Validation firefox extension
CSS validator
Accessibility – Bobby Validation Service
- Tests individual pages for accessibility against either the W3C or Section 508 standards.
Accessibility – Cynthia Says Portal
- Similar to Bobby, tests individual pages for accessibility against either the W3C or Section 508 standards.

附錄 B: 工具◊

Browsershots makes screenshots of your web design in different operating systems and browsers
Browserling is an interactive cross-browser testing site. Fully interactive sessions, not static screenshots.
Accessibility – Evaluation, Repair, and Transformation Tools for Web Content Accessibility – lists validation tools for validating, testing and fixing web content to make it more accessible.

代碼編輯器◊

A great code editor can spark productivity in exceptional ways. Many developers prefer rudimentary text editors, others prefer powerful integraded development environments (IDEs). What follows is a general listing of some of the more well-known tools, it would be impossible to list them all.

Aptana: Aptana Studio is a powerful, free and open source Ajax development environment which runs stand-alone or within Eclipse. Aptana Studio offers tooling for Ajax including HTML, CSS, DOM, and JavaScript editing and debugging, plus support via additional free plugins for PHP, Ruby on Rails, Adobe AIR, Apple iPhone development. It also features full SVN repository integration for committing, branching, tagging, merging and repository browsing. Aptana. [Linux, Mac, Windows]
Geany: Geany is a text editor using the GTK2 toolkit with basic features of an integrated development environment. It was developed to provide a small and fast IDE, which has only a few dependencies from other packages. It supports many filetypes and has some nice features. Geany. [Linux, Mac, Windows]
Notepad ++: Notepad++ is a free (free as in “free speech”, but also as in “free beer”) source code editor and Notepad replacement, which supports several programming languages, running under the MS Windows environment. Notepad ++. [Windows]
e TextEditor: E is a new text editor for Windows, with powerful editing features and quite a few unique abilities. It makes manipulating text fast and easy, and lets you focus on your writing by automating all the manual work. You can extend it in any language, and by supporting TextMate bundles, it allows you to tap into a huge and active community. e TextEditor. [Windows]
Edit Plus: EditPlus is a text editor, HTML editor and programmers editor for Windows. While it can serve as a good Notepad replacement, it also offers many powerful features for Web page authors and programmers. EditPlus. [Windows]
Homesite: HomeSite 5.5 provides a lean, code-only editor for web development. Advanced coding features enable you to instantly create and modify HTML, CFML, JSP, and XHTML tags, while enhanced productivity tools allow you to validate, reuse, navigate, and format code more easily. Configure Adobe (formerly Macromedia) HomeSite to fit your needs by extending its functionality and customizing the interface. Homesite. [Windows]
TextMate: TextMate claims to be the “Missing Editor” for Mac OS X. A general purpose editor with a sparse interface, the real power is in it’s extensibility. Features column selections, recordable macros, snippets, auto-pairing of brackets and other characters, clipboard history, code folding, tab-triggers, tabbed placeholders and mirror typing. And that’s just for starters. Anything that can be done via scripts through the Mac command line can be done through custom commands, allowing an extremely high degree of customization and expansion of the feature set. TextMate’s “bundle” format has been adapted by many other code editors including the aforementioned e TextEditor. TextMate. [Mac]
Espresso: Espresso was created by the same fellow that created the innovative CSSEdit CSS editor. Espresso features syntax highlighting, code folding, code completion, document outliner/navigators, projects, powerful find features, and built-in file transfer publishing capabilities. Finally, it has a powerful “Sugar” feature set which allows the creation of custom commands and plugins. Espresso. [Mac]
BBEdit: BBEdit is the grand-daddy of Mac code editors for web development. Features syntax highlighting, exceptionally powerful text manipulation tools, multi-file searches, a scriptable API, text clippings, and extensive Mac Automator features. BBEdit. [Mac]
TextWrangler: The free “little brother” of BBEdit, it is a powerful raw text editor with a massive text manipulation feature set. Searches, regular expressions, text transformations, syntax highlighting and code navigation tools for a variety of different language environments. TextWrangler. [Mac]
Coda: Coda from Panic software is a powerful IDE with code editing, terminal, remote file management, and help documentation all built into one UI. Aiming to be a one stop shop for your web development workflow, it also features SVN integration and a new plug-in builder with powerful scripting support and TextMate bundle importing. Finally, code clips and live multi-user editing are also supported. Coda. [Mac]
UltraEdit: Another editor that’s been around for ages, this is an immensely robust and powerful text editor, able to open files limited only by the amount of memory on your computer. The feature list is virtually too much to list, with a massive list of text manipulation features, project support, powerful search and replace, hex editing, function lists, a massive list of languages supported (600+) remote file ftp, telnet, ssh, file comparison, scriptable macros, tools and compiler support, and much, much more. UltraEdit. [Linux, Mac, Windows]
Sublime Text: A relatively new editor, Sublime Text is a new approach in editors. “Open Anything” searches through file names and file contents, with remarkable efficiency. Incredibly powerful selection controls allow editing text in multiple locations at once and the “Minimap” gives you a bird’s eye view of the open file so you can find your place easily. Actively being developed, new features are being added and the community around the editor is rapidly expanding. Macros, auto-complete, snippets, build tools, the list of features goes on and on. Supports Linux and Mac starting with version 2.
Sublime Text. [Linux, Mac, Windows]
Vim: If you have to ask, it’s probably not for you. Vim [Linux, Mac, Windows]

Google Chrome 擴展◊

Developer Tools: Not actually an extension for Chrome, but built right in (shares much with Safari’s Web Inspector, both being derived from WebKit.) This suite of tools features a DOM inspector, basic JavaScript debugger, profiling tools, network loading inspector and timelines, page resources inspectors, and more.
Developer Tools.
code cola: A pop-up panel with CSS editing tools for examining and modifying the styles on a given page. code cola.
Firebug Lite for Google Chrome: You really don’t need to install an extension to use Firebug Lite with Chrome, though the extension is nice because it enables one-click application of the Firebug Lite script to any page you are working with. Not the full Firebug feature set, but close.
Firebug Lite.
HTML5 Outliner: The HTML5 Outliner adds a pop-up with a generated HTML5 outline of the current page’s header hierarchy. Helps for checking your pages’ organization against the new HTML5 header outlining algorithms.
HTML5 Outliner.
Pendule: Nice set of tools for showing data about and interacting with the current web page. Very similar to the original web developer toolbar for Firefox.
Pendule.
Web Developer for Chrome: Chris Pederick, the original developer of the original Web Developer toolbar for Firefox has ported the majority of it over to Chrome. There you have it.
Web Developer.

Firefox 插件◊

FireFTP: FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. FireFTP.
Firebug: Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug.
Firequery: FireQuery is a collection of Firebug enhancements for jQuery integrated into Firebug. Firequery.
Firecookie: Firecookie adds cookie viewing, editing, and deletion to Firebug. Firecookie.
CSS Usage: CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. CSS Usage.
Greasemonkey: Allows you to customize the way a web page displays using small bits of JavaScript. GreaseMonkey.
Web Developer Toolbar: Adds a menu and a toolbar with various web developer tools. Web Developer Toolbar.
JSView: Adds an item in the status bar that displays all external JavaScript and CSS files loaded on a given page. Allows you to click on and view the files and things like their URLs. Great way to pull file URLs to put into Charles for remote debugging. JSView.
Live HTTP headers: When running, captures all HTTP traffic from the browser, which enables you to see what files are being requested as well as information about the requests and server responses. Live HTTP Headers.
Quick Locale Switcher: A tremendous help when doing internationalization, Quick Locale Switcher allows you to change the locale sent along in the browser’s user-agent HTTP header, telling servers to display content for you in other locales. Quick Locale Switcher.
Screengrab: Screengrab sits in the Firefox status bar, allowing you to capture and copy or save screen shots of everything from selections of a web page to the entire page, even parts displayed “below the fold.” Screengrab.
Total Validator: Enables one-click access to sending your page through a markup validator. No better way to quickly check for missing or mismatched tags! Also available as a standalone application. Total Validator.

Opera 擴展◊

Dragonfly is Opera’s developer tool similar to Firebug.

IE 插件◊

CompanionJS, DebugBar, IE8 Dev tools.

Charles 代理◊

Charles watches all requests and can tell you a lot of information about them. Also supremely useful is Map Local which lets you use a local file in place of a given URL (good for replacing a minified js with a full one).

Fiddler◊

From the site: “Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.”

Speedlimit◊

Speedlimit is a Leopard (works in snow leopard) preference pane for limiting your network bandwidth to one of a couple different speeds—768k DSL, Edge, 3G, and Dialup. Good for testing your lowest supported speeds or when you want to know how your app will function in real world speeds.

教程和工具◊

圖標◊

附錄 C: 資源◊

ECMA 262 5th Edition December 2009
Opera’s The Web Standards Curriculum – basic articles about building with web standards.
10 Principles of the CSS Masters – all of this is smart advice.
Google – when in doubt, google it.
Too lazy? – let me google that for you then…
Yahoo’s Exceptional Performance team has maintained one of the best summaries of performance advice.
Google now has a Speed site with excellent detail. (Click All best practices).
There are many more excellent resources on page optimization and javascript performance.
Mozilla’s coding standards.
Nokia’s JavaScript Performance Best Practices.

作者

修改歷史◊

2012 Fall/Winter: Conversion to Github Hosted Version; general edits (larger edits coming soon!)
2011 May/June: Entire Standards page redesign. Coded with html5boilerplate.
2011 April: Web Typography document created.
2011 March: 2k11 clean up. Added contact info, etc. etc.
2010 April: Prep for public release.
2010 March: Merge with other documents and Fellowship’s coding standards. HTML format.
2009 August: Performance Recommendation document created.
2008 July: Reduce size of document
2008 July: Merge with new standards.
2005 April: Original “how to write good markup” document. UID_coding_standards.doc.

前端代碼規範及最佳實踐

概述

總體指導原則◊

前端開發核心思想◊

總體原則◊

縮進◊

可讀性 vs 壓縮◊

標記◊

HTML5◊

模板◊

Doctype◊

字符編碼◊

標記的總體原則◊

屬性加引號◊

CSS◊

編碼總體原則◊

CSS盒子模型◊

CSS 校驗◊

CSS 格式◊

字母排序◊

Classes vs. IDs◊

選擇器命名的慣例◊

選擇器◊

僞類◊

組合及屬性選擇器◊

明確度◊

計算明確度◊

像素 vs. Em◊

IE Bugs◊

速記格式◊

圖片◊

顏色管理◊

通用的文本和字體樣式◊

標題◊

鏈接◊

JavaScript◊

JavaScript庫◊

編碼總體原則◊

留空◊

plugins.js 和 script.js◊

plugins.js◊

Script.js◊

變量，ID 及 class◊

事件代理◊

調試◊

優化 JavaScript 的特徵◊

易用性◊

性能◊

優化CSS 和 Javascript傳輸◊

優化 JavaScript 執行◊

借力 CSS 精靈◊

圖片格式◊

緩存◊

把資源文件跨域分片◊

避免用IFRAME◊

第三方集成◊

Omniture◊

Flash◊

跨瀏覽器性能策略◊

與客戶一起確定成功的性能指標◊

在設計階段溝通性能的影響◊

遵循最佳實踐進行開發◊

在QA流程中評估性能◊

瀏覽器測試和支持◊

我們支持的瀏覽器◊

我們的測試方式◊

在Microsoft Windows上的測試◊

IE 測試◊

Firefox◊

PC 版 Safari◊

Opera◊

Google Chrome 和 Chrome 版本◊

在 Mac OS X上的測試◊

測試在Mac上安裝的Windows環境◊

Mozilla Firefox◊

IE standalone 版會出現的bug◊

瀏覽器分辨率◊

搜索引擎優化（SEO）◊

注意SEO最佳實踐◊

易於索引◊