web前端架构师学习流程

JavaScript 开发（高级）

系
统
知
识

1.1ECMAScript标准的发展过程，ES6语言对JavaScript的改进；

1.2ES6中语法层面的新特性（let、const、参数扩展、模块化等）；

1.3ES6中数组、字符串等各类新方法的使用（map、reduce、filter、forEach、startsWith等）;

1.4OOP(面向对象)开发，ES5和ES6中对OO的各种实现；继承在开发和几个主要框架中的作用和继承的几种常见写法;

1.5Promise、generator和async/await等异步串行化方法，并能在数据交互等实际场景中进行应用;

1.6常用的编译工具（Babel、browserify）；ES7预览版中新增的各类语法特性;

1.7Node.js的产生和发展历史；Node在全栈开发、团队开发中的作用，掌握Node环境搭建、能使用Node完成简单的前后台数据交互项目，以此加深对数据交互过程的理解；ECMAScript标准的发展过程，ES6语言对JavaScript的改进;

实
战
项
目

01WebSocket聊天室

02多人共享会议白板

2 模块化工程开发

系
统
知
识

2.1理解CMD、AMD两种模块化规范，并了解其区别和适用场景；

2.2掌握各类常见模块化开发库的使用（seajs、requirejs）；

2.3掌握ES6模块化的各种语法，掌握常用模块编译方法 ;

2.4在实际项目中实际运用各类模块化方法，体会各类方法的区别 ;

实
战
项
目

01爱奇艺官网模块化开发

02模块编译及部署

3 自动化构建工具

系
统
知
识

3.1掌握Grunt、Gulp的基本使用（压缩、整理、打包、代码评估、自动化测试等）；

3.2掌握利用babe和browserify进行模块编译的方法 ；

3.3掌握browser-sync实现实时代码同步的方法，提升开发效率（尤其是移动端）;

3.4掌握WebPack的基本使用，熟悉各类配置项的使用，并利用WebPack完成各类常见开发需求（打包、压缩、测试等）；

3.5掌握WebPack＋各类cli脚手架完成项目构建的过程（各cli本身会在各框架中详细讲解）；

实
战
项
目

01代码压缩、测试、打包

02脚手架项目搭建

4 HTML5开发（高级）

系
统
知
识

4.1Video、Audio API的方法、属性和事件 ；

4.2canvas的基本用法、常见图形、常用属性 ；

4.3利用canvas完成各类常见图形应用，结合完成带有物理引擎的场景制作 ;

4.4SVG/VML的矢量图操作、常用图形和常用属性样式，并掌握SVG等矢量图和JS脚本间的交互（事件、DOM操作、属性操作等） ;

4.5Raphael矢量图兼容库的使用，兼容所有主流浏览器的前提下完成常见的矢量图应用（如地图、小游戏等）;

4.6各种常用绘图/图表库的使用（echart.js、d3.js等）;

4.7WebGL进行3D图形绘制的方法，并且学会使用three.js完成3D场景的构建、物理引擎、开发简单的游戏 ；

4.8掌握HTML5新增的各类API ；

4.9掌握多种移动端触屏（touch）事件的用法和功能 ;

4.10掌握常用移动端开发库（zepto.js、iscroll.js、hammer.js）的使用，并在实战案例中结合各个开发库的功能完成各类常见功能的开发 ;

实
战
项
目

01bootCDN响应式布局

02自定义视频播放器

03Canvas游戏开发

04Canvas热区图

5 混合式App开发

系
统
知
识

5.1混合式App开发和原生App开发间的区别，并掌握混合App开发的基础原理 ；

5.2PhoneGap框架的诞生和发展，及其基本结构，搭建PhoneGap开发环境（cordova-cli+PhoneGapApp；

5.3掌握其各类插件的使用并完成从开发到打包发布的全部流程;

5.4APICloud等本土开发框架的发展，了解国外框架个本土框架在功能上的区别 ;

5.5APICloud的项目管理，开发环境的搭建、项目运营（运营云）和常用模块 ;

5.6使用APICloud完成各类常见APP的开发，掌握后台接口、前台页面、数据运营方面的知识 ;

实
战
项
目

01手机相册App

02手机地图导航App

03手机新闻客户端

04仿微信通信App

6 主流开发框架

系
统
知
识

6.1MV*开发模式的特点，MVV、MVP、MVVN之间的演化和区别 ；

6.2Angular.js的基本用法，ng数据交互的方法，ng模块的写法和作用 ；

6.3ng1-4的版本演化过程，ts脚本的编写、编译和执行过程，ng2和ng4种模块的写法和应用场景 ;

6.4掌握ng指令、过滤器、service、factory等高级特性的应用，掌握完成用ng-router大型SPA应用开发的方法 ;

6.5掌握Vue.js和Angular.js的区别及版本演化过程 ;

6.6掌握Vue的基本用法（vm、data、observe、methods、继承、model、@事件、:属性等），理解Vue和Vuex的区别 ;

6.7掌握利用vue-cli+WebPack搭建开发环境的方法，并完成从编码、调试到打包上线的过程 ；

6.8掌握Vue组件的写法，并理解组件间通信及组件生命周期管理的方法，掌握resource通信的方法 ；

6.9了解React和ng、vue的区别，了解React技术栈的成员，了解React适用场景与ng、vue的区别 ;

6.10掌握React的基本用法（jsx、组件、状态、props、生命周期等），掌握React数据通信的方法，掌握React组件间继承、嵌套、通信 ;

6.11掌握flux、redux等组件通信、状态管理的开发方法 ;

6.12了解React-Native的基本用法（环境搭建、组建使用、编译、发布等）;

实
战
项
目

01Angular4聊天室

02Vue.js电商网站

03React日程管理系统

7 Node.js中间层开发

系
统
知
识

7.1掌握原生Node.js开发http-serve的基本方法（服务搭建、数据交互等），掌握常用系统模块的使用（http、https、fs、crypto、system等），掌握多进程服务器开发的方法（cluster、process）；

7.2掌握Node.js常用开发框架Express、KOA，并理解两种框架的演进过程、区别、优缺点，掌握KOA@2到KOA@3的迁移过程 ；

7.3掌握Express和KOA相关生态圈的常用组件（router、multer、parser、cookie、session、consolidate等），掌握服务端渲染常用引擎的使用（pug、ejs）;

7.4掌握Node.js开发数据爬虫的方法（net），并完成对常见网站的数据抓取工作 ;

7.5掌握MySQL、Oracle等常用数据库的操作，从库结构搭建到常用查询操作，以及在数据库层面对系统性能和安全性进行提升的方法 ；/span>

7.6完成从数据采集、挖掘到可视化的全流程数据分析系统 ;

7.7完成中等规模网站的全线开发流程，从而彻底打通前后台相关知识的使用 ;

实
战
项
目

01Node.js数据采集

02可视化数据分析

03门户网站全栈开发