大前端（全栈）学习路线指南

第一部分：前端页面重构

一：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”，拉你进程序员技术讨论群.