【初學者必讀】：前端工程師的知識體系

下圖是前端工程師圖解：

前端開發的核心是HTML + CSS + JavaScript。本質上它們構成一個MVC框架，即HTML做爲信息模型（Model），CSS控制樣式（View），JavaScript負責調度數據和實現某種展示邏輯（Controller）。

HTML

---

1.標籤的分類

• 標籤表示一個元素

• 按性質劃分: Block-Level和Inline-Level

• 按語義劃分:

Headings: h1, h2, h3, h4, h5, h6Paragraphs: pText Formatting: em, strong, sub, del, ins, smallLists: ul, li, ol, dl, dt, ddTables: table, thead, tbody, tr, th, tdForms and Input: form, input, select, textareaOthers: 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代碼也有助於搜索引擎索引你的網站。（web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）

• 不要使用table佈局，table是用來表格顯示的。

• 不要處處濫用div標籤，div是用來分塊用的

• 不要使用樣式標籤，如font, center, big, small, b, i，樣式能夠用CSS來控制，b和i能夠用strong和em來代替。

• 不要使用換行標籤和空格來控制樣式，請用CSS。

• 儘可能不要使用內聯CSS

CSS

1.基礎

• 層疊和繼承

• 優先級

• 盒模型

• 定位

• 浮動

2.進階

• 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 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。這個其實和瀏覽器的兼容性有關，由於絕大部分的兼容性問題都是它們引發的。（web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）

• CSS Frameworks：CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁面排版、網格佈局、表單樣式、通用規則等代碼塊,用於簡化web前端開發的工做，提升工做效率。目前常見框架有：

960 Grid System 
Blueprint CSS 
Bluetrip 
Minimum Page

仍是一個比較出名和特殊的框架是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 代碼會極大的提升應用程序的效率。

• LESS and SASS：CSS 預處理器，用來爲 CSS 增長一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等諸多好處。SASS基於Ruby開發。LESS既能夠在客戶端運行，也能夠藉助Node.js或者Rhino在服務端運行。

javascript

---

1.基礎

• 數據類型

• 變量

• 表達式與運算符

• 控制語句

• 函數

• 異常

• OO

• 事件

• BOM

• 閉包

2.進階

• DOM：DOM即文檔對象模型，HTML DOM 定義了訪問和操做HTML文檔的標準方法。幾乎全部的現代瀏覽器都能很好的支持DOM了。

• JSON：(JavaScript Object Notation) 是一種輕量級的數據交換格式，易於人閱讀和編寫，同時也易於機器解析和生成。是目前事實上數據交換的標準格式，幾乎全部語言都支持JSON，比XML強太多了。

• AJAX：即「Asynchronous JavaScript and XML」（異步JavaScript和- XML)，AJAX並不是縮寫詞，而是由Jesse James Gaiiett創造的名詞，由Google發揚光大。用於建立更好更快以及交互性更強的 Web 應用程序的技術。

• JavaScript Frameworks：極大簡化咱們JavaScript編程的工做量，它主要提供瞭如下幾個主要功能： DOM操做，跨瀏覽器兼容性，以及程序架構。固然像jQuery它自己其實並非一個框架，它是一個庫(lib)。目前主流的框架或庫有以下幾個：

jQuery 
YUI 
DOJO

• HTML5:同CSS3相似，即雖然沒有成爲標準，可是主流的瀏覽器都支持了。HTML5不是HMTL，雖然也提供了一些新標籤，可是它的主要用途仍是JavaScript。HTML5主要提供如下功能：

本地音頻視頻播放 
Canvas/SVG 
地理信息 
硬件加速 
本地運行 
本地存儲 
從桌面拖放文件到瀏覽器上傳 
語義化標籤，Form表單

• 前端模板:主要是爲了解決複雜的數據拼接問題，能夠將模板語言轉換化爲HTML結構，能夠大大簡化工做量，同時代碼的可維護性獲得很大的提升。目前比較主流前端模板有：

MustCache 
JsRender

• 前端MVC:Web應用的功能愈來愈強，Javascript代碼也愈來愈多，大量的JS代碼要以何種架構來組織就成了一個亟待解決的問題，因而就有人把傳統的MVC架構移植到前端來解決這些問題。目前主流前端MVC框架主要有如下這些： 
  （web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）

Backbone.js 
Spine 
YUI 
Agility.js 
Ember.js 
Batman.js 
Dojo 
AngularJS(MVVM) 
KnockoutJS(MVVM)

• 模塊化開發:特色是「模塊化開發，按需加載「。這其中CommonJS組織定義了AMD的規範用來規範瀏覽器端的模塊定義。RequireJS和SeaJS是實現了AMD的兩個優秀的框架。詳見：http://www.weakweb.com/articles/341.html

• JavaScript單元測試:QUnit

• JavaScript設計模式

• NodeJS:把JavaScript移植到服務器端了，這樣前端和後端就可使用一樣的技術，方便統一開發。並且NodeJS是非阻塞調用的，在特定領域性能是很是強勁的。並且這是前端開發人員進軍後臺開發的好機會，進而先後端統一開發，但又不用去學習其它後臺開發語言。

• ES5:ECMAScript 5，也就是最新的JavaScript規範，對以前的JavaScript做了不少改進，增長了好多新的特性，好比JSONECMAScript 5，也就是最新的JavaScript規範，對以前的JavaScript做了不少改進，增長了好多新的特性，好比JSON。

Others

---

• 響應式設計：伴隨着各類智能設備的流行，響應式設計如今是很是火熱。之前作網頁只要面向PC機的瀏覽器，頁面直接固定寬度就行，好比960px，而如今經過手機的訪問量已經超過PC機，而且設備的尺寸多種多樣，將來會更多。在這種背景下，網頁支持全部設備進行訪問是基本要求了，而響應式設計能很好的解決這些問題。

• Http1.1：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）哪一個版本更好，你須要同時實驗兩個版本。最後，選擇最好的版本使用。

• 可用性/可訪問性：

• 可用性指的是：產品是否容易上手，用戶可否完成任務，效率如何，以及這過程當中用戶的主觀感覺可好，是從用戶的角度來看產品的質量。可用性好意味着產品質量高，是企業的核心競爭力。
• 可訪問性：上網用戶中那些視力受損的人，經過屏幕閱讀器使用鍵盤命令將網頁的內容讀給他們聽。以語義化的HTML（結構和表現相分離的HTML）編寫的網頁文件，就可讓此類用戶更容易導航，且網頁文件中的重要信息也更有可能被這些用戶找到。

• 前端流程/部署：Grunt，Bower和Yeoman如今幾乎是前端最流行的自動化的項目構建工具

• 正則表達式

• 瀏覽器插件開發
• 瀏覽器原理

溝通能力

優秀的前端工程師須要具有良好的溝通能力，由於你的工做與不少人的工做息息相關。在任何狀況下，前端工程師至少都要知足下列四類客戶的需求。 
（web前端學習交流羣：328058344 禁止閒聊，非喜勿進！）

• 產品經理——這些是負責策劃應用程序的一羣人。他們可以想象出怎樣經過應用程序來知足用戶需求，以及怎樣經過他們設計的模式賺到錢（每每事與願違）。通常來講，這些人追求的是豐富的功能。

• UI設計師——這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一向性以及總體的好用性。他們熱衷於流暢靚麗但並不容易實現的用戶界面，但考慮問題每每不周全。

• 項目經理——這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間（uptime）——應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標每每是儘可能保持事情的簡單化，以及不在升級更新時引入新問題。

• 最終用戶——固然是應用程序的主要消費者。儘管咱們不會常常與最終用戶打交道，但他們的反饋意見相當重要；沒人想用的應用程序毫無價值。最終用戶要求最多的就是對我的有用的功能，以及競爭性產品所具有的功能。

從某種意義上說，優秀的前端工程師就像是一位大使，須要時刻抱着外交官的心態來應對每一天的工做。

如何提升前端技術

• Github是一個優秀的代碼託管網站，咱們能夠在上建立咱們我的的項目，同時也是學習的好地方，咱們能夠關注其它優秀的項目。JSFiddle是一個web開發人員的練習場，一個能夠在不少方面應用的工具。咱們能夠用他來在線編輯一些HTML,CSS,javascript片斷。你編輯的代碼能夠與其餘人分享，或嵌入你的博客等
• 閱讀優秀的開源代碼
• 關注技術發展趨勢，瞭解最新的行業技術，能夠經過訂閱知名博客，閱讀技術新聞獲取
• 寫博客/記筆記，能夠進行知識積累。

前端修煉之路

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

• 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等，其實絕大部分傳統的後臺開發人員就是這個狀態，即先後臺都作。我的認爲這樣的話其實已經走回老路了，畢竟前端就是從原來的後臺開發那裏獨立出來的。

• 往管理方向，好比項目經理，或者乾脆轉行，好比公務員等。