前端學習知識點總結

 

前端愈加展越複雜，知識點愈來愈龐雜。

 

前幾年號稱要一統前端江湖的backbone，估計新入行的童鞋都沒據說過。前年很火的Angular也逐漸被React和Vue趕超和碾壓。

 

Backbone.js

 

React,Angular,Vue

 

可是，千變萬變，老是爲了提高工做效率，提高用戶體驗而變，千萬要避免「亂花迷人眼」。夯實基礎，才能萬變不離其宗。

 

前端要學習三個部分：HTML，CSS，JavaScript（簡稱JS），所以首先明確三個概念：
HTML負責結構，網頁想要表達的內容由html書寫。
CSS負責樣式，網頁的美與醜由它來控制
JS負責交互，用戶和網頁產生的互動由它來控制。

 

如下，略小坑爲你們整理了最新的前端學習知識點，你們能夠保存到手機中，方便及時查看，自我檢查。

初級階段（靜態網頁製做、JS編程入門）

1.Photoshop入門

圖像處理基礎知識、圖像處理基礎知識、分辨率、圖像的色彩模式、經常使用的圖像文件格式。Photoshop工做界面的介紹、文件操做、圖像的顯示效果、圖像和畫布尺寸的調整、繪製和編輯選區、選區的操做技巧、漸變工具和油漆桶工具。圖像合成、圖層、蒙版、配色、切圖、色彩搭配原則。

 

2.互聯網基本原理

互聯網基本原理、服務器、瀏覽器、HTTP請求的概念。

 

3.HTML

編程工具介紹、HTML簡介。HTML語義化標籤、p標籤和h系列標籤。HTML基本骨架深刻、HTML骨架。元信息標記meta、設置頁面關鍵字、字符集、關鍵字、頁面描述。a標籤和img標籤，相對路徑、絕對路徑。ul、ol、dl標籤、div和span標籤介，表單知識。

 

4.CSS基礎和高級技巧

CSS介紹，選擇器。文字屬性、顏色屬性。繼承性和層疊性，權重計算。CSS盒模型，width、height、padding、border、margin屬性。父子嵌套模型，使用Fireworks精確還原設計圖。float浮動屬性、浮動的意義、清除浮動的方法。瀏覽器兼容，CSS hack。 background系列屬性、css精靈、網頁上透明。超級連接的僞類、導航條。 position定位、定位小技巧。DIV+CSS佈局。

 

5.靜態網站製做項目

搜索引擎優化的概念、頁面經常使用SEO技巧、學會有格調的製做頁面。iconfont字體圖標。一些常見的CSS高級技巧，好比負margin、壓線技術、滑動門、列自撐技術。較複雜佈局網站的學習，通欄banner、大背景等時下流行的網站製做方法。

中級階段（JS進階、HTML5和CSS三、Ajax和Canvas）
6.JavaScript基礎

語句、執行順序、詞法結構、標識符、關鍵字、變量、常量、alert語句和console控制檯。值和變量、數字、文本、布爾值、null和undefined。表達式和運算符、運算符概述。流程控制、賦值語句、條件判斷語句、if語句、switch語句、循環控制語句、while語句、do…while語句、for循環。跳轉語句：continue、break。函數、參數、返回值、遞歸、做用域、全局變量、局部變量。

 

7.JavaScript DOM編程

事件與事件處理概述、事件與事件名稱、經常使用事件、事件處理程序的調用、DOM事件模型、事件流、 事件對象、註冊與移除事件。文檔對象的經常使用屬性、方法與事件、輸出數據。事件的三要素。DOM對象、DOM概述、DOM分層、DOM級別、DOM對象節點屬性、遍歷文檔樹、克隆刪除替換。動畫基礎知識、定時器、setInterval和setTimeout、運動效果、 實用的動畫、製做運動效果。

 

8.JQuery頁面特效

jQuery對象和DOM對象、jQ選擇器、CSS操做、設置和獲取HTML、文本和值。事件、加載DOM、事件綁定、合成事件、事件對象的屬性。動畫、自定義動畫方法、動畫回調函數、中止動畫、其餘動畫方法。jQuery對錶單、表格的操做及更多應用、表單應用、表格應用。jQuery插件，jQueryUI，jQuery ease，jQuery mousewheel等。超多頁面特效！結合案例掌握瞭解jQuery插件的使用。

 

9.JavaScript進階

命名空間、對象擴展、數組化、主流框架引入的機制——domReady、無衝突處理。語言模塊、字符串的擴展與修復、數組的擴展與修復、數值的擴展與修復、函數的擴展與修復、 日期的擴展與修復、瀏覽器嗅探與特徵偵測 、斷定瀏覽器、事件的支持偵測、樣式的支持偵測。類工廠、JavaScript對類的支撐、各類類工廠的實現。瀏覽器內置的尋找元素的方法、屬性模塊、如何區分固有屬性與自定義屬性。

 

10.HTML5和CSS3

HTML5概述、HTML5新特性、HTML5組織、HTML5構成、HTML5頁面的特徵、HTML基礎、HTML5全局屬性、HTML5其餘功能、HTML5元素分類。實戰HTML5表單、新增的input輸入類型。HTML5音頻與視頻、HTML5多媒體技術概述、在HTML5中播放音頻。CSS3編碼規範、瞭解CSS3新增特性。CSS選擇器、屬性選擇器、結構僞類選擇器、UI僞類選擇器。旋轉動畫、縮放動畫、移動動畫、傾斜動畫。3D炫酷動畫效果。

 

11.移動web和響應式頁面

視口、縮放 、分辨率、物理分辨率、設備像素比、dppx和dpi 、meta視口。百分比佈局、流式佈局、CSS3新的流式盒模型。觸摸和指針事件、觸摸事件、手勢事件 、其餘事件、拖放、滾動層、事件和交互模式、移動端交互綜合實戰。zepto.js、jQuery Mobile等移動端常見框架。HTML5速成移動端框架。Bootstrap3 、調整響應式導航條斷點。移動優先、Bootstrap柵格系統、柵格系統原理、Bootstrap中的JavaScript交互、Bootstrap敏捷開發。

 

12.JavaScript面向對象

建立對象、屬性的查詢和設置、 刪除屬性、檢測屬性、枚舉屬性、屬性getter和setter、屬性的特性、對象的三個屬性、序列化對象、對象方法。類和模塊、類和原型、類和構造函數、類的擴充、類和類型、子類。原型、實例化和原型、 對象實例化、經過構造器判斷對象、繼承與原型鏈、構造函數和原型對象 、構造函數、原型對象 、[[Prototype]]屬性 、在構造函數中使用原型對象 、改變原型對象、內建對象的原型對象。

 

13.服務器知識和PHP入門

後臺語言和前臺語言的區別。初識PHP、PHP語言的優點、PHP 5的新特性、PHP的發展趨勢、PHP的應用領域。 PHP環境搭建和開發工具。PHP語言基礎、PHP變量、PHP運算符、 PHP的表達式、PHP編碼規範、流程控制語句、字符串操做、PHP數組、 PHP與Web頁面交互。數據庫技術概述、增刪改查。

 

14.Ajax

Ajax概述與Ajax初體驗、Ajax技術介紹、XMLHttpRequest對象詳解、動態加載和顯示數據、XMLHttpRequest對象概述、方法、屬性、發送請求、GET和POST請求、運行週期、使用JSON響應、Ajax實用包的封裝。JSON的解析、Underscore模板引擎、模板技術、動態組裝頁面、電話號碼歸屬地查詢、驗證碼等。Ajax實戰篇 、Ajax高級表單驗證程序 、Ajax動態聯動菜單、瀑布流。

 

15.Canvas和手機遊戲

Canvas繪圖、基本知識、理解canvas座標系、獲取canvas環境上下文、理解路徑、路徑操做API 、繪製線條 、繪製矩形 、繪製圓弧 、繪製貝塞爾曲線 、線條屬性 、線條顏色 、填充 、繪圖狀態。圖像API、使用canvas繪製圖像、座標變換、繪製文字。遊戲原理、製做2D遊戲引擎、理解遊戲循環、渲染引擎實現、使用引擎構建遊戲實例、遊戲經常使用算法。

 

高級階段（高端技術和高級框架）
16.Nodejs企業級應用

Node的特色、異步I/O、事件與回調函數、單線程、跨平臺、Node的應用場景、I/O密集型、CommonJS規範、Node的模塊實現　、路徑分析和文件定位、模塊編譯　、核心模塊、JavaScript核心模塊的編譯過程、網絡編程、構建TCP服務。構建HTTP服務、構建WebSocket服務、網絡服務與安全。MongoDB、Express、Mongoose、socket.io。小型微博系統、俄羅斯方塊對戰。Linux使用。

 

17.Angular.js主流框架

Angular基礎知識 、 Angular中的控制器 、Angular中的模板 、Angular的過濾器、依賴注入、MVC模式 、Angular的服務 、與服務端交互 、Angular的指令。使用AngularJS構建一個單一頁面應用程序（SPAs：Single Page Applications）。

 

18.Backbone框架

理解Backbone、模型、集合、視圖、事件及其綁定 、RESTful服務、其餘相關技術 、使用Require.js組織項目結構。模型(models)、集合(collections)、視圖(views)結構學習。綁定鍵值數據、自定義事件、可枚舉函數、聲明事件處理函數、RESRful JSON接口。

 

19.Yeoman腳手架

基本安裝、配置、HTML模板、圖片壓縮、構建工具、包管理器、JSLint測試。

 

20.Grunt和Gulp

GIT、SVN、Grunt、Gulp、Webpack。經過代碼優於配置的策略，Gulp 讓簡單的任務簡單，複雜的任務可管理。利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做。經過最少的 API，掌握 Gulp 絕不費力，構建工做盡在掌握：如同一系列流管道。

 

21.Sass，less和stylus

GIT、SVN、Grunt、Gulp、Webpack。sass中能夠定義變量，方便統一修改和維護。用sass進行選擇器的嵌套，表示層級關係。用sass中導入其餘sass文件，最後編譯爲一個css文件t。用sass中可用mixin定義一些代碼片斷，且可傳參數，方便往後根據需求調用。

 

22.ECMAscript2016

簡介、let和const命令、變量的解構賦值、字符串的擴展、正則的擴展、數值的擴展、數組的擴展、函數的擴展、對象的擴展、Symbol、Set和Map數據結構、Proxy、Reflect、Iterator和for...of循環、Generator函數、Promise對象、異步操做和Async函數、Class、Decorator、Module、編程風格、讀懂規格、二進制數組、SIMD

 

23.React構建視圖組件

React簡介、JSX、組件的生命週期、實例化、數據流、事件處理、組件的複合、mixin、DOM操做、動畫、性能優化、服務端渲染、周邊類庫。VUE數據模板、生命週期、過濾器。

 

24.Vue界面的前端庫

碰見Vue.js、數據綁定、指令、計算屬性、表單控件綁定、過濾器、Class與Style綁定、過渡、綁定事件、組件、表單校驗、分組校驗、與服務端通訊、RESTful調用。

 

25.Cordova和Phonegap

使用加速計和位置傳感器、文件系統、存儲及本地數據庫、處理音頻、圖像和視頻、處理通信錄、本地事件、使用XUI、使用jQuery Mobile進行用戶界面開發、PhoneGap插件擴展、開發工具及測試。

 

26.ionic 框架

Ionic和Hybrid應用介紹、配置開發環境 、Ionic導航和核心組件、選項卡、高級列表和表單組件、開發高級應用、使用 Ionic 命令行代理、在頁面中使用 ionScroll、過濾器：轉換視圖中的數據。

 

27.React Native移動開發

React Native簡介、React Native開發基礎、經常使用組件介紹及實踐、TextInput組件、九宮格實現、NavigatorIOS組件、Touchable類組件、狀態機思惟與狀態機變量、深刻理解UI從新渲染的過程、Navigator組件工做機制、混合開發基礎、組件生命週期、數據存儲及React Native應用實現步驟。

 

28.JS微信開發

微信公衆平臺介紹 、使用雲平臺快速搭建公衆帳號 、在新浪SAE上建立App、部署代碼 、開發接口的認證 、微信公衆平臺API詳解：基礎接口 、回覆消息、微信公衆平臺API詳解：高級開發、各接口的調用頻次限制、客服接口 、二維碼開發 、wechat的JS開發 、搭建開發環境和相關技術介紹 、海量請求的應對方法 、監控服務器的各項指標、惡意請求的應對方法。

 

以上內容，涵蓋了28個大知識點和400多個小知識點。