前端工程師知識體系詳解

　　下圖是前端工程師圖解：

　　

　　前端開發(fā)的核心是HTML + CSS + Java。本質(zhì)上它們構(gòu)成一個MVC框架，即HTML作為信息模型（Model），CSS控制樣式（View），Java負(fù)責(zé)調(diào)度數(shù)據(jù)和實現(xiàn)某種展現(xiàn)邏輯（Controller）。

　　HTML

　　1.標(biāo)簽的分類

　　- 標(biāo)簽表示一個元素

　　按性質(zhì)劃分： Block-Level和Inline-Level

　　按語義劃分：

　　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 標(biāo)準(zhǔn)。W3C 將 XHTML 定義為最新的HTML版本。XHTML 將逐漸取代 HTML。XHTML是通過把 HTML 和 XML 各自的長處加以結(jié)合形成的。XHTML 語法規(guī)則如下：

　　- 屬性名和標(biāo)簽名稱必須小寫

　　屬性值必須加引號

　　屬性不能簡寫

　　用 Id 屬性代替 name 屬性

　　XHTML 元素必須被正確地嵌套

　　XHTML 元素必須被關(guān)閉

　　3.標(biāo)簽的語義化

　　為表達(dá)語義而標(biāo)記文檔，而不是為了樣式，結(jié)構(gòu)良好的文檔可以向瀏覽器傳達(dá)盡可能多的語義，不論是瀏覽器位于掌上電腦還是時髦的桌面圖形瀏覽器。結(jié)構(gòu)良好的文檔都能向用戶傳達(dá)可視化的語義，即使是在老的瀏覽器，或是在被用戶關(guān)閉了 CSS 的現(xiàn)代瀏覽器中。同時結(jié)構(gòu)良好的HTML代碼也有助于搜索引擎索引你的網(wǎng)站。

　　- 不要使用table布局，table是用來表格顯示的。

　　不要到處濫用div標(biāo)簽，div是用來分塊用的

　　不要使用樣式標(biāo)簽，如font， center， big， small， b， i，樣式可以用CSS來控制，b和i可以用strong和em來代替。

　　不要使用換行標(biāo)簽

　　和空格來控制樣式，請用CSS。

　　盡量不要使用內(nèi)聯(lián)CSS

　　CSS

　　1.基礎(chǔ)

　　- 層疊和繼承

　　優(yōu)先級

　　盒模型

　　定位

　　浮動

　　2.進(jìn)階

　　- CSS Sprite：CSS Sprite主要用于前端性能優(yōu)化的一種技術(shù)，原理是通過將多張背景圖片合成在一張圖片上從而減少HTTP請求，加快載入速度。

　　瀏覽器兼容性：絕大部分情況下我們需要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本非常多，IE6， IE7， IE8， IE9， IE10， Chrome， Firefox， Safari。

　　IE HasLayout和Block Format Content：IE HasLayout是一個 Internet Explorer for Windows的私有概念，它決定了一個元素如何顯示以及約束其包含的內(nèi)容、如何與其他元素交互和建立聯(lián)系、如何響應(yīng)和傳遞應(yīng)用程序事件、用戶事件等。這種渲染特性可以通過某些 CSS 屬性被不可逆轉(zhuǎn)地觸發(fā)。而有些 HTML 元素則默認(rèn)就具有”layout”。目前只有IE6和IE7有這個概率。BFC是 W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。這個其實和瀏覽器的兼容性有關(guān)，因為絕大部分的兼容性問題都是它們引起的。

　　CSS Frameworks：

　　CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁面排版、網(wǎng)格布局、表單樣式、通用規(guī)則等代碼塊，用于簡化web前端開發(fā)的工作，提高工作效率。目前常見框架有：

　　960 Grid System

　　Blueprint CSS

　　Bluetrip

　　Minimum Page

　　還是一個比較出名和特殊的框架是Twitter的Bootstrap。Bootstrap是快速開發(fā)Web應(yīng)用程序的前端工具包。它是一個CSS和HTML的集合，它使用了最新的瀏覽器技術(shù)，給你的Web開發(fā)提供了時尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。它是基于Less開發(fā)的。不支持IE6，在IE7和IE8里效果也不咋地。

　　CSS3：

　　雖然CSS3還沒有正式成為標(biāo)準(zhǔn)，但是包括IE9+， chrome， Firefox等現(xiàn)代瀏覽器都支持CSS3。CSS提供了好多以前需要用Java和切圖才能搞定的功能，目前主要功能有：

　　圓角

　　多背景

　　@font-face

　　動畫與漸變

　　漸變色

　　Box陰影

　　RGBa-加入透明色

　　文字陰影

　　CSS性能優(yōu)化：CSS 代碼是控制頁面顯示樣式與效果的最直接“工具”，但是在性能調(diào)優(yōu)時他們通常被 Web 開發(fā)工程師所忽略，而事實上不規(guī)范的 CSS 會對頁面渲染的效率有嚴(yán)重影響，尤其是對于結(jié)構(gòu)復(fù)雜的 Web 2.0 頁面，這種影響更是不可磨滅。所以，寫出規(guī)范的、高性能的 CSS 代碼會極大的提高應(yīng)用程序的效率。

　　LESS and SASS：CSS 預(yù)處理器，用來為 CSS 增加一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你可以在 CSS 中使用變量、簡單的程序邏輯、函數(shù)等等在編程語言中的一些基本技巧，可以讓你的 CSS 更見簡潔，適應(yīng)性更強(qiáng)，代碼更直觀等諸多好處。SASS基于Ruby開發(fā)。LESS既可以在客戶端運(yùn)行，也可以借助Node.js或者Rhino在服務(wù)端運(yùn)行。

　　java

　　1.基礎(chǔ)

　　- 數(shù)據(jù)類型

　　變量

　　表達(dá)式與運(yùn)算符

　　控制語句

　　函數(shù)

　　異常

　　OO

　　事件

　　BOM

　　閉包

　　2.進(jìn)階

　　- DOM：DOM即文檔對象模型，HTML DOM 定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法。幾乎所有的現(xiàn)代瀏覽器都能很好的支持DOM了。

　　JSON：（Java Object Notation） 是一種輕量級的數(shù)據(jù)交換格式，易于人閱讀和編寫，同時也易于機(jī)器解析和生成。是目前事實上數(shù)據(jù)交換的標(biāo)準(zhǔn)格式，幾乎所有語言都支持JSON，比XML強(qiáng)太多了。

　　AJAX：即“Asynchronous Java and XML”（異步Java和- XML），AJAX并非縮寫詞，而是由Jesse James Gaiiett創(chuàng)造的名詞，由Google發(fā)揚(yáng)光大。用于創(chuàng)建更好更快以及交互性更強(qiáng)的 Web 應(yīng)用程序的技術(shù)。

　　Java Frameworks：極大簡化我們Java編程的工作量，它主要提供了以下幾個主要功能： DOM操作，跨瀏覽器兼容性，以及程序架構(gòu)。當(dāng)然像jQuery它本身其實并不是一個框架，它是一個庫（lib）。目前主流的框架或庫有如下幾個：

　　jQuery

　　YUI

　　DOJO

　　HTML5：同CSS3類似，即雖然沒有成為標(biāo)準(zhǔn)，但是主流的瀏覽器都支持了。HTML5不是HMTL，雖然也提供了一些新標(biāo)簽，但是它的主要用途還是Java。HTML5主要提供以下功能：

　　本地音頻視頻播放

　　Canvas/SVG

　　地理信息

　　硬件加速

　　本地運(yùn)行

　　本地存儲

　　從桌面拖放文件到瀏覽器上傳

　　語義化標(biāo)簽，F(xiàn)orm表單

　　前端模板：主要是為了解決復(fù)雜的數(shù)據(jù)拼接問題，可以將模板語言轉(zhuǎn)換化為HTML結(jié)構(gòu)，可以大大簡化工作量，同時代碼的可維護(hù)性得到很大的提高。目前比較主流前端模板有：

　　MustCache

　　JsRender

　　前端MVC:Web應(yīng)用的功能越來越強(qiáng)，Java代碼也越來越多，大量的JS代碼要以何種架構(gòu)來組織就成了一個亟待解決的問題，于是就有人把傳統(tǒng)的MVC架構(gòu)移植到前端來解決這些問題。目前主流前端MVC框架主要有以下這些：

　　Backbone.js

　　Spine

　　YUI

　　Agility.js

　　Ember.js

　　Batman.js

　　Dojo

　　AngularJS（MVVM）

　　KnockoutJS（MVVM）

　　模塊化開發(fā)：特點是“模塊化開發(fā)，按需加載“。這其中CommonJS組織定義了AMD的規(guī)范用來規(guī)范瀏覽器端的模塊定義。RequireJS和SeaJS是實現(xiàn)了AMD的兩個優(yōu)秀的框架。詳見：http://www.weakweb.com/articles/341.html

　　Java單元測試：QUnit

　　Java設(shè)計模式

　　NodeJS：把Java移植到服務(wù)器端了，這樣前端和后端就可以使用同樣的技術(shù)，方便統(tǒng)一開發(fā)。而且NodeJS是非阻塞調(diào)用的，在特定領(lǐng)域性能是非常強(qiáng)勁的。而且這是前端開發(fā)人員進(jìn)軍后臺開發(fā)的好機(jī)會，進(jìn)而前后端統(tǒng)一開發(fā)，但又不用去學(xué)習(xí)其它后臺開發(fā)語言。

　　ES5:ECMA 5，也就是最新的Java規(guī)范，對之前的Java作了很多改進(jìn)，增加了好多新的特性，比如JSONECMA 5，也就是最新的Java規(guī)范，對之前的Java作了很多改進(jìn)，增加了好多新的特性，比如JSON。

　　Others

　　響應(yīng)式設(shè)計：伴隨著各種智能設(shè)備的流行，響應(yīng)式設(shè)計現(xiàn)在是非?；馃帷Ｒ郧白鼍W(wǎng)頁只要面向PC機(jī)的瀏覽器，頁面直接固定寬度就行，比如960px，而現(xiàn)在通過手機(jī)的訪問量已經(jīng)超過PC機(jī)，并且設(shè)備的尺寸多種多樣，未來會更多。在這種背景下，網(wǎng)頁支持所有設(shè)備進(jìn)行訪問是基本要求了，而響應(yīng)式設(shè)計能很好的解決這些問題。

　　Http1.1：GET，POST方式，Request/Response 頭部，狀態(tài)碼等。

　　Web移動開發(fā)：開發(fā)方式一般是native的方式或者Web方式，作為前端開發(fā)人員來說自然是去學(xué)習(xí)Web移動開發(fā)了。PhoneGap是必學(xué)的，前端層面的框架如jQueryMobile， Sencha Touch， jQTouch等都是不錯的選擇。

　　前端安全：隨著前端技術(shù)的發(fā)展，安全問題已經(jīng)從服務(wù)器悄然來到了每一個用戶的的面前，盜取用戶數(shù)據(jù)， 制造惡意的可以自我復(fù)制的蠕蟲代碼，讓病毒在用戶間傳播，使服務(wù)器當(dāng)?shù)簟?更有甚者可能會在用戶不知覺得情況下，讓用戶成為攻擊者，這絕對不是駭人聽聞。富客戶端的應(yīng)用越來越廣，前端的安全問題也隨之增多。常見的攻擊方法有：

　　XSS，跨站腳本攻擊（Cross Site ）。它指的是惡意攻擊者往Web頁面里插入惡意html代碼，當(dāng)用戶瀏覽該頁之時，嵌入的惡意html代碼會被執(zhí)行，從而達(dá)到惡意用戶的特殊目的。

　　CSRF（Cross Site Request Forgery），跨站點偽造請求。顧名思義就是 通過偽造連接請求在用戶不知情的情況下，讓用戶以自己的身份來完成攻擊者需要達(dá)到的一些目的。

　　cookie劫持，通過獲取頁面的權(quán)限，在頁面中寫一個簡單的到惡意站點的請求，并攜帶用戶的cookie 獲取cookie后通過cookie 就可以直以被盜用戶的身份登錄站點。

　　跨域處理：同源策略規(guī)定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。所謂的跨域處理就是處于不用域之間的腳步互相調(diào)用，目前有很多方法來處理它。

　　調(diào)試工具：前端的調(diào)試工具很多，比如Firebug，Webkit核心的web inspector， IE的iedeveloper。HTTP相關(guān)的fiddler， httpwatch等，還有格式化代碼的jsbeatutifier，它有助于閱讀壓縮處理過的Java代碼。IETester可以模擬所有的IE版本，是調(diào)試IE兼容性的好工具。

　　SEO：搜索引擎優(yōu)化

　　A/B test：確定兩個元素或版本（A和B）哪個版本更好，你需要同時實驗兩個版本。最后，選擇最好的版本使用。

　　可用性/可訪問性：

　　可用性指的是：產(chǎn)品是否容易上手，用戶能否完成任務(wù)，效率如何，以及這過程中用戶的主觀感受可好，是從用戶的角度來看產(chǎn)品的質(zhì)量?？捎眯院靡馕吨a(chǎn)品質(zhì)量高，是企業(yè)的核心競爭力。

　　可訪問性：上網(wǎng)用戶中那些視力受損的人，通過屏幕閱讀器使用鍵盤命令將網(wǎng)頁的內(nèi)容讀給他們聽。以語義化的HTML（結(jié)構(gòu)和表現(xiàn)相分離的HTML）編寫的網(wǎng)頁文件，就可以讓此類用戶更容易導(dǎo)航，且網(wǎng)頁文件中的重要信息也更有可能被這些用戶找到。

　　前端流程/部署：Grunt，Bower和Yeoman現(xiàn)在幾乎是前端最流行的自動化的項目構(gòu)建工具

　　正則表達(dá)式

　　瀏覽器插件開發(fā)

　　瀏覽器原理

　　溝通能力

　　優(yōu)秀的前端工程師需要具備良好的溝通能力，因為你的工作與很多人的工作息息相關(guān)。在任何情況下，前端工程師至少都要滿足下列四類客戶的需求。

　　產(chǎn)品經(jīng)理——這些是負(fù)責(zé)策劃應(yīng)用程序的一群人。他們能夠想象出怎樣通過應(yīng)用程序來滿足用戶需求，以及怎樣通過他們設(shè)計的模式賺到錢（往往事與愿違）。一般來說，這些人追求的是豐富的功能。

　　UI設(shè)計師——這些人負(fù)責(zé)應(yīng)用程序的視覺設(shè)計和交互模擬。他們關(guān)心的是用戶對什么敏感、交互的一貫性以及整體的好用性。他們熱衷于流暢靚麗但并不容易實現(xiàn)的用戶界面，但考慮問題往往不周全。

　　項目經(jīng)理——這些人負(fù)責(zé)實際地運(yùn)行和維護(hù)應(yīng)用程序。項目管理的主要關(guān)注點，無外乎正常運(yùn)行時間（uptime）——應(yīng)用程序始終正?？捎玫臅r間、性能和截止日期。項目經(jīng)理追求的目標(biāo)往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。

　　最終用戶——當(dāng)然是應(yīng)用程序的主要消費者。盡管我們不會經(jīng)常與最終用戶打交道，但他們的反饋意見至關(guān)重要；沒人想用的應(yīng)用程序毫無價值。最終用戶要求最多的就是對個人有用的功能，以及競爭性產(chǎn)品所具備的功能。

　　從某種意義上說，優(yōu)秀的前端工程師就像是一位大使，需要時刻抱著外交官的心態(tài)來應(yīng)對每一天的工作。

　　如何提高前端技術(shù)

　　- Github是一個優(yōu)秀的代碼托管網(wǎng)站，我們可以在上創(chuàng)建我們個人的項目，同時也是學(xué)習(xí)的好地方，我們可以關(guān)注其它優(yōu)秀的項目。JSFiddle是一個web開發(fā)人員的練習(xí)場，一個可以在很多方面應(yīng)用的工具。我們可以用他來在線編輯一些HTML，CSS，java片段。你編輯的代碼可以與其他人分享，或嵌入你的博客等

　　- 閱讀優(yōu)秀的開源代碼

　　- 關(guān)注技術(shù)發(fā)展趨勢，了解最新的行業(yè)技術(shù)，可以通過訂閱知名博客，閱讀技術(shù)新聞獲取

　　- 寫博客/記筆記，可以進(jìn)行知識積累。

　　前端修煉之路

　　入門：打基礎(chǔ)同時能參與到項目中去。

　　HMTL & XHTML

　　CSS基礎(chǔ)知識

　　Java基礎(chǔ)知識

　　DOM

　　JSON

　　AJAX

　　Java Frameworks

　　深入：掌握前端核心技術(shù)，可以獨立干活。

　　HTML5標(biāo)簽，TML標(biāo)簽語義化

　　CSS Sprite

　　瀏覽器兼容性

　　IE HasLayout和Block Format Content

　　CSS3

　　精通Java Frameworks

　　HTML5

　　前端模板

　　前端MVC

　　模塊化開發(fā)

　　Http1.1

　　調(diào)試工具

　　正則表達(dá)式

　　響應(yīng)式設(shè)計

　　潛出：把握整個前端項目，做整個前端項目的架構(gòu)師。

　　CSS性能優(yōu)化

　　LESS and SASS

　　Java單元測試

　　Java設(shè)計模式

　　NodeJS

　　ES5

　　Web移動開發(fā)

　　瀏覽器插件開發(fā)

　　前端安全

　　跨域處理

　　SEO

　　A/B test

　　可用性/可訪問性

　　前端流程/部署

　　瀏覽器原理

　　出師：一代宗師。

　　不停的學(xué)習(xí)新的技術(shù)

　　交互設(shè)計能力，管理能力

　　前端的未來

　　- 走技術(shù)流路線，即深入研究前端相關(guān)的各項技術(shù)，比如瀏覽器原理，Java本身的研究，W3C各種標(biāo)準(zhǔn)等。前端技術(shù)發(fā)展很快，各種新技術(shù)層出不窮，這條路走下去是很累的。

　　往交互設(shè)計方向走，前端工程師做到一定程度后交互設(shè)計能力也會得到很大的提高，對整個信息架構(gòu)的把握能力也會更強(qiáng)?？梢院芎玫膹浹a(bǔ)視覺設(shè)計師在交換設(shè)計上的不足。這條路其實和第一條是不沖突的，甚至可以理解為同一條路。

　　往后走，即去學(xué)習(xí)后臺開發(fā)的技術(shù)，比如JAVA/PHP等，其實絕大部分傳統(tǒng)的后臺開發(fā)人員就是這個狀態(tài)，即前后臺都做。個人認(rèn)為這樣的話其實已經(jīng)走回老路了，畢竟前端就是從原來的后臺開發(fā)那里獨立出來的。