湖北大学瑞翼工坊前端培养目标

版本：2.0.1 更新日期：2022/3/24

撰写：Objectkaz

审核：

能力要求

精通：能够使用某种技术，并有较多的实际项目经验，且能掌握全部原理和实现细节

熟练掌握：能够使用某种技术，并有较多的实际项目经验，且能掌握核心原理

掌握：能够使用某种技术，并有较多的实际项目经验

熟悉：能够使用某种技术，并有较少的实际项目经验

了解：能够使用某种技术，知道核心知识点

1. 语言基础：熟练掌握HTML/CSS/JavaScript；掌握TypeScript；了解DOM/BOM；熟悉Node.js。
2. 计算机基础：掌握常用的数据结构(链表、栈、队列、树、图)和算法(模拟、双指针、查找、排序、动态规划、贪心、搜索等)，能够针对实际业务设计合适的数据结构；了解进程、线程、协程等操作系统基本概念。
3. 网络：掌握常用的网络协议(TCP、UDP、HTTP、HTTPS)；掌握跨域、XSS、CSRF等常见Web安全问题及解决方案；了解Cookie/Session/Token/Oauth 等常见的认证机制。
4. 浏览器：了解浏览器的基本架构、渲染流程、事件循环、垃圾回收等核心原理；掌握Chrome Devtools的使用。
5. 框架：熟练掌握Vue(3.0)，并了解响应式系统、虚拟DOM、Diff算法等核心技术。除此之外，可选掌握 React和jQuery。
6. 工程化：掌握Git等常见的团队协作工具；掌握Webpack的使用，并理解基本流程；可选了解Gulp/Rollup/Vite等构建工具的使用；掌握常见的模块规范(CommonJS/ESM/AMD/UMD/CSS Module)；了解DevOps/Serverless/微前端等工程化体系。
7. 团队协作：良好的沟通能力和团队协同能力；具有一定的项目管理经验，能够带领团队，完成项目开发。
8. 代码风格：养成良好的代码风格和书写习惯；熟悉常见的设计模式。
9. 持续学习：学习能力强，对新事物保有好奇心，并能快速适应新环境；对所在领域有热情，相信方法总比困难多，善于独立思考并反思总结。

重要课程

1. 数据结构
2. 操作系统
3. 计算机网络
4. 计算机组成原理

学习路线

HTML/CSS

• 黑马pink老师：https://www.bilibili.com/video/BV14J4114768?from=search&seid=7738728159235738182&spm_id_from=333.337.0.0
• CSS进阶：《CSS世界》

阶段性项目实践：设计一个个人博客的常用界面

JavaScript/DOM/BOM

• 基础，尚硅谷：https://www.bilibili.com/video/BV1Sy4y1C7ha?from=search&seid=7738728159235738182&spm_id_from=333.337.0.0
• 进阶：《JavaScript高级程序设计》《你不知道的JavaScript》《现代JavaScript教程》

阶段性项目实践：模仿小米商城首页

Vue.js全家桶

• 尚硅谷Vue2+Vue3:https://www.bilibili.com/video/BV1Zy4y1K7SH?from=search&seid=7738728159235738182&spm_id_from=333.337.0.0
• Vuejs 官方文档

阶段性项目实践：新峰商城(https://gitee.com/newbee-ltd/newbee-mall)

TypeScript

• 教程：https://www.bilibili.com/video/BV1Xy4y1v7S2?from=search&seid=17043582029327142887&spm_id_from=333.337.0.0
• 官网：https://www.typescriptlang.org/ — 进阶（深入理解TypeScript）：https://jkchao.github.io/typescript-book-chinese/

Webpack

• 入门：尚硅谷Webpack5：https://www.bilibili.com/video/BV1e7411j7T5?from=search&seid=7738728159235738182&spm_id_from=333.337.0.0

1、深度剖析 Webpack 系列 ：https://mp.weixin.qq.com/mp/homepage?__biz=Mzg3OTYwMjcxMA==&hid=1&sn=1e3ac0a294fa453f3f8cda212d16b01d&scene=18 2、Webpack 知识体系 ：https://gitmind.cn/app/doc/fac1c196e29b8f9052239f16cff7d4c7 3、深入浅出 Webpack ：https://webpack.wuhaolin.cn/

浏览器原理

• 课程：浏览器工作原理与实践(收费课程)：https://time.geekbang.org/column/intro/100033601

掘金、知乎上的博客文章

网络和安全

• 课程 浏览器工作原理与实践(收费课程)：https://time.geekbang.org/column/intro/100033601
• 课程 趣谈网络协议(收费课程)：https://time.geekbang.org/column/intro/100007101

掘金、知乎上的博客文章

数据结构与算法

• 学习：大话数据结构、算法图解
• 刷题：Leetcode（分类刷）、《剑指Offer》

团队协作

Git

• Pro Git 第二版
• 阮一峰的Git教程：https://www.liaoxuefeng.com/wiki/896043488029600

项目常见技术栈

PC 端前台项目

1. Vue3+Element Plus+Vue Router+Pinia
2. Vue2+Element UI+Vue Router+Vuex
3. React+React Router+Redux
4. 构建工具：Webpack(vue-cli)、Vite

移动端、小程序端前台项目

1. UniApp+iview
2. Taro
3. flutter
4. React Native

PC 端后台项目

1. Nuxt.js全家桶

Node.js 全栈开发

1. Nest.js 系统开发框架
2. Strapi 快速开发框架
3. Express/Koa

Serverless和云开发

1. 轻服务
2. Vercel
3. 腾讯云等提供的 Serverless平台

前端前沿技术和趋势

1. 跨平台开发：Flutter
2. 微前端架构：如 qiankun、MicroApp
3. 3D前端和可视化：如Three.js
4. 基建转移：基础设施采用Rust等其他语言编写