学习计划-2023-01-05
指导文章：写给初中级前端的高级进阶指南
怎么做：
- 从指导文章中摘出要学习内容的标题，先列出一个大体的框架，然后通过从各方学习来填充这个标题下的内容。
- 文章内容很多，每完成一部分就在对应标题下填充内容，可以是心得、感悟或是笔记链接。完成知道文章中的内容后在标题后面加上【已完成】。
- 这里的所有内容都应该在完成后填充到知识体系中去。
未完成内容
ES6 系列之 Babel 将 Generator 编译成了什么样子
框架-react 系列。
还未学习 react。
TypeScript-进阶系列。
高级的用法平常用不到，学习了也会很快忘记，等遇到的时候再去学习。
构建工具-webpack。
在基础能力篇已经重新温习了 webpcak。
基础能力【已完成】(2023-01-05 ~ 2023-01-30)
- 指导文章：写给女朋友的中级前端面试秘籍【已完成】
js 基础篇【已完成】
工具【已完成】
webpack 的基本知识【已完成】
性能优化【已完成】
webpack 代码分割是怎么做的？【已完成】
网络【已完成】
讲讲 http 的基本结构？【已完成】
说说常用的 http 状态码？【已完成】
浏览器从输入 url 到渲染页面，发生了什么？【已完成】
讲讲你对 cookie 的理解？包括 SameSite 属性。【已完成】
谈谈 https 的原理？为什么 https 能保证安全？【已完成】
谈谈前端的安全知识？XSS、CSRF，以及如何防范。【已完成】
讲讲 http 的缓存机制吧，强缓存，协商缓存？【已完成】
手写系列【已完成】
深入理解 promise【已完成】
- 指导文章：最简实现 Promise，支持异步链式调用（20 行）【已完成】
JavaScript (2023-01-30 ~ 2023-02-27)
完全熟练掌握 eventLoop【已完成】
指导文章：tasks-microtasks-queues-and-schedules
async/await【已完成】
熟悉 babel 编译后的源码。
babel 对于 async await 配合 generator 函数，做的非常巧妙，这里面的思想我们也要去学习，如何递归的处理一个串行的 promise 链？
axios 中的拦截器，本质上就是一串 promise 的串行执行。
指导文章：手写 async await 的最简实现（20 行）
异常处理【已完成】
掌握异步场景下的错误处理。
指导文章：Callback Promise Generator Async-Await 和异常处理的演进
插件机制【已完成】
理解前端各个库中的插件机制是如何实现的。
指导文章：Koa 的洋葱中间件，Redux 的中间件，Axios 的拦截器让你迷惑吗？实现一个精简版的就彻底搞懂了。
设计模式【已完成】
指导文章：设计模式小册
开发思想
代码规范【已完成】
算法
框架
Vue (2023-02-27 ~ 2023-03-06)
- 如何用 slot-scope 去做一些数据和 ui 分离的封装，如 vue-promised。
<template>
<Promised :promise="usersPromise">
<!-- Use the "pending" slot to display a loading message -->
<template v-slot:pending>
<p>Loading...</p>
</template>
<!-- The default scoped slot will be used as the result -->
<template v-slot="data">
<ul>
<li v-for="user in data">{{ user.name }}</li>
</ul>
</template>
<!-- The "rejected" scoped slot will be used if there is an error -->
<template v-slot:rejected="error">
<p>Error: {{ error.message }}</p>
</template>
</Promised>
</template>
promised.vue
<template> <div> <slot v-if="status === 'pending'" name="pending" /> <slot v-if="status === 'fulfilled'" :data="data" /> <slot v-if="status === 'rejected'" name="rejected" :error="error" /> </div> </template> <script> export default { props: ["promise"], data() { return { status: "pending", data: null, error: null, }; }, methods: { resolve(res) { this.status = "fulfilled"; this.data = res; }, reject(err) { this.status = "rejected"; this.error = err; }, }, mounted() { this.promise.then(this.resolve, this.reject); }, }; </script>
- 如何封装命令式 api 组件。
- nextTick 原理，Vue 源码详解之 nextTick：MutationObserver 只是浮云，microtask 才是核心！。
- 高阶组件
- 理解虚拟 DOM 的本质，网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？。
- 深入探究 vue 源码。
TypeScript(2023-03-06 ~ 2023-03-15)
基础【已完成】
- 指导文章：TS 一些工具泛型的使用及其实现
进阶
- 指导文章：巧用 TypeScript
- 指导文章：conditional-types-in-typescript
- 指导文章：TS 文章
实战
代码质量(2023-03-15 ~ 2023-03-15)
代码风格
利用编辑器插件来保证项目中的代码风格一致：
- prettier
- ESLint
- TSLint
高质量架构
指导文章：如何重构一个过万 Star 开源项目—BetterScroll
构建工具【未完成】
webpack
webpack 基础和优化
滴滴前端工程师的 webpack 深入源码分析系列，非常的优秀。
字节跳动范文杰的 webpack 原理系列：[万字总结] 一文吃透 Webpack 核心原理
性能优化
博客内：
社区讨论
为什么 Vue3 不需要时间切片？
原文地址：Why remove time slicing from vue3?
- Vue3 使用了 Proxy 代理技术，可以更好地监听和拦截对象的变化，从而更高效地更新视图，减少了不必要的重绘和重排，提升了性能。
- Vue3 使用了静态提升和模板编译优化等技术，可以在编译时就将模板转换为渲染函数，减少了运行时的解析和处理，提升了渲染速度。
- Vue3 采用了响应式设计模式，将数据和视图进行了解耦，当数据发生变化时，只需要更新与之相关的视图部分，而不需要重新渲染整个视图，从而提高了性能。
综上所述，Vue3 通过一系列的优化措施，可以更高效地更新视图，减少了不必要的重绘和重排，因此不需要时间切片技术。
只有当频繁更新需要花费超过 100 毫秒的纯 CPU 时间时，时间切片才会变得实际有益，在这种情况下，DOM 可能会成为更重要的瓶颈。
Vue3 的 composition-api 到底好在哪？
学习方法的转变
主动接受英文资料
英文技术社区：
探索 issue
偶尔去看看 github 上的 issue 说不定会有收获。