【全栈开发技术路线】

最新推荐文章于 2024-04-28 01:18:36 发布

JosieBook

最新推荐文章于 2024-04-28 01:18:36 发布

阅读量1.2k

点赞数 4

文章标签： c5全栈

原文链接：https://zhuanlan.zhihu.com/p/527506006

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

全栈介绍：

需求分析、设计规划、数据库设计、前端开发、后端开发、测试、服务部署、后期维护，全部一个人搞定。

Web 全栈开发学习路线（基础篇）

对于非计算机专业或转行的同学，甚至本专业的同学未来需要往 Web 全栈方向发展，并成为一名资深开发的必备知识体系能力清单。一名优秀的前端开发工程师也叫做 "全栈开发工程师"，这个时代也被叫做"大前端时代"。只有根基扎实了，未来才能盖高楼大厦。

1.计算机基础

需要了解和熟悉核心知识点，具体内容可查阅相关资料

计算机组成原理	操作系统	汇编语言
冯.诺依曼结构	进程和线程	寄存器和内存模型
二进制	CPU调度算法	堆栈模型
算术运算和逻辑运算	内存管理	CPU指令
各级存储器的区别	文件系统和IO	/

编译原理	计算机网络	编码
编译器流程	TCP/IP协议	ASCII编码
AST	UDP	Unicode字符集
/	DNS ， HTTP	UTF-8，UTF-16

2.数据结构

结构化与非结构化的思维非常重要

逻辑结构与代码表现	线性结构	树（tree）	其他
栈(逻辑结构) --数组、链表（代码表示）	向量（C语言中length不变）	普通树	优先级队列：堆
队列(逻辑结构)–数组（代码表示）	链表	二叉树(为何重点是二，而非三、四？)	词典（散列表）
树(逻辑结构)–对象（代码表示）	栈	搜索树（AVL树、红黑树、B树）	图
/	队列	/	/

3.算法

了解基本常用算法

算法思想	递归思想	常用算法	算法刷题
二分	本质	线性结构（增、删、查、排序）	leetcode
贪心	爆栈	树结构（遍历）	/
动态规划	/	图结构（搜索，最短路径）字符串（KMP算法、前缀匹配）	/

4.编程模式

面向对象OOP	面向切面AOP	函数式编程FP
类和对象	主要功能、意图	高级函数，纯函数
三要素（封装、继承、多态）	AOP/OOP区别	curry
UML类图	作用、应用范围	compose

5.设计模式

SOLID原则	常见设计模式	常见应用程序框架模式
单一职责原则	工厂模式、构造器模式	MVC
开闭原则	单例模式、原型模式	MVVM
里式替换原则	发布订阅者模式（观察者模式）	ORM
接口隔离原则	适配器模式、装饰器模式	/
依赖倒置原则	代理模式、外观模式、迭代器模式	/

6.前端相关语法和 API

业界标准：W3C、ECMA-262
XML:可标记扩展语句

(1)HTML/HTML5标签属性

基础标签
- 文档声明、文档结构、功能标签
- 块级元素、区块标签、内联元素、特殊内联元素
- 转义字符、表格标签
媒体标签、图形标签
- 音视频
- SVG
- Canvas

(2)CSS/CSS3样式和属性

基础	布局	定位	响应式	CSS3	模块化
理解“流”CSS设计的核心	block和inline-block	relative，absolute	viewport	渐变	BEM
基础的图文样式	盒模型、margin相关	fixed	rem	动画	css-in-js
层叠性和选择器权重、字体、iconfont	float 布局，BFC，Flex、Grid、响应式布局，移动端事件	定位上下文	vw vh，百分比	2D/3D 转换	/

(3)ES语法

变量，表达式，函数等基础语法
作用域：
- 自由变量
- 闭包
- this
class 和继承
原型、原型链
异步编程：
- promise、async/await
- 宏任务和微任务
- event
- loop
- 模型
Map 和 Set
Proxy 和 Reflect
装饰器 Decorator
常用 API ：
- 字符串
- 数组
- 对象
- 正则表达式
- 日期处理
异步处理
模块化：ES6 Module（可对比 AMD、CMD、CommonJS）

(4)TypeScript语法

类型：变量类型、函数参数类型、函数返回值类型
自定义类型
接口
泛型
枚举
函数重载
命名空间

(5)JS Web API

DOM 操作：
- DOM 结构
- DOM 操作
- DOM 操作的性能考虑
DOM 事件：
- 事件绑定
- 冒泡模型
- 事件代理（委托）
BOM 操作：
- window
- location（获取 url）
- navigator（获取 UA）
- history（前端路由）
- screen
通讯：
- postMessage
- BroadcastChannel
Ajax：
- XMLHttpRequest
- Fetch
- 浏览器同源策略
- 跨域请求（CORS、JSONP）
- cookie
存储：
- localStorage
- sessionStorage
- indexedDB
webworker：相关 API

(6)WebAssembly（简写 wasm）

值得深入研究，目前最新技术方案
最近，WebAssembly 在 JavaScript 圈非常的火！解析运行更快，将改变 Web 开发领域
WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。
WebAssembly 由 Web 和 Assembly 组成，简言之就是在 Web 上运行 Assembly，其缩写是 wasm。开发者可以把 Rust、Go、C 等编写的程序编译为 WebAssembly，从而让程序在浏览器中运行。
2019 年，W3C 宣布 WebAssembly 核心规范成为正式标准。
时隔 3 年，在 2022 年 4 月 W3C 又发布了 WebAssembly 核心规范 2.0 的首个草案
目前，国内大厂已经在实际生产中应用了。（比如：微信的存储和算法中台）

(7)WebAssembly（简写 wasm）

WebRTC，名称源自网页即时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的 API。

7.网络和通讯

TCP/IP（了解即可）: IP，7 层模型，3 次握手
URL 格式
DNS 解析（域名到 IP）
HTTP：
- method（Restful API）
- 状态码
- Request Header
- Response Header（其中会有 gzip 压缩）
- cookie
- 缓存策略（强制缓存、协商缓存）
HTTPS：
- 如何加密传输
- 购买 SSL 证书
WebSocket
登录方案：
- session
- jwt
鉴权方案：
- oauth2
- sso
文件上传
相关术语：
- PV
- UV
- QPS …
CDN（专门提供静态文件服务，需要知道）

8.Web 前端企业级项目开发流程

一线企业级项目研发流程
1、代码版本管理 Git：

常用命令、多人协作开发
使用 GitHub、GitLab、Gitee、http://coding.net 等

2、软件包管理：

npm
package.json
yarn

3、技术基建：

UI 组件库
业务组件库
公共 SDK

4、Mock：

charles mock，
mock.js
在线 mock server
国内目前推荐：https://www.fastmock.site/

5、调试和抓包：

debugger
charles 和 fiddler（抓包、配置代理，如微信能力的测试，需要线上域名）
chrome 开发者工具
深入：内存泄漏的排查

6、单元测试：

jest 等工具
Vue React 框架的测试工具

7、CI/CD：

持续自动化部署和监控
github actions
travis 等等

8、linux 基本应用：

ssh
ssh key 信任
常用命令
scp 远程拷贝
vim 编辑器

9、文档：

wiki 平台
在线 office / 知识库
MarkDown

10、研发流程：
① 需求评审和 UI 设计
② 技术方案设计
③ 开发过程：编码、调试、单元测试、自测、写注释和文档、代码走查等
④ 联调
⑤ 提测
⑥ 上线：全量，小流量（灰度），ABTest
⑦ DevOps

Web 全栈开发学习路线（高级篇）

从全局的视角，看清楚完整的技术体系和学习路线是非常有必要的，学习就不会迷茫。

1.前端工程化

规范化
- Eslint 编码规范（结合 pre-commit）
- Git 规范：branch 命名规范，commit 规范
- jsdoc 注释规范
模块化
- 代码分模块组织（依赖于 js css 模块化语法和 webpack 等工具的支持）
- 组件化
自动化
- 脚手架（如 create-react-app vue-cli），yeoman
- 监听文件变化，自动构建
- CI/CD 自动单元测试，自动提测、上线等
- 自动兼容（如 postcss babel）
webpack
- 基础配置，常用 loader，常用 plugin
- 代码拆分、公共代码抽离（产出多 chunk）
- 性能优化
babel 编译
- babel-polyfill
- babel-runtime
- corejs
rollup.js ES 模块打包器
Parcel 零配置 JS 打包神器

2.运行和监控

浏览器和 webview 引擎
页面加载和渲染：从输入 url 到页面显示的整个过程
- 加载过程
- 渲染过程
- 重绘/重排
JS 运行机制
- JS 引擎（如 V8 ）
- 内存机制
- 垃圾回收机制
性能优化
- 优化加载速度
- 优化渲染速度
- 优化操作体验（如节流、防抖）
- Chrome Performance API 性能监控
- Chrome lightHouse 检测工具
安全
- XSS
- CSRF
- DDOS 攻击
- 密码加密存储
监控和统计
- 错误监控、报警
- 性能监控
- 统计上报（小流量统计）
- APM 监控平台
客户端能力
- jsbridge（如微信 jssdk）
- js 调起 app

3.前端框架基础

SPA 和 MPA （单页应用和多页应用）
前端路由
MVVM
组件化
虚拟 DOM 和 diff 算法

4.Vue

vue-cli
基础使用
- 组件
- 模板
- 指令
- 组件属性
- 组件生命周期
- 高级使用（如动态组件、异步组件、slot 等等）
- 性能优化
原理
- 响应式（ Object.defineProperty ）
- 模板编译
- 虚拟 DOM
周边
- vuex
- vue-router
- UI 框架
  elementUI
  view-design（之前叫 iview）
  ant-design-vue
Vue3.x + TypeScript + Vite

5.React

create-react-app
基础使用
- JSX 语法
- 组件和属性
- state 和 setState
- 组件生命周期
- 高级使用（如 Context、高阶组件、render-prop 等）
- 性能优化（如 shouldComponentUpdate PureComponent ）
原理
- JSX 语法糖本质
- 合成事件机制
- batchUpdate 机制
- 事物机制
- 组件渲染流程
- fiber
周边
- redux
- mobX
- react-router
- UI 框架
  ant-design
Hooks