大前端(全棧)學習路線指南
第一部分:前端頁面重構
一: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
專案測試
執行多個測試