分享我的编程经验和学习心得

最近在学习 vue-cli 的源码，获益良多。为了让自己理解得更加深刻，我决定模仿它造一个轮子，争取尽可能多的实现原有的功能。我将这个轮子分成三个版本：尽可能用最少的代码实现一个最简版本的脚手架。在 1 的基础上添加一些辅助功能，例如选择包管理器、npm 源等等。实现插件化，可以自由的进行扩展。在不影响内部源码的情况下，添加功能。有人可能不懂脚手架是什么。按我的理解，脚手架就是帮助你把项目的基础架子搭好。例如项目依赖、模板、构建工具等等。让你不用从零开始配置一个项目，尽可能快的进行业务开发。

Serverless，即无服务架构。是指由第三方云计算供应商以服务的方式为开发者提供所需功能，例如数据库、消息，以及身份验证等。它的核心思想是让开发者专注构建和运行应用，而无需管理服务器。Serverless 技术的应用一般有两种：Faas(Function as a Service) 函数即服务和 Baas(Backend as a Service) 后端即服务。优点Serverless 最大的优点就是自动扩展伸缩、无需自己管理。在以往部署一个应用时，需要经历购买服务器、安装操作系统、购买域名等等

什么是微服务？先看看维基百科的定义：微服务（英语：Microservices）是一种软件架构风格，它是以专注于单一责任与功能的小型功能区块 (Small Building Blocks) 为基础，利用模块化的方式组合出复杂的大型应用程序，各功能区块使用与语言无关 (Language-Independent/Language agnostic）的API集相互通信。换句话说，就是将一个大型、复杂的应用分解成几个服务，每个服务就像是一个组件，组合起来一起构建成整个应用。想象一下，一个上百个功能、数十万行

《重构2》一书中对重构进行了定义：所谓重构（refactoring）是这样一个过程：在不改变代码外在行为的前提下，对代码做出修改，以改进程序的内部结构。重构是一种经千锤百炼形成的有条不紊的程序整理方法，可以最大限度地减小整理过程中引入错误的概率。本质上说，重构就是在代码写好之后改进它的设计。重构和性能优化有相同点，也有不同点。相同的地方是它们都在不改变程序功能的情况下修改代码；不同的地方是重构为了让代码变得更加容易理解、易于修改，性能优化则是为了让程序运行得更快。这里还得重点提一句，由于侧重点不同

运行时性能优化 13 条规则1. 减少重绘重排浏览器渲染过程解析HTML生成DOM树。解析CSS生成CSSOM规则树。将DOM树与CSSOM规则树合并在一起生成渲染树。遍历渲染树开始布局，计算每个节点的位置大小信息。调用 GPU 绘制，合成图层。将渲染树每个节点绘制到屏幕。重排当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树，这个过程叫重排。重绘当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕，这个过程叫重绘。不是所有的动作都会导致重排，例如改变字体颜色，只会导致

性能优化有多重要？ 国外有很多机构对此做过调查，发现网站的性能对于用户的留存率、转化率有很大的影响，而且非常直接的说提高网站性能就是提高收入。由于性能优化涉及的知识很多，即使把已经过时的性能优化规则摒弃掉，也有不少的内容。所以我将会用两章的内容来讲解如何做性能优化。性能优化分类性能优化主要分为两类：加载时优化运行时优化例如压缩文件、使用 CDN 就属于加载时优化；减少 DOM 操作，使用事件委托属于运行时优化。在解决问题之前，必须先找出问题，否则无从下手。所以在做性能优化之前，最好先调查一

什么时候需要监控当你的应用频繁报错找不到原因的时候。需要分析用户兴趣爱好、购买习惯。需要优化程序的时候，可以做监控收集数据，做针对性的优化。需要保证服务可靠性稳定性。如果你的应用符合以上任意一条，就可以对应用实行监控了。监控的作用有两个：事前预警和事后分析。事前预警：提前设置一个阈值，当监控的数据达到阈值时，通过短信或者邮件通知管理员。例如 API 请求数量突然间暴涨，就得进行报警，否则可能会造成服务器宕机。事后分析：通过监控日志文件，分析故障原因和故障发生点。从而做出修改，防止这种情况再

部署是指将代码发布到服务器的一种行为。自动化部署就是使用工具来帮助你实现部署的过程，无需亲自动手。在没有学会自动化部署前，我是这样部署项目的：执行测试 npm run test。构建项目 npm run build。将打包好的文件放到静态服务器。偶尔一次两次还行，如果每次部署项目都这样，就会把很多时间浪费在重复的操作上。所以我们要学会自动部署，彻底解放双手。自动部署（又叫持续部署 Continuous Deployment，英文缩写 CD）一般有两种触发方式：定时触发。监听 webho

构建工具就是指能自动对代码执行检验、转换、压缩等功能的工具。从目前市场上流行的构建工具来看，常见的功能有：代码转换，例如将 ts 文件转换为 js 文件。代码打包，将有关联的代码打包在一起。代码压缩、文件压缩、gzip 压缩等。热加载，修改代码后自动刷新页面。代码检验，检查代码格式是否符合规范。…在开发中使用构建工具，能够大大的提升了开发效率。由于前端构建工具比较多，所以本章选取了其中的三个 webpack、rollup、vite 来进行讲解。webpackwebpack 是目前最火

什么是测试维基百科的定义：在规定的条件下对程序进行操作，以发现程序错误，衡量软件质量，并对其是否能满足设计要求进行评估的过程。也可以这样理解：测试的作用是为了提高代码质量和可维护性。提高代码质量：测试就是找 BUG，找出 BUG，然后解决它。BUG 少了，代码质量自然就高了。可维护性：对现有代码进行修改、新增功能从而造成的成本越低，可维护性就越高。什么时候写测试如果你的程序非常简单，可以不用写测试。例如下面的程序，功能简单，只有十几行代码：function add(a, b) {

在了解模块化、组件化之前，最好先了解一下什么是高内聚，低耦合。它能更好的帮助你理解模块化、组件化。高内聚，低耦合高内聚，低耦合是软件工程中的概念，它是判断代码好坏的一个重要指标。高内聚，就是指一个函数尽量只做一件事。低耦合，就是两个模块之间的关联程度低。仅看文字可能不太好理解，下面来看一个简单的示例。// math.jsexport function add(a, b) { return a + b}export function mul(a, b) { return a *

代码规范代码规范是指程序员在编码时要遵守的规则，规范的目的就是为了让程序员编写易于阅读、可维护的代码。试想一下，一个几十万行代码的项目，存在几种不同的代码规范，阅读起来是什么感受？连代码缩进使用空格还是 Tab 都能引发不少程序员的争论，可以说统一代码规范是非常重要的事情。统一代码规范除了刚才所说的两点外，还有其他好处：规范的代码可以促进团队合作规范的代码可以降低维护成本规范的代码有助于 code review（代码审查）养成代码规范的习惯，有助于程序员自身的成长当团队的成员都严格按照代

技术选型应该对很多程序员都不陌生了，无论是大到技术框架、编程语言，还是小到工具库的选择，都属于技术选型的范围。个人认为技术选型应该按照以下四个指标进行选择：可控性稳定性适用性易用性由于没有统一的叫法，所以以上四个指标的名称是我自己定的。下面就让我们一起来深入了解一下如何进行技术选型吧。可控性可控性是技术选型中非常重要的一个指标。可控，就是指如果这门技术因为 BUG 对项目造成了影响，团队中有人能够解决它，而不是等待官方修复。作为技术团队的负责人，一定要是能够兜底的那个人。如果团队解决不了，