大前端（全棧）學習路線指南

第一部分：前端頁面重構

一：pc端網站佈局項目

html基礎，css基礎，css核心屬性
css樣式層疊，繼承，盒模型
容器，溢出及元素類型
瀏覽器兼容與寬高自適應
定位，錨點與透明
圖片整合
表格，css屬性與濾鏡

二：html5+css3基礎項目

html5新增元素與屬性
表單域加強元素
css3選擇器
文字字體相關樣式
css3位移與變形處理

css3 2d轉換與過分動畫
css3 3d 轉換與關鍵幀動畫
彈性盒模型
媒體查詢
響應式設計

三 webapp頁面佈局項目

移動端頁面設計規範
移動端切圖
文字流式、控件彈性，圖片等比例，特殊設計的100%佈局

等比縮放佈局
viewport/meta
rem/vw的使用
flexbox詳解
移動web 特別樣式處理（reset。1px,border,高清圖片）

第二部分：JavaScript高級程序設計

一：原生JavaScript交互功能開發項目

基本語法
循環語句
函數與數組
string與date
bom與dom
事件
拖拽效果
cookie存儲
正則表達式
ajax
面向對象基礎
運動與遊戲開發

二：面向對象進階與es5/es6應用項目

promise/A+
設計模式（觀察者模式）
原型鏈
構造函數
執行上下文棧與執行上下文
變量對象與活動對象
做用域鏈
閉包
this
es5
es6

三 javascript工具庫自主研發項目

dom庫
事件庫
ajax庫
原型和繼承庫

第三部分：pc端全棧項目開發

一：jQuery經典交互特效開發

時間軸特效
tab頁面切換效果
網頁定位導航特效
滑動門特效
焦點圖輪播特效
導航條菜單效果
瀑布流特效
彈出層效果
倒計時效果
抽獎效果

二 HTTP協議，ajax進階與php/java開發項目

http(s)協議詳解
ajax進階，跨域與defered
PHP基礎
Java基礎
MySQL基礎
apache與nginx環境搭建與配置
接口的定義
mock數據
restful
先後端聯調
前端安全（xss,csrf,json注入）

三：前端工程化與模塊化應用項目

gulp
webpack
npm
git/svn
commonjs
AMD
CMD
es6模塊化

四：pc端網站開發項目

大首頁，列表頁與詳情頁
展現與交互特效
搜索
登陸與註冊
購物車

五：pc端管理信息系統前端開發項目

Jqueryui 與jQuery easyui
bootstrap(ACE)
Highcharts/Echarts
ArtTemplate
velocity
smarty
雲平臺系統前端

第四部分：移動端項目開發

一： touch端項目

canvas基礎知識
繪製矩形，圓弧，線段，曲線，漸變與圖像
Canvas圖表繪製案例
localstorage,sessionStorage與離線緩存
animate.css
Yo/Mui
touch.js
zepto.js
swipe
iscroll

二：微信場景項目

WeUI
swiper animate在微信場景項目中的使用
常見的頁面佈局
常見的交互與動畫
實戰項目

三：應用Angular+ionic開發webapp項目

Angular
基礎知識（ng-app,modules,controller,watch）
指令
過濾器
表單
服務
其餘
directive指令，組件
ng-router

Ionic
css components
ionic 基於angularjs擴展的交互指令介紹
blank模板安裝
頭部與尾部
內容區域
列表
區域滾動
下拉刷新與上拉加載
頁籤導航
背景層與旋轉svg圖標

loading效果
actionsheet效果
彈出窗口
彈出浮動層
底部滿屏滑動窗口
ionic自帶的swiper滑動
基於swiper組件的swiper滑動
頁面導航切換
側邊欄菜單

四：應用vue.js開發webapp項目

vue.js基礎
模塊化
單文件組件
路由
與服務器通訊
轉態管理
單元測試
生產發佈
基於vue.js企業級項目開發

五：應用react.js開發webapp

react.js基礎
jsx語法
組件
flux+redux
react-router路由
動畫效果
基於react企業級項目研發

第五部分：混合（Hybrid,RN）開發

一：微信小程序開發

微信小程序簡介及從技術上和產品上的分析
構建第一個應用：建立項目，建立小程序實例與建立頁面
框架，組件，API及工具詳解
微信小程序項目開發

二：react native

react native 介紹
原生組件
異步執行
觸摸事件處理
彈性盒flex和樣式
兼容通用標準和擴展性
react native項目開發

三：各種混合應用開發

cordova/phpone gap
嵌入客戶端（iOS ，android）
微信公衆號接口jssdk開發
html5+

第六部分：nodejs全棧開發

一：nodejs基礎

nodejs介紹
開發環境搭建
模塊與包管理工具
commonjs模塊
url網址解析
querystring參數處理
HTTP模塊
http小爬蟲
request方法
事件events模塊
文件fs模塊
stream流模塊
路由初步
讀取圖片文件
路由改造
參數接受
async
npm scripts

二：mongodb

mongodb介紹與環境搭建
數據庫經常使用命令
collection彙集集合
document文檔操做
彙集集合查詢
nodejs鏈接mongodb

三：express

express介紹
安裝和建立基於express的項目
express4.1x初始化項目詳解
路由簡介
模板引擎ejs
express+mongodb項目實戰

四：socket

socket簡介和通信流程
基於net模塊實現socket
Websocket
socket.io

五：測試框架：

搭建框架
斷言assert
項目測試
運行多個測試

注：

原文做者：祈澈姑娘技術博客：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛編程，愛運營，愛折騰。
堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，歡迎你們一塊兒探討交流。

關注「編程微刊」公衆號 ，在微信後臺回覆「領取資源」，獲取IT資源300G乾貨大全。

公衆號回覆「1」，拉你進程序員技術討論羣.