sucaiwa的博客

这一课时我们继续抛开技术，聊聊前端工程师职业规划相关的内容。我不打算给你制定一个最优的进阶路线，因为每个工程师所处的环境、工作经历、职业目标都不一样，有的名校高学历，有的大厂背景，有的自学成才……并没有一个万金油的最优进阶路线。虽然如此，但如果能明白核心问题，在职业生涯中做好关键选择，就能帮我们大大增加成功概率。具体核心问题包括下面 3 个：跳槽时机、公司选择及管理团队。

这个模块很重要，能给面试官形成第一印象。记住原则一，把自己获得的荣誉都写上去，让自己看起来厉害一点，尽量多写些，把重要的（吸引人的）写前面，次要的写后面。先来看一段常规版的个人介绍：多年 Web 开发经验，具有前后端开发能力，积极参与技术分享，善于总结，喜欢写技术博客，能指导和帮助其他前端工程师成长。大多数人看到这段话的时候可能会觉得平淡无奇，找不到亮点。再来看遵循原则一的个人介绍：图书《 了不起的 JavaScript 工程师 》作者：http://dwz.win/ByD。

Generator 函数是 ES6 提出的除 Promise 之外的另一种异步解决方案，不同于常见的异步回调，它的用法有些“奇怪”。这里我们只简单介绍一下它的主要用法。...当调用 Generator 函数后，函数并不会立即执行，而是返回一个迭代器对象。函数体内部使用 yield 表达式，定义不同的内部状态。

这一课时动手实践了一个简单的 CSS 预处理器，希望你能更好地掌握 CSS 工具预处理器的基本原理，同时也希望通过这个实现过程带你跨入编译器的大门。编译器属于大家日用而不知的重要工具，像 webpack、Babel这些著名工具以及 JavaScript 引擎都用到了它。完整代码地址最后布置一道思考题：你能否为预处理器添加一些其他功能呢（比如局部变量）？

这一课时介绍了微前端技术相关概念，核心内容如下：首先，微前端这种架构模式来源于微服务，目的在于对项目进行拆分和隔离，从而提高项目的可维护性和可复用性；其次，微前端这种架构的核心思想有 3 点，技术无关、环境独立、原生优先，其中环境独立比较难以实现，需要借助一定的技术手段或代码规范；最后，主流的微前端实现方式大致分为两类，在服务端集成或者在浏览器端集成，服务端集成一般通过代理转发方式实现；在浏览器端集成则实现方式较多，也有例如single-spa这类框架支持。

Serverless 是由“Server”和“less”两个单词组合而成，翻译成中文就是“无服务器”的意思，所谓无服务器并非脱离服务器的 Web 离线应用，也不是说前端页面绕过服务端直接读写数据库，而是开发者不用再考虑服务器环境搭建和维护等问题，只需要专注于开发即可。也就是说 Serverless 不是语言或框架，而是一种软件的部署方式。传统的应用需要部署在服务器或虚拟机上，安装运行环境之后以进程的方式启动，而使用 Serverless 则可以省略这个过程，直接使用云服务厂商提供的运行环境。

虽然 JavaScript 并不是一门面向对象的语言，但设计模式的原则和思想对我们编写代码仍有很重要的指导意义。本课时介绍了设计模式的 6 个重要原则，包括开闭原则、里氏替换原则、依赖倒置原则、接口隔离原则、迪米特原则、单一职责原则，重点讨论了接口和类的使用方式；然后介绍了 3 类设计模式以及对应的例子，创建型模式重点关注如何创建类实例，结构型模式重点关注类之间如何组合，行为型模式关注多个类之间的函数调用关系。

编程范式指的是编程风格，使用合理的编程范式能提升代码的可维护性。编程范式可分为声明式和命令式。声明式更关注结果而非具体实现，在其子类中，前端工程师最需要关注的是函数式编程及其重要概念：纯函数、高阶函数、柯里化，这种编程方式和 JavaScript 最为贴合。命令式编程更关注具体实现，比较常用的有面向过程和面向对象，其中面向对象有 3 个重要特性：封装、继承、多态。大家平常在编写代码时应该多思考，通过合理地使用各种编程范式来提升代码质量。最后布置一道思考题：你还用过哪些编程范式？

本课时首先介绍了算法的两个重要效率指标：时间复杂度和空间复杂度。时间复杂度根据执行次数来计算，空间复杂度根据临时变量的大小来计算。算法的复杂度用一个带有参数的函数 O 来表示，函数 O 的参数为 n 的多项式，为了方便比较，一般只会保留 n 的最高次项并省略系数。在常见的算法复杂度中，常数复杂度最优，指数复杂度最劣。在理解算法相关基础后重点分析了 JavaScript 的 Array.prototype.sort() 函数的底层实现算法 TimSort。

这一课时我们介绍了和前端最为贴合的 5 种数据结构，包括数组、栈、队列、链表、树。讲解数组时，JavaScript 引擎通过两种数据结构实现数组，包括 FixedArray 和 HashTable，FixedArray 在时间上有优势，而 HashTable 在空间上更有优势。栈和队列都是操作受限的数据结构，底层实现都可以借助数组，分别遵循 FILO 和 FIFO 原则。链表由于采用指针连接元素节点，所以可以使用不连续的内存地址，在空间上更有优势。

libuv 是一个用 C 编写的支持多平台的异步 I/O 库，主要解决 I/O 操作容易引起阻塞的问题。最开始是专门为 Node.js 使用而开发的，但后来也被 Luvit、Julia、pyuv 等其他模块使用。下图是 libuv 的结构图。libuv 结构图我用黄色线框将图中模块分为了两部分，分别代表了两种不同的异步实现方式。

本课时主要介绍了 3 个最常见的前端安全问题，分别是 XSS、CSRF 和 ClickJacking。XSS 攻击分为存储性、反射型、DOM 型，其中存储型危害较大，会存储到数据库中，导致每次加载页面的时候都会执行恶意代码；反射型则是利用服务端直接拼接字符串模板的原理进行攻击，而 DOM 型攻击更灵活，不需要向服务端发送请求即可实现。CSRF 攻击原理是“借用”用户身份进行恶意操作，服务端可以通过 Referer 字段来判断请求发起方的源是否可信，从而拒绝不安全的域发出的请求。

前端性能优化实际上包括两个步骤，即量化和优化。在量化过程中，先采集特定的指标，本课时提到了 5 个比较重要的指标，包括首屏绘制、首屏内容绘制、可交互时间、总阻塞时间、最大内容绘制；然后对不同用户产生的指标值进行统计，这里推荐使用百分位数统计法，对于不同性能需求的页面设置不同的百分位数。在优化过程中，要根据性能指标统计结果进行优化，可通过做减法和做除法的思路分别对加载性能和渲染性能进行优化。最后布置一道思考题：你还使用过哪些性能优化的指标？欢迎在留言区分享你的答案。

这一课时站在前端工程的角度，从项目组织和代码规范两个方面分析了如何搭建可维护性的前端项目。在项目组织上，对于相关性低的模块可以采用 multirepo 方式进行独立管理，相关度高的模块则可以采用 monorepo 方式对其进行集中管理。在制定代码规范时，对于编写规范，尽量做到可执行、可配置、可扩展，对于提交规范，可以选择适当的工具，比如 commitlint、husky 来保证提交消息的规范化和可读性。

这一课时从源码层面分析了 webpack 的工作原理，webpack 的执行过程大体上可以分为 3 个步骤，包括：检验配置项、创建编译器、执行编译。在 检验 配置项时使用了 JSONSchema 来校验配置参数。在创建编译器时，用到了 tapable 模块提供的钩子机制，通过触发适当的钩子事件来让对应的插件进行初始化。

本讲介绍了 3 种不同的跨组件通信方式。由于通信双方不属于父子组件，也就是没有直接的依赖/引用关系，所以需要借助“第三方”来进行传递数据，这些“第三方”既包括视图库（Vue 和 React）本身提供的事件机制或全局上下文，也包括面向其进行开发的状态管理库。对于最常用的全局状态管理库 Vuex 和 Redux，通过深入分析其源码，理解了其实现原理。Vuex 内部会创建一个 Vue 实例，并使用这个实例的数据模型来做状态更新；而 Redux 则采用了无副作用的纯函数来生成不可变数据。

这一课时我们先介绍了前端路由的实现基础，包括基于 hash 实现和 history 实现。基于 hash 方式兼容性较好，但是占用了浏览器默认的定位行为，同时会加长 URL 字符串；基于 history 方式可以直接修改 URL 路径，较为美观。然后分析了 vue-router 和 react-router 共同的依赖库 path-to-regexp 中的两个核心函数 pathToRegexp() 和 compile()。

这一课时我们讲解了主流视图库 Vue 和 React 的组件实现机制。两种框架用了不同的方式来描述组件视图，Vue 采用风格偏向 HTML 的模板语言，React 则采用了风格偏向 JavaScript 的 JSX 语法糖，虽然两者风格迥异，但都必须通过编译器进行编译之后才能在浏览器端执行。在组件的数据定义上，两者也有明显的区别。Vue 通过函数来创建并返回数据对象，React 组件的状态对象则具有不可变性。这两种方式都保证了不同组件实例拥有独立的数据（状态）对象。

在理解“表现层”之前，我们先理解另一个概念“资源”。资源指的是一个实体信息，一个文本文件、一段 JSON 数据都可以称为资源。而一个资源可以有不同的呈现形式，比如一份数据可以是 XML 格式，也可以是 JSON 格式，这种呈现形式叫作“表现层（Representation）从 RPC 到 REST 再到 GraphQL，可以看到 API 规范上的一些明显变化。关注点发生了明显的转移。从 API 的提供者，到 API 数据，再到 API 的使用者。语义化的特性更加明显。

本课时介绍了浏览器的同源策略，并分别从请求跨域与页面跨域两个方向介绍了几种常用的跨域方案。对于请求跨域，包括跨域资源共享、JSONP、Websocket、代理转发 4 种方式，推荐优先使用代理转发和跨域资源共享。对于页面跨域，包括 postMessage 和改域 2 种方式，使用频率没有请求跨域那么高，记住 2 种方式实现原理就好。最后布置一道思考题：说一说你还知道浏览器的哪些安全策略？OK，这一课时就讲到这里啦，如果你觉得这个内容对你有所启发，欢迎分享给你的朋友或者同事探讨学习。

缓存是解决性能问题的重要手段，使用缓存的好处很多，除了能让浏览器更快地加载网络资源之外，还会带来其他好处，比如节省网络流量和带宽，以及减少服务端的负担。本课时介绍了 HTTP 缓存策略及 ServiceWorker，HTTP 缓存可以分为强制缓存和协商缓存，强制缓存就是在缓存有效期内直接使用浏览器缓存；协商缓存则需要先询问服务端资源是否发生改变，如果未改变再使用浏览器缓存。ServiceWorker 可以用来实现离线缓存，主要实现原理是拦截浏览器请求并返回缓存的资源文件。

理解 HTTP 对于前端工程师而言非常重要，无论是性能优化还是开发设计 Web 应用都离不开 HTTP，本课时总结了 HTTP 各个版本的核心改进以及解决的问题，同时深入 HTTP 底层依赖 的 TCP，讲解了 TCP 建立和断开连接的过程。分析了 HTTPS 如何通过证书机制以及加密方式来保障通信数据的安全。协议版本解决的核心问题解决方式0.9HTML 文件传输确立了客户端请求、服务端响应的通信流程1.0不同类型文件传输设立头部字段1.1创建/断开 TCP 连接开销大。

这一课时我们分析了 Chrome 浏览器的架构，至少可以得到以下 3 个启示：多进程在稳定性和安全性上有优势，但是资源占用较多；对于复杂的应用我们可以采取服务化的设计方式，将功能模块单独拆分成进程来提供服务；合理利用 GPU 进程可以加速渲染。最后布置一道思考题：说一说你还了解过哪些多进程与多线程设计的应用，它们的结构又是什么样的呢？

本课时的内容偏于底层和抽象，重点在于理解和记忆。首先讲解了 JavaScript 引擎的执行过程，包括解析、解释和优化，这一部分可以结合加餐 1 中提到的编译器知识进行理解。然后讲到了 JavaScript 引擎的内存分为栈和堆两个部分，栈可以保存函数调用信息以及局部变量，特点是“先进后出”以及“用完立即销毁”。堆区存储的数据对象通常比较大，需要采用一定的回收算法来处理，包括用于新生代的 Scanvage 算法，以及用于老生代的标记清除和标记整理算法。

这一课时重点讲述了如何通过 TypeScript 来解决 JavaScript 的类型问题，TypeScript 在原有的基础类型上进行了扩展，理解 TypeScript 的基本类型并不难，重点需要掌握如何通过泛型来对类型进行抽象，如何通过组合及引用来对已有的类型创建新的类型。最后布置一道思考题：TypeScript 能较好地解决编译时类型校验的问题，但无法对运行时的数据（比如通过 AJAX 请求获得的数据）进行校验，你能想到有什么好的方法解决这个问题吗？

由于目前大多数项目都使用了 ES6 模块规范，大家对用法应该比较熟悉，这里就不多介绍了，只补充 3 个小知识：ES6 模块强制自动采用严格模式，所以说不管有没有“user strict”声明都是一样的，换言之，编写代码的时候不必再刻意声明了；虽然大部分主流浏览器支持 ES6 模块，但是和引入普通 JS 的方式略有不同，需要在对应 script 标签中将属性 type 值设置为“module”才能被正确地解析为 ES6 模块；

这一课时涉及了 JavaScript 的核心特性——异步，先从异步概念说起，然后深入异步原理讲述了事件循环和事件队列，最后列举了 3 个常见异步场景的处理方法。异步属于笔试题必考的考点，比如任务队列部分，将 setTimeout/Promise/nextTick 这些异步函数和对象进行任意组合即可出题，所以一定要理解原理。最后布置一道思考题：尝试使用RxJS实现多个 Promise 的串行和并行，并说说它在处理异步方面的优缺点。

简单地理解，原型就是对象的属性，包括被称为隐式原型的proto属性和被称为显式原型的 prototype 属性。隐式原型通常在创建实例的时候就会自动指向构造函数的显式原型。例如，在下面的示例代码中，当创建对象 a 时，a 的隐式原型会指向构造函数 Object() 的显式原型。var a = {}显式原型是内置函数（比如 Date() 函数）的默认属性，在自定义函数时（箭头函数除外）也会默认生成，生成的显式原型对象只有一个属性 constructor ，该属性指向函数自身。

JavaScript 这种弱类型的语言，相对于其他高级语言有一个特点，那就是在处理不同数据类型运算或逻辑操作时会强制转换成同一数据类型。如果我们不理解这个特点，就很容易在编写代码时产生 bug。通常强制转换的目标数据类型为 String、Number、Boolean 这三种。下面的表格中显示了 6 种基础数据类型转换关系。除了不同类型的转换之外，操作同种数据类型也会发生转换。把基本类型的数据换成对应的对象过程称之为“装箱转换”，反过来，把数据对象转换为基本类型的过程称之为“拆箱转换。

这一课时主要讲解了浏览器渲染引擎生成页面的 7 个步骤，前面 4 个步骤为 DOM 树的生成过程，后面 3 个步骤是利用 DOM 树和 CSSOM 树来渲染页面的过程。我们想要理解和记忆这些过程其实很简单，那就是以数据变化为线索，具体来说数据的变化过程为：字节 → 字符 → 令牌 → 树 → 页面最后布置一道思考题：在构建渲染树的时候，渲染引擎需要遍历 DOM 树节点并从 CSSOM 树中找到匹配的样式规则，在匹配过程中是通过自上而下还是自下而上的方式呢？为什么？

对于样式文件的管理，推荐使用 7-1 模式简化后的目录结构，包括 pages/、components/、abastracts/、base/ 4 个目录。对于样式命名，可以采用 BEM 来命名组件、面向属性的方式来命名公共样式。最后留一道思考题：说说你在项目中是如何管理样式代码的？

通过这一讲，我们学习了几种常见布局，包括单列、2 列、3 列及垂直三栏布局，同时思考每种布局的优缺点和使用场景，并且对 2 列布局和 3 列布局实现方法归纳成了 5 个步骤，希望你能举一反三，并应用到实际的工作中。课程代码点击下载。最后布置一道思考题：你还想到了使用哪些方法来实现 2 列或 3 列布局？

最后布置一道思考题：你还能举出关于事件代理在开源项目中使用的例子吗？点击这里下载示例代码。如果你觉得这个内容对你有所启发，欢迎分享给你的朋友或者同事探讨学习。

DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 的接口（这里只讨论属于前端范畴的 HTML DOM），属于前端的入门知识，同样也是核心内容，因为大部分前端功能都需要借助 DOM 来实现，比如：动态渲染列表、表格表单数据；监听点击、提交事件；懒加载一些脚本或样式文件；实现动态展开树组件，表单组件级联等这类复杂的操作。如果你查看过DOM V3 标准，会发现包含多个内容，但归纳起来常用的主要由 3 个部分组成：DOM 节点DOM 事件。

本课时，我从交互实现、性能优化、搜索优化场景出发，分别讲解了 meta 标签、title 标签、link 标签，以及 script 标签在这些场景中的重要作用，希望这些内容你都能有效地应用到工作场景中，不再只是了解，而是能够熟练运用。最后布置一道思考题：说一说你还知道哪些“看不见”的标签及用法？

你好，我是朱德龙，网名“亚里士朱德”，一直深耕在前端领域。我于 2011 年毕业后进入了中兴旗下子公司成为 JSP 全栈工程师，负责开发 B/S 架构的软件系统，参与过亿级数据量的复杂系统开发；后又加入创业公司作为核心骨干开发网上预约平台，作为资深前端工程师从 0 到 1 搭建并开发过云服务平台的前端项目。现在，我作为一家创业公司的前端负责人，带领团队完成大数据、重型计算、深度学习等业务场景的项目前端开发工作。

通过今天的讲解，你应该能理解Vue.js 3的响应式开发操作了，正是由于Vue.js的响应式特性，开发者才可以很方便地实现自己想要的页面功能。根据不同数据类型选择合适的响应式API，例如基础数据用ref，对象数据用reactive；如果想消除数据的响应式特性，可以通过toRaw来进行消除，将响应式数据变成普通数据；不要随便解构响应式数据的属性，把属性赋值给其他变量的时候，赋值出去的数据容易“断开”响应式的联系；监听响应式数据变化的其它副作用操作，可以通过watch来监听处理事件；

我们可以把Vue.js的模板语法，直接理解为HTML语法的一种扩展，它所有的模板节点声明、属性设置和事件注册等都是按照HTML的语法来进行扩展设计的。按照官方的说法就是“所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析”。现在我举个例子，带你了解下模板语法的概念及其不同内容的作用。

又到每一节课的总结时间，我们这节课主要从“Rollup配置Vue.js 3项目”到“Vite配置Vue.js 3项目”，通过对比来介绍Vite的技术理念和使用方式，更多Vite的使用方式可以查看官方文档。与此同时，这节课也不是简单介绍Rollup和Vite的配置项目，而是通过一个对比，让你能知道Vite是作为官方标配工具的原因和演进历程。这些技术工具演进历程，可以让你在做企业级项目时候，可以在技术选型上做参考。

这节课我们讲了这么多关于Webpack的Vue.js 3项目编译配置的知识，核心展示了企业级项目是怎么做编译配置的。用Webpack搭建Vue.js 3项目，主要包括配置项目目录、根据要求安装依赖（Plugin和Loader）、开发模式和生产模式的设置这几个步骤，其中你要特别注意开发模式和生产模式的配置复用和配置隔离。我们前面也说了，我们选择Webpack，是为了面向企业级项目的学习目标考虑。