前端知識體系及修煉攻略
前端簡介
Web前端開發工程師是一個很新的職業,在國內乃至國際上真正開始受到重視的時間不超過5年。Web前端開發是從網頁製作演變而來的,名稱上有很明顯的時代特徵。隨著人們對使用者體驗的要求越來越高,前端開發的技術難度越來越大,Web前端開發工程師這一職業終於從設計和製作不分的局面中獨立出來。
早期的前端其實就是Table佈局,後來發展到所謂的Div + CSS網站重構,再到現在的讓人眼花繚亂的各種各樣的新技術,Web前端技術發展是非常快速的,因此選擇了前端這個行業就意味著不停的學習吧。讓我們先看看張克軍繪製的前端知識體系結構:
前端開發的核心是HTML + CSS + JavaScript。本質上它們構成一個MVC框架,即HTML作為資訊模型(Model),CSS控制樣式(View),JavaScript負責排程資料和實現某種展現邏輯(Controller)。
HTML
1. 標籤的分類
1. 標籤表示一個元素
2. 按性質劃分: Block-Level和Inline-Level
3. 按語義劃分:
- Headings: h1, h2, h3, h4, h5, h6
- Paragraphs: p
- Text Formatting: em, strong, sub, del, ins, small
- Lists: ul, li, ol, dl, dt, dd
- Tables: table, thead, tbody, tr, th, td
- Forms and Input: form, input, select, textarea
- Others: div, span, a, img, <!---->
- HTML5: header, footer, article, section
2. XHTML
XHTML 於2000年的1月26日成為 W3C 標準。W3C 將 XHTML 定義為最新的HTML版本。XHTML 將逐漸取代 HTML。XHTML是通過把 HTML 和 XML 各自的長處加以結合形成的。XHTML 語法規則如下:
- 屬性名和標籤名稱必須小寫
- 屬性值必須加引號
- 屬性不能簡寫
- 用 Id 屬性代替 name 屬性
- XHTML 元素必須被正確地巢狀
- XHTML 元素必須被關閉
3. 標籤的語義化
為表達語義而標記文件,而不是為了樣式,結構良好的文件可以向瀏覽器傳達儘可能多的語義,不論是瀏覽器位於掌上電腦還是時髦的桌面圖形瀏覽器。結構良好的文件都能向用戶傳達視覺化的語義,即使是在老的瀏覽器,或是在被使用者關閉了 CSS 的現代瀏覽器中。同時結構良好的HTML程式碼也有助於搜尋引擎索引你的網站。
- 不要使用table佈局,table是用來表格顯示的。
- 不要到處濫用div標籤,div是用來分塊用的。
- 不要使用樣式標籤,如font, center, big, small, b, i,樣式可以用CSS來控制,b和i可以用strong和em來代替。
- 不要使用換行標籤<br />和空格來控制樣式,請用CSS。
- 儘量不要使用內聯CSS
CSS
1. CSS基礎知識
- 層疊和繼承
- 優先順序
- 盒模型
- 定位
- 浮動
2. CSS進階
- CSS Sprite
- 瀏覽器相容性
- IE HasLayout和Block Format Content
- CSS Frameworks
- CSS3
- CSS效能優化
- LESS and SASS
CSS Sprite
CSS Sprite主要用於前端效能優化的一種技術,原理是通過將多張背景圖片合成在一張圖片上從而減少HTTP請求,加快載入速度。
瀏覽器相容性
絕大部分情況下我們需要考慮瀏覽器的相容性,目前正在使用的瀏覽器版本非常多,IE6, IE7, IE8, IE9, IE10, Chrome, Firefox, Safari。
IE HasLayout和Block Format Content
IE HasLayout是一個 Internet Explorer for Windows的私有概念,它決定了一個元素如何顯示以及約束其包含的內容、如何與其他元素互動和建立聯絡、如何響應和傳遞應用程式事件、使用者事件等。這種渲染特性可以通過某些 CSS 屬性被不可逆轉地觸發。而有些 HTML 元素則預設就具有”layout”。目前只有IE6和IE7有這個概率。BFC是 W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。這個其實和瀏覽器的相容性有關,因為絕大部分的相容性問題都是它們引起的。參考:CSS BFC和IE Haslayout介紹
CSS Framework
CSS框架是一系列CSS檔案的集合體,包含了基本的元素重置,頁面排版、網格佈局、表單樣式、通用規則等程式碼塊,用於簡化web前端開發的工作,提高工作效率。目前常見框架有:
還是一個比較出名和特殊的框架是Twitter的Bootstrap。Bootstrap是快速開發Web應用程式的前端工具包。它是一個CSS和HTML的集合,它使用了最新的瀏覽器技術,給你的Web開發提供了時尚的版式,表單,buttons,表格,網格系統等等。它是基於Less開發的。不支援IE6,在IE7和IE8裡效果也不咋地。
CSS3
雖然CSS3還沒有正式成為標準,但是包括IE9+, chrome, Firefox等現代瀏覽器都支援CSS3。CSS提供了好多以前需要用JavaScript和切圖才能搞定的功能,目前主要功能有:
- 圓角
- 多背景
- @font-face
- 動畫與漸變
- 漸變色
- Box陰影
- RGBa-加入透明色
- 文字陰影
CSS效能優化
CSS 程式碼是控制頁面顯示樣式與效果的最直接“工具”,但是在效能調優時他們通常被 Web 開發工程師所忽略,而事實上不規範的 CSS 會對頁面渲染的效率有嚴重影響,尤其是對於結構複雜的 Web 2.0 頁面,這種影響更是不可磨滅。所以,寫出規範的、高效能的 CSS 程式碼會極大的提高應用程式的效率。參考CSS效能優化探討
LESS和SASS
LESS和SASS都是 CSS 前處理器,用來為 CSS 增加一些程式設計的的特性,無需考慮瀏覽器的相容性問題,例如你可以在 CSS 中使用變數、簡單的程式邏輯、函式等等在程式語言中的一些基本技巧,可以讓你的 CSS 更見簡潔,適應性更強,程式碼更直觀等諸多好處。
SASS基於Ruby開發。LESS既可以在客戶端執行,也可以藉助Node.js或者Rhino在服務端執行。
JavaScript
1. JavaScript基礎知識
- 資料型別
- 變數
- 表示式與運算子
- 控制語句
- 函式
- 異常
- OO
- 事件
- BOM
- 閉包
2. JavaScript進階
- DOM
- JSON
- AJAX
- JavaScript Frameworks
- HTML5
- 前端模板
- 前端MVC
- 模組化開發
- JavaScript單元測試
- JavaScript設計模式
- NodeJS
- ES5
DOM
DOM即文件物件模型,HTML DOM 定義了訪問和操作HTML文件的標準方法。幾乎所有的現代瀏覽器都能很好的支援DOM了。
JSON
JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式,易於人閱讀和編寫,同時也易於機器解析和生成。是目前事實上資料交換的標準格式,幾乎所有語言都支援JSON,比XML強太多了。
AJAX
AJAX即“Asynchronous JavaScript and XML”(非同步JavaScript和XML),AJAX並非縮寫詞,而是由Jesse James Gaiiett創造的名詞,由Google發揚光大。用於建立更好更快以及互動性更強的 Web 應用程式的技術。
JavaScript Frameworks
JavaScript Frameworks可以極大簡化我們JavaScript程式設計的工作量,它主要提供了以下幾個主要功能: DOM操作,跨瀏覽器相容性,以及程式架構。當然像jQuery它本身其實並不是一個框架,它是一個庫(lib)。目前主流的框架或庫有如下幾個:
以上都是一些重量級的框架或者庫,還是小巧的庫也是強烈推薦的,比如Underscore
HTML5
HTML5同CSS3類似,即雖然沒有成為標準,但是主流的瀏覽器都支援了。HTML5不是HMTL,雖然也提供了一些新標籤,但是它的主要用途還是JavaScript。HTML5主要提供以下功能:
- 本地音訊視訊播放
- Canvas/SVG
- 地理資訊
- 硬體加速
- 本地執行
- 本地儲存
- 從桌面拖放檔案到瀏覽器上傳
- 語義化標籤,Form表單
前端模板
前端模板主要是為了解決複雜的資料拼接問題,可以將模板語言轉換化為HTML結構,可以大大簡化工作量,同時代碼的可維護性得到很大的提高。目前比較主流前端模板有:
前端MVC
Web應用的功能越來越強,Javascript程式碼也越來越多,大量的JS程式碼要以何種架構來組織就成了一個亟待解決的問題,於是就有人把傳統的MVC架構移植到前端來解決這些問題。目前主流前端MVC框架主要有以下這些:
TodoMVC用上面所有的MVC框架寫了同一個示例程式碼“Todo List”,是個學習對比MVC框架的好地方。
模組化開發
其實現在JavaScript模組化是個很熱門的東西了,主要特點是“模組化開發,按需載入“。這其中CommonJS組織定義了AMD的規範用來規範瀏覽器端的模組定義。RequireJS和SeaJS是實現了AMD的兩個優秀的框架。詳見:http://www.weakweb.com/articles/341.html
JavaScript單元測試
但是隨著單元測試的普及,尤其是敏捷開發的推動,湧現了許多優秀的JavaScript單元測試框架,見詳細列表。所有的這些框架基本上都能對Javascript程式碼進行很好的測試,當然UI部分的程式碼測試一樣比較麻煩,但是我們可以通過精心構造我們的測試程式碼來測試部分UI程式碼。主流的測試框架如下:
目前jQuery的所有程式碼都是通過QUnit進行測試的,並且將測試程式碼放在Github上了,大家感興趣可以參考一下。詳見:JavaScript單元測試框架介紹
JavaScript設計模式
好多設計模式是可以應用於JavaScript的,比如經常用到的事件處理的觀察者模式,因此設計模式是提升編碼層次的必學技術。
NodeJS
NodeJS現在是比較火熱的,其最大的貢獻就是把JavaScript移植到伺服器端了,這樣前端和後端就可以使用同樣的技術,方便統一開發。而且NodeJS是非阻塞呼叫的,在特定領域效能是非常強勁的。而且這是前端開發人員進軍後臺開發的好機會,進而前後端統一開發,但又不用去學習其它後臺開發語言。
ES5
ES5就是ECMAScript 5,也就是最新的JavaScript規範,對之前的JavaScript作了很多改進,增加了好多新的特性,比如JSON,而且現代主流瀏覽器都開始支援ES5了,還是非常有必要學習一下的。
Others
下面是一些和HTML, CSS, JavaScript沒有直接關係,但是對於前端開發同樣非常重要的一些技術。
- 響應式設計
- Http1.1
- Web移動開發
- 前端安全
- 跨域處理
- 除錯工具
- SEO
- A/B test
- 可用性/可訪問性
- 前端流程/部署
- 正則表示式
- 編輯器
- 瀏覽器外掛開發
- 瀏覽器原理
響應式設計
伴隨著各種智慧裝置的流行,響應式設計現在是非常火熱。以前做網頁只要面向PC機的瀏覽器,頁面直接固定寬度就行,比如960px,而現在通過手機的訪問量已經超過PC機,並且裝置的尺寸多種多樣,未來會更多。在這種背景下,網頁支援所有裝置進行訪問是基本要求了,而響應式設計能很好的解決這些問題。
Http1.1
HTTP對於前端開發來說還是很重要的,比如最簡單的GET,POST方式,Request/Response 頭部,狀態碼等。
Web移動開發
現在移動開發非常非常流行了,而開發方式一般是native的方式或者Web方式,作為前端開發人員來說自然是去學習Web移動開發了。PhoneGap是必學的,前端層面的框架如jQueryMobile, Sencha Touch, jQTouch等都是不錯的選擇。
前端安全
隨著前端技術的發展,安全問題已經從伺服器悄然來到了每一個使用者的的面前,盜取使用者資料, 製造惡意的可以自我複製的蠕蟲程式碼,讓病毒在使用者間傳播,使伺服器當掉. 更有甚者可能會在使用者不知覺得情況下,讓使用者成為攻擊者,這絕對不是駭人聽聞。富客戶端的應用越來越廣,前端的安全問題也隨之增多。常見的攻擊方法有:
- XSS,跨站指令碼攻擊(Cross Site Script)。它指的是惡意攻擊者往Web頁面裡插入惡意html程式碼,當用戶瀏覽該頁之時,嵌入的惡意html程式碼會被執行,從而達到惡意使用者的特殊目的。
- CSRF(Cross Site Request Forgery),跨站點偽造請求。顧名思義就是 通過偽造連線請求在使用者不知情的情況下,讓使用者以自己的身份來完成攻擊者需要達到的一些目的。
- cookie劫持,通過獲取頁面的許可權,在頁面中寫一個簡單的到惡意站點的請求,並攜帶使用者的cookie 獲取cookie後通過cookie 就可以直以被盜使用者的身份登入站點。
跨域處理
同源策略規定跨域之間的指令碼是隔離的,一個域的指令碼不能訪問和操作另外一個域的絕大部分屬性和方法。所謂的跨域處理就是處於不用域之間的腳步互相呼叫,目前有很多方法來處理它。
除錯工具
前端的除錯工具很多,比如Firebug,Webkit核心的web inspector, IE的iedeveloper。HTTP相關的fiddler, httpwatch等,還有格式化程式碼的jsbeatutifier,它有助於閱讀壓縮處理過的JavaScript程式碼。IETester可以模擬所有的IE版本,是除錯IE相容性的好工具。
SEO
前端開發人員很多時候還是需要了解搜尋引擎優化的。
A/B test
A / B測試的核心就是:確定兩個元素或版本(A和B)哪個版本更好,你需要同時實驗兩個版本。最後,選擇最好的版本使用。
可用性/可訪問性
可用性指的是:產品是否容易上手,使用者能否完成任務,效率如何,以及這過程中使用者的主觀感受可好,是從使用者的角度來看產品的質量。可用性好意味著產品質量高,是企業的核心競爭力。
可訪問性:上網使用者中那些視力受損的人,通過螢幕閱讀器使用鍵盤命令將網頁的內容讀給他們聽。以語義化的HTML(結構和表現相分離的HTML)編寫的網頁檔案,就可以讓此類使用者更容易導航,且網頁檔案中的重要資訊也更有可能被這些使用者找到。
可以通過逐步強化你的網站功能,同時對支援性進行測試。運用“漸進增強”和“平穩退化”原則開發網站。
正則表示式
估計絕大部分的程式語言都會用到它,當處理字串時可以極大的簡化你的工作。必學啊。
編輯器
人人都有自己喜歡的編輯器,從前端的角度看,Eclipse + Aptana, Notepad++, VIM都是不錯的選擇。我個人比較喜歡用Notepad++,簡潔,快。
前端流程/部署
當前端專案比較複雜時,我們就應該考慮引入自動構建,自動化部署等技術了。可以使用JSLint來對JavaScript進行語法檢查,用CSSLint或CSS Validator檢查CSS語法,用JSMin或YUI Compressor對JavaScript程式碼進行壓縮,可以使用JSDoc/YUIdoc進行文件自動化生成,使用Jasmine/JsTestDriver進行自動化單元測試,可以使用Ant/Maven/Make進行自動構建部署。不過伴隨著NodeJS的流行,Grunt,Bower和Yeoman現在幾乎是前端最流行的自動化的專案構建工具了。詳見Web前端開發流程自動化
瀏覽器外掛開發
瀏覽器是我們的工作平臺,在上面開發外掛是很有趣的,很多時候也是很有用的。
瀏覽器原理
前端工作絕大部分都是執行在瀏覽器上面,所以瞭解瀏覽器原理有助於更深入的理解各種技術的原理,工作過程。
溝通能力
優秀的前端工程師需要具備良好的溝通能力,因為你的工作與很多人的工作息息相關。在任何情況下,前端工程師至少都要滿足下列四類客戶的需求。
- 1. 產品經理——這些是負責策劃應用程式的一群人。他們能夠想象出怎樣通過應用程式來滿足使用者需求,以及怎樣通過他們設計的模式賺到錢(但願如此)。一般來說,這些人追求的是豐富的功能。
- 2. UI設計師——這些人負責應用程式的視覺設計和互動模擬。他們關心的是使用者對什麼敏感、互動的一貫性以及整體的好用性。他們熱衷於流暢靚麗但並不容易實現的使用者介面。
- 3. 專案經理——這些人負責實際地執行和維護應用程式。專案管理的主要關注點,無外乎正常執行時間(uptime)——應用程式始終正常可用的時間、效能和截止日期。專案經理追求的目標往往是儘量保持事情的簡單化,以及不在升級更新時引入新問題。
- 4. 終端使用者——當然是應用程式的主要消費者。儘管我們不會經常與終端使用者打交道,但他們的反饋意見至關重要;沒人想用的應用程式毫無價值。終端使用者要求最多的就是對個人有用的功能,以及競爭性產品所具備的功能。
那麼,前端工程師應該最關注哪些人的意見呢?答案是所有這四類人。優秀的前端工程師必須知道如何平衡這四類人的需求和預期,然後在此基礎上拿出最佳解決方案。由於前端工程師處於與這四類人溝通的交匯點上,因此其溝通能力的重要性不言而喻。如果一個非常酷的新功能因為會影響前端效能,必須刪繁就簡,你怎麼跟產品經理解釋?再比如,假設某個設計如果不改回原方案可能會給應用程式造成負面影響,你怎麼才能說服UI設計師?作為前端工程師,你必須瞭解每一類人的想法從何而來,必須能拿出所有各方都能接受的解決方案。從某種意義上說,優秀的前端工程師就像是一位大使,需要時刻抱著外交官的心態來應對每一天的工作。
如何提高前端技術
- Github是一個優秀的程式碼託管網站,我們可以在上建立我們個人的專案,同時也是學習的好地方,我們可以關注其它優秀的專案。JSFiddle是一個web開發人員的練習場,一個可以在很多方面應用的工具。我們可以用他來線上編輯一些HTML,CSS,javascript片段。你編輯的程式碼可以與其他人分享,或嵌入你的部落格等
- 閱讀優秀的開原始碼
- 參加前端聚會
- 關注技術發展趨勢,瞭解最新的行業技術,可以通過訂閱知名部落格,閱讀技術新聞獲取
- 寫部落格/記筆記,可以進行知識積累。部落格可以自己買空間或者各大知名部落格網站。筆記的話比如evernote,有道筆記等。
按階段劃分
如何劃分仁者見仁,智者見智,要根據專案的情況作出調整,以下是我根據我自身的經驗作出的劃分,給大家作個參考。
第一階段
入門,打基礎同時能參與到專案中去。
- HMTL & XHTML
- CSS基礎知識
- JavaScript基礎知識
- DOM
- JSON
- AJAX
- JavaScript Frameworks
- 編輯器
第二階段
掌握前端核心技術,可以獨立幹活。
- HTML5標籤,TML標籤語義化
- CSS Sprite
- 瀏覽器相容性
- IE HasLayout和Block Format Content
- CSS3
- 精通JavaScript Frameworks
- HTML5
- 前端模板
- 前端MVC
- 模組化開發
- Http1.1
- 除錯工具
- 正則表示式
- 響應式設計
第三階段
把握整個前端專案,做整個前端專案的架構師。
- CSS效能優化
- LESS and SASS
- JavaScript單元測試
- JavaScript設計模式
- NodeJS
- ES5
- Web移動開發
- 瀏覽器外掛開發
- 前端安全
- 跨域處理
- SEO
- A/B test
- 可用性/可訪問性
- 前端流程/部署
- 瀏覽器原理
第四階段
一代宗師。
- 不停的學習新的技術
- 互動設計能力,管理能力
前端工程師未來的路在哪?
第一條路是走技術流路線,即深入研究前端相關的各項技術,比如瀏覽器原理,JavaScript本身的研究,W3C各種標準等。前端技術發展很快,各種新技術層出不窮,這條路走下去是很累的。
第二路是往互動設計方向走,前端工程師做到一定程度後互動設計能力也會得到很大的提高,對整個資訊架構的把握能力也會更強。可以很好的彌補視覺設計師在交換設計上的不足。這條路其實和第一條是不衝突的,甚至可以理解為同一條路。
第三條路是往後走,即去學習後臺開發的技術,比如JAVA/PHP等,其實絕大部分傳統的後臺開發人員就是這個狀態,即前後臺都做。個人認為這樣的話其實已經走回老路了,畢竟前端就是從原來的後臺開發那裡獨立出來的。
最後一條路就是往管理方向,比如專案經理,或者乾脆轉行,比如公務員等。