前端知識體系及修煉

本文轉載自查看原文 2015-11-04 23:27 2419

前端開發的核心是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，有道筆記等。