《web前端架构》

第一阶段（PC端页面重构）

核心内容

1. XMind思维导图工具
2. HTML语义化标签
3. 相对路径及绝对路径
4. 搜索引擎原理
5. 网页SEO优化
6. Table布局
7. HTML表单元素
8. CSS样式选择器及权重计算
9. 文本样式美化
10. 精灵图及CssSprite工具
11. float水平排版
12. inline-block水平排版
13. flex弹性布局
14. position定位
15. css代码优化
16. 开发者调试工具
17. Markman标注工具
18. PC端页面布局技巧
19. BootStrap/LayUI框架
20. git基础命令
21. gitpages静态页发布

阶段目标

• 使用XMind记录学习笔记，养成良好的学习习惯
• 熟悉BS软件开发模式，了解标签语义化的根本目的
• 了解form表单提交规范
• 合理使用html标签搭建页面结构，使用css精准控制元素样式
• 使用蓝湖或markman高度还原UI效果图

第二阶段（JavaScript基础）

核心内容

1. js简史及语法版本
2. 变量声明规则
3. 基本数据类型
4. 复合数据类型
5. 运算符
6. 断点调试
7. if及switch语句
8. 三元表达式
9. 循环语句(for、while等)
10. 引用类型和值类型
11. 堆和栈
12. 函数传参
13. 变量提升
14. js内置对象
15. es5数组操作方法(forEach、map、reduce等)
16. 显式和隐式类型转换
17. DOM选择器
18. 节点内容和属性操作
19. 样式的设置和获取
20. DOM事件绑定
21. event事件对象
22. 事件传播机制
23. 2级DOM事件
24. setInterval&setTimeout

阶段目标

• 熟练掌握js语法，提升自身编码及调错能力
• 熟练使用函数复用代码逻辑
• 熟练使用DOM操作页面元素，实现网页动效交互
• 通过项目实战提升开发效率并总结实战开发经验及心得

第三阶段（JavaScript高级程序设计）

核心内容

1. 函数的防抖和节流
2. 浏览器重绘和回流
3. 事件委托机制
4. Ajax网络请求
5. 同源策略
6. 数据按需加载
7. cookie数据存储
8. Jsonp跨域请求
9. BOM
10. 正则表达式
11. 正则高级概念
12. this指向细则
13. IIFE
14. 闭包
15. 面向对象编程
16. 原型链及继承
17. 插件封装
18. jQuery
19. jQuery第三方插件
20. jQuery插件封装
21. 网页性能优化

阶段目标

• 具备面向对象编程思想，对常用js模块进行封装
• 熟练使用正则表达式对内容进行精准匹配
• 熟练使用Ajax、Jsonp进行前后端数据交互
• 轻松使用第三方插件及UI框架提升项目开发效率

第四阶段（移动端&响应式开发）

核心内容

1. css3新增选择器
2. css3新增排版属性
3. transition元素过渡
4. animation
5. 3D转换
6. viewport
7. rem
8. vw&vh
9. @media媒体查询
10. html5新增语义化标签
11. touch事件
12. video&audio
13. swiper
14. iscroll
15. webWorks
16. webSocket
17. canvas
18. svg
19. FormData&FileReader
20. 本地存储
21. 离线存储
22. 地理定位
23. 百度地图SDK
24. echarts
25. Dcloud混合应用

阶段目标

• 熟练掌握移动端屏幕适配及移动端特有交互
• 熟练使用媒体查询进行响应式网站开发
• 熟练使用echarts、websocket实现大屏可视化数据展示

第五阶段（Nodejs服务器端开发及前端工程化）

核心内容

1. Nodejs环境安装
2. http模块
3. fs模块
4. commonjs模块规范
5. Npm包管理工具
6. 网络爬虫
7. express web开发框架
8. ejs模板引擎
9. mysql
10. redis
11. restful接口规范
12. scoket.io
13. session
14. token验证机制
15. 服务器代理
16. CORS配置
17. PM2负载均衡
18. 服务器部署
19. BrowserSync
20. sass&less
21. es6&babel编译
22. promise
23. async
24. proxy数据劫持
25. class的定义与继承
26. webpack构建工具
27. gulp构建工具

阶段目标

• 深入理解前后端分离的开发模式和交互细节
• 遵循Restful风格进行项目接口开发
• 掌握es6语法及新特性
• 熟练使用webpack、gulp构建前端工程化项目

第六阶段（大前端框架开发Vue&React）

核心内容

1. MVVM
2. 数据响应原理
3. 虚拟DOM
4. 数据劫持
5. 发布订阅者模式
6. 组件式开发
7. 第三方插件整合
8. Hash&History
9. 路由
10. 状态管理
11. 服务器端渲染
12. 代理服务器配置
13. Vue-cli
14. Nuxt.js服务端渲染
15. Vue3.0
16. React全家桶
17. Next.js服务端渲染
18. React高阶组件
19. ReactHook
20. ElecmentUI
21. Vant
22. Taro
23. AntDesign

阶段目标

• 理解MVVM框架原理
• 熟练掌握组件式开发方式
• 熟练使用UI框架提升项目开发效率
• 能够使用Next/Nuxt进行SPA应用SEO优化

第七阶段（微信小程序开发）

核心内容

1. 小程序注册发布流程
2. 开发者工具详细使用
3. 小程序全局和页面配置
4. 模板语法
5. 屏幕适配
6. wxs
7. 内置组件
8. 网络请求
9. 本地存储
10. 用户身份获取
11. 分享
12. 位置信息
13. 文件下载和上传
14. 界面交互
15. 组件开发
16. 路由
17. 分包加载
18. 云函数
19. UniApp
20. Taro

阶段目标

• 熟练使用小程序进行项目业务功能开发
• 使用模板、组件、分包优化代码包体积
• 借助UniApp、Taro提升项目开发效率

第八阶段（跨平台全端开发）

核心内容

1. 混合App开发模式
2. UniApp
3. Weex
4. React-native
5. Flutter
6. webAr
7. Three.js
8. 网络安全
9. Electron
10. 区块链
11. 语音识别
12. 鸿蒙OS App开发
13. 数据加密
14. 物联网
15. 车载应用开发
16. 华为智慧屏
17. 高德地图二次开发

阶段目标

• 熟练掌握混合应用开发技术，了解其底层运行原理
• 洞察行业发展趋势，扩展技术视野
• 提前了解鸿蒙OS系统软件开发