Web前端開發最佳實踐（1）：前端開發概述

時間 2019-11-17

標籤 web 前端開發最佳實踐概述欄目 HTML 简体版

原文原文鏈接

引言

我從07年開始進入博客園，從最開始閱讀別人的文章到本身開始嘗試表達一些本身對技術的見解。能夠說，博客園是我參與技術討論的一個主要的平臺。在這其間，隨着接觸技術的廣度和深度的增長，也寫了一些獲得了你們承認的技術文章，多篇文章也獲得了編輯推薦。你們的承認也更激發了我寫技術文章的熱情，藉助公司在博客園的帳號葡萄城控件技術團隊博客發佈了多篇有關Web前端開發的文章，尤爲是以下三篇前端開發最佳實踐相關的文章引來了你們的熱烈討論:javascript

也正是這三篇文章的編寫促成了個人新書《Web前端開發最佳實踐》的出版。多年來技術的長進都得益於在博客園技術社區的討論和借鑑前輩們的技術思想。得益於社區，也應該回饋社區，因此從今天起，計劃在博客園發佈前端開發相關的系列文章，和你們討論我所認爲的Web前端開發最佳實踐方法。本文爲開篇，簡單介紹前端開發的一些概念和方向，後續將依次從HTML、CSS、JavaScript、移動端開發爲主體展開討論。html

Web前端開發須要具有的技能

因爲Web前端技術興起的時間不長，所以尚未明確的界限定義，不一樣的Web項目中可能要求的Web前端開發技術會有所不一樣。好比，某些項目可能須要前端開發人員瞭解一些後端技術，這樣前端開發人員才能夠更好地與後端開發人員配合，好比在頁面上留下一些後端須要調用的鉤子等，而某些項目可能須要前端開發懂一些UI設計、Photoshop工具的使用方法等，以便於和UI設計師溝通和配合。儘管Web前端開發的範疇普遍，而且界限模糊，可是如下7點則是Web前端開發必備的技能。前端

1. 頁面標記（HTML）

因爲頁面HTML代碼結構基本固定，HTML的標籤數量也很少，因此從學習的難易程度來講，HTML應該是前端技術中很是容易上手的技術。即便是一個新手也能在較短的時間裏學會並編寫一個結構良好的頁面來。雖然說入門容易，可是要編寫語義良好、簡潔整齊的HTML代碼則須要大量的實踐學習才能掌握。HTML是頁面的基本結構組成，是網站的基礎，臃腫混亂的HTML代碼不但會影響其自己的展示，並且與其對應的CSS和JavaScript代碼也會變得難以編寫和維護。java

2. 頁面樣式

CSS 是 Cascading Style Sheets(層疊樣式表)的簡稱。在標準頁面設計中，CSS負責網頁內容的表現，因此CSS也是前端開發須要掌握的核心內容。豐富的CSS樣式能讓平淡的HTML展示出絢麗的效果，使得頁面更爲友好。好的樣式可讓用戶在頁面上停留的時間更久一些，也能夠幫助用戶更好地閱讀網站內容，同時，還可讓用戶在不一樣瀏覽器上有着相同的體驗。CSS和HTML代碼同樣，沒有複雜的邏輯，上手也比較容易。其主要的難點在於如何合理利用CSS的組合和繼承特性來編寫簡潔、可維護性好的CSS代碼。以上這兩項基本技能是前端UI開發必備技能。程序員

3. 前端編程

前端編程技能主要指定是JavaScript編程。JavaScript是一種居於對象和事件驅動的客戶端腳本語言，是頁面實時動態交互的技術基礎。相較於HTML和CSS，編寫JavaScript代碼更能讓前端開發人員找到後端程序員的感受。JavaScript是很是靈活的腳本語言，包含了高階函數、動態類型以及靈活的對象模型等強大的語言特性，固然，JavaScript的靈活性也致使代碼不易維護。此外，瀏覽器的兼容性也增長了JavaScript編碼的難度。同一個功能，可能在不一樣的瀏覽器中有不一樣的實現，例如，在IE瀏覽器中事件綁定使用的是attachEvent()方法，但其它瀏覽器則使用的是addEventListener()方法。開發人員在熟悉JavaScript基本語法和基本的編碼規範以外，還應該掌握在不一樣瀏覽器中JavaScript的兼容性問題。另外，做爲前端開發工程師，一定會涉及後端的編程，一些緣由是目前流行的Web編程方式會有部分後端代碼存在於前端頁面中，和前端的HTML、JavaScript等混合在一塊兒，好比PHP、JSP、ASP.net等，因此前端工程師也有必要了解一些後端編程技術。web

4. 跨平臺，跨瀏覽器

前端代碼原本是不存在跨平臺方面的問題，可是隨着移動Web平臺的興起，跨平臺的問題就逐漸顯現出來了。移動設備如智能手機和平板電腦在近幾年發展迅猛，用戶經過移動設備訪問Web站點的比率也是逐年增高。如何在衆多移動平臺、衆多屏幕尺寸上展示友好的Web站點成爲了一項前端技能。不過，目前跨瀏覽器沒有像幾年前表現得那麼突出了，這要歸功於IE六、IE7瀏覽器的佔有率快速降低和衆多瀏覽器對標準的重視，另外目前流行的前端框架已經很好地處理了瀏覽器的兼容問題。儘管如此，可是還須要熟悉常見的瀏覽器兼容方法，主要包括：IE七、IE8的兼容，HTML5中新特性的兼容等。編程

5. 前端框架

各類前端框架的出現，很大程度上下降了前端開發的難度。框架統一了編碼的方式、封裝了瀏覽器兼容問題並添加大量的擴展功能。現在的Web項目中前端框架應用很是普遍，在開源社區Github上排名靠前的開源框架也是之前端框架居多。優秀的前端框架能夠很大程度上減小項目開發的週期，尤爲是jQuery，幾乎成爲了Web項目默認的前端框架。可是前端框架的接口衆多，各類框架的使用方式和編碼方式也不盡相同。做爲前端開發工程師，須要熟悉一些經常使用框架的使用方法，而且要了解如何編寫經常使用框架的擴展插件，如：jQuery、YUI、ExtJs等。bootstrap

6. 調試工具

對於前端代碼，在調試過程當中須要查看頁面的HTML結構變化，CSS渲染效果，JavaScript代碼的執行狀況及HTTP請求和返回的數據，而且還要查看網站各個部分的性能等，甚至須要動態更改HTML，CSS代碼來查看預期的效果，模擬發起HTTP請求來查看後端返回的數據。各主流瀏覽器都會有對應的瀏覽器插件來輔助完成這些工做，如：IE中的IE Dev Toolbar、Chrome中的Developer Tools、Firefox中的Firebug等，此外還有HTTP請求監控和模擬工具，如：Fiddler等。開發工程師須要熟練使用這些工具來輔助完成前端代碼的調試。後端

7. 溝通能力

軟件工程師向來是一個不善於溝通的羣體，可是溝通卻又是一項必備的基本技能，尤爲是對於前端開發工程師來講。Web前端開發介於UI和後端邏輯開發之間，因此Web前端工程師在開發過程當中一定會和UI設計師及後端工程師合做：前端工程師須要和UI設計師溝通，肯定效果是否能夠實現以及實現的代價，並對UI設計提出建議；還須要和後端工程師溝通，肯定先後端交互的接口以及傳輸的數據實體的結構等，良好的溝通會讓這些過程變得輕鬆許多。瀏覽器

Web前端開發現狀

前端開發雖然起步時間短，可是發展勢頭迅猛，在各類新技術、新標準的推進下，各大互聯網公司也開始重視Web產品的前端重構與開發了，如淘寶、騰訊、新浪、百度、搜狐等都對本身的網站進行了重構並同時使用了HTML5中的新特性。如今開發的Web新產品的頁面交互也愈來愈豐富，視覺效果也愈來愈絢麗。互聯網公司除了重視前端開發以外，還在積極推進互聯網技術的發展，從2001年到2012年，騰訊、百度以及360前後加入了萬維網聯盟（W3C），共同參與互聯網技術標準的研究和制定，促進國內互聯網產業的發展。
在Web前端發展的過程當中，瀏覽器的發展起着相當重要的做用。瀏覽器廠商在這場Web浪潮中推波助瀾，表如今瀏覽器的版本升級週期短、對前端標準的支持也愈來愈好、瀏覽器的性能也有大幅的提高等。一貫表現差強人意的IE瀏覽器也開始發力，最新發布的IE11瀏覽器不管從標準的支持或者是性能都表現突出。瀏覽器的快速發展使得低端的瀏覽器如IE六、IE7等快速退出市場。

除各大互聯網公司和瀏覽器廠商的積極推進外，Web前端開源社區的參與熱情也極爲高漲，呈現出一派欣欣向榮的景象。在著名的網絡代碼託管系統Github上，開源的項目仍然是之前端相關項目居多。按語言排名前三的分別爲JavaScript、Ruby和Python。按項目分，排名靠前的大部分也是前端項目，如：prototype、bootstrap、jQuery及相關插件等，具體你們可參考Github官方網站。國內的前端社區則發展較爲緩慢，可能是以推廣HTML5爲主，靠一些酷炫的效果來吸引眼球，反而關注前端基礎的較少。國內Web互聯網公司（如：淘寶、百度、騰訊等）也有部分優秀的開源前端框架，這些公司的前端技術分享氛圍不錯，但受地域的限制，主要集中在北京和杭州等小範圍內，雖然相關人員在積極推進但仍是孤掌難鳴，發展很不平衡。總體來說，國內前端技術發展仍是挺迅速，也不乏頂級的前端技術人員，但缺少的是開放的心態和與國外同行交流的能力，國內前端技術的發展任重道遠。

Web前端總體技術的發展和前端工程師我的的能力是相輔相成的。目前前端工程師大都是半道出家，一部分是從頁面UI開發轉行爲Web前端開發的，一部分則是由後端工程師轉行而來，因此前端工程師廣泛是自學成才，並無受過足夠的專業訓練，也缺少實際的項目經驗。

除了以上這些Web前端開發的外在環境外，Web前端在技術方面也存在着大量的挑戰，大量舊的網站須要重構來提升網站用戶體驗和性能等。這些網站的前端代碼廣泛存在的問題有：代碼組織混亂，CSS代碼和JavaScript代碼混合在HTML代碼中；代碼的格式問題突出，不夠整潔；頁面佈局隨意，HTML代碼不符合標準；網站總體性能差，尚未意識到要去應用諸如緩存、動態加載、腳本壓縮、圖片壓縮等提升性能的技術。

Web前端開發的現狀能夠歸納爲：前端技術發展迅速，但起步晚，基礎薄弱；前端工程師熱情高漲，但缺少足夠技能培訓，對代碼規範重視不足，對一些基礎原理的理解不夠深入。

規範的web前端代碼：更好維護、更好性能和更安全

規範的代碼，這是全部軟件開發中對代碼的基本要求，前端開發也是同樣的，要求寫規範的HTML、CSS和JavaScript代碼。

什麼樣的前端代碼才能稱的上是規範的代碼？探討這個問題以前，首先須要強調的是規範不是標準，不是放之四海而皆準的，不一樣的項目中的代碼規範是有可能有差別的，好比命名，有些項目規定HTML標籤的id必需要以控件的縮寫名做爲前綴。如按鈕的id名以」btn」做爲前綴，有些只是規定命名有意義就能夠。再好比有些項目規定JavaScript代碼語句結尾必須添加分號，可是有些項目並不要求，大名鼎鼎的bootstrap源代碼中並無給JavaScript語句結尾添加分號。因此規範的做用只是讓同一個團隊代碼風格的統一，減小協做時的複雜性，確保後續的維護和修改方便。不一樣團隊中遵循的規範有可能存在部分差別，可是在同一個團隊中規範必須是統一的，團隊中的成員應該嚴格遵循。澄清了規範的做用後，接着上面的問題來探討什麼纔是規範的前端代碼。

Web前端的代碼規範主要針對的是HTML、CSS和JavaScript代碼。儘管前端代碼規範在不一樣場合會有差別，可是規範的前端代碼應該具備以下的特徵：

1. 符合標準

所謂的標準指的是W3C制定的Web標準，W3C制定的標準包括使用語言的規範，開發中使用的原則和解釋引擎行爲等。主要由3個部分組成：結構標準（Structure）、表現標準（Presentation）和行爲標準（Behavior）。結構標準包括XML標準、XHTML標準和HTML標準，目前使用的標準版是HTML4.01標準，HTML5是HTML和XHTML的最新標準；表現標準主要指的是CSS樣式標準，目前使用標準版的是CSS2，CSS3還沒有發佈最終版；行爲標準主要包括ECMAScript標準和DOM標準，ECMAScript是ECMA(European Computer Manufacturers Association)制定的標準腳本語言（JAVAScript），DOM是文檔對象模型（Document Object Model）的縮寫，是一箇中立於語言的應用程序接口，允許程序訪問並更改頁面的內容、結構和樣式。目前推薦遵循的是ECMAScript標準是ECMAScript 262第5版，DOM標準是DOM級別2，DOM級別3尚未發佈正式版本。W3C推薦的這些標準受到了各瀏覽器廠商和IT互聯網公司的歡迎，前端代碼遵循標準則能夠保證網頁在不一樣瀏覽器上能夠正常展示。

2. 格式規範統一

前端代碼的格式主要包括命名、代碼縮進、空格和空行的使用以及代碼註釋。命名主要有HTML元素的id和class名，JavaScript中函數和變量的命名；HTML、CSS和JavaScript代碼中都須要經過代碼的縮進來體現代碼的層次關係；空格和空行主要用在CSS和JavaScript代碼中，用來提升代碼可讀性，如操做符先後添加空格、不一樣代碼段邏輯之間添加空行等； CSS和JavaScript代碼中都須要添加必要的註釋來解釋說明代碼文件及代碼段，HTML代碼中使用註釋的狀況較少。和其它代碼格式規範同樣，前端代碼格式規範也是爲了提升代碼的可讀性和可維護性。

3. 高性能

前端性能體如今瀏覽器的響應速度上，包括網頁的加載速度和頁面的交互響應速度。網頁加載所佔有的時間包括後端處理請求的時間、代碼文件從服務器端傳輸的時間、HTML和CSS的組合展示的時間以及JavaScript加載和運行的時間。除了第一條，其他都和前端代碼有直接的關係，減少文件傳輸時間的最直接的方式就是減少文件的大小，越小的代碼文件相對傳輸就會更快；簡潔和符合標準的HTML和CSS代碼能減少瀏覽器解析的時間，加快瀏覽器渲染過程；頁面中請求數量越少相對頁面加載時間也會越快；JavaScript代碼中選擇性能更好的實現方案，如延遲加載、動態加載等技術，會讓頁面加載更快和交互更流暢。規範的前端代碼應該針對這些方面來編寫高性能的前端代碼，提升用戶的前端體驗。

4. 高安全性

網站的安全很難引發互聯網公司的足夠重視，他們更看重的是站點的用戶體驗、性能等這些更直觀的方面。2011年，多個網站用戶信息泄露風波震驚整個互聯網，網站安全也再次引發業內的重視。從技術上講，網站的安全瓶頸主要在後端，可是隨着前端技術的發展，富客戶端應用愈來愈多，前端安全問題也隨之增多，例如，跨站點攻擊、cookie劫持等。這些攻擊經過設置JavaScript變量、HTML標籤的值和屬性、CSS屬性值等方式僞造惡意代碼來達到攻擊的目的，那麼規範的前端代碼至少要針對這些方面作必要的安全校驗和必要的編碼，提升代碼的安全性。
前端代碼若是能遵照如上的幾個規範點，則基本上能稱之爲高質量的代碼。須要強調的是酷炫的技術只是浮雲，良好的編碼習慣和意識才是真功夫