1. 程式人生 > >大前端(全棧)學習路線指南

大前端(全棧)學習路線指南

第一部分:前端頁面重構

一: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,apply,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
專案測試
執行多個測試