LeBronChao's Blog

Vuex4 源码解析 Vuex 是在 Vue 中常用的状态管理库，在 Vue3 发布后，这个状态管理库也随之发出了适配 Vue3 的 Vuex4 快速过 Vuex3.x 原理 为什么每个组件都可以通过this.$store访问到 store 数据？ 在 beforeCreate 时，通过 mixin 的方式注入了 store 为什么 Vuex 中的数据都是响应式的 创建 store 的时候调用的是new Vue,创建了一个 Vue 实例，相当于借用了 Vue 的响应式。 mapXxxx 是怎么获取到 store 中的数据和方法的 mapXxxx 只是一个语法糖，底层实现也是从$store 中获取然后返回到 computed / methods 中。 Vuex4 使用 Vue.useStore 在 Vue3 Composition API 中使用 Vuex import { useStore } from 'vuex';export default { setup() { const sto ...

什么是 ORM 对象关系映射（Object Relational Mapping，简称 ORM），是一种程序技术，实现面向对象编程语言中的内存对象与关系型数据库中的业务实体之间的关系映射。这样在我们操作数据库的时候，不再需要和复杂的 SQL 语句打交道，只需要简单地操作对象的属性和方法就可以直接实现对数据库中对应实体表的 CRUD（增删改查）的操作。常见的 ORM 框架有 Node.js 的 TypeOrm、Sequlize，Java 的 Hibernate、Mybatis 和 Go 的 Gorm、GoRose 等。 ORM 的方法论基于三个核心原则 简单：以最基本的形式建模数据 传达性：数据库结构被任何人都能理解的语言文档化 精确性：基于数据模型创建正确、标准化的结构 为什么会出现 ORM 面向对象编程语言和关系型数据库都是目前最流行的技术，但他们的模型是不一样的。 几乎所有的程序里面，都存在对象和关系数据库。在业务逻辑层和用户界面层中，我们是面向对象的。当对象信息发生变化的时候，我们需要把对象的信息保存在关系数据库中。 以 MVC 分层模式为例。Model 作为数 ...

Load Balance 负载均衡 🌡 简介 负载均衡，含义就是根据一定算法将负载（工作任务）进行平衡，分摊到多个操作单元上运行、执行，常见的为 Web 服务器、企业核心应用服务器和其他主要任务服务器等，从而协同完成工作任务。负载均衡在原有的网络结构上提供了一种透明且有效的的方法扩展服务器和网络设备的带宽、加强网络数据处理能力、增加吞吐量、提高网络的可用性和灵活性，同时承受住更大的并发量级。 简单来说就是将大量的并发请求处理转发给多个后端节点处理，减少工作响应时间。 避免资源浪费 避免服务不可用 一、分类 四层（传输层） 四层即 OSI 七层模型中的传输层，有 TCP、UDP 协议，这两种协议中包含源 IP、目标 IP 以外，还包含源端口号及目标端口号。四层负载均衡在接收到客户端请求后，通过修改报文的地址信息（IP + PORT）将流量转发到应用服务器。 七层（应用层） 代理负载均衡 七层即 OSI 七层模型中的应用层，应用层协议较多，常用的为 HTTP/HTTPS。七层负载均衡可以给予这些协议来负载。这些应用层协议中会包含很多有意义的内容。比如同一个 ...

Effect 和 Reactive effect 作为 Vue 响应式原理中的核心，在 Computed、Watch、Reactive 中都有出现 主要和 Reactive(Proxy)、track、trigger 等函数配合实现收集依赖，触发依赖更新 Effect 副作用依赖函数 Track 依赖收集 Trigger 依赖触发 Effect effect 可以被理解为一个副作用函数，被当做依赖收集，在响应式数据更新后被触发。 Vue 的响应式 API 例如 Computed、Watch 都有用到 effect 来实现 先来看看入口函数 入口函数主要是一些逻辑处理，核心逻辑位于 createReactiveEffect function effect<T = any>( fn: () => T, options: ReactiveEffectOptions = EMPTY_OBJ): ReactiveEffect<T> { // 如果已经是effect，则重置 if (isEffect(fn)) & ...

[科普]JavaScript GC 为什么需要垃圾回收 在 C / C++中，跟踪内存的使用和管理内存对开发者来说是很大的负担 JavaScript 是使用垃圾回收机制的语言，也就是说执行环境负责在代码执行时管理内存，帮开发者卸下了这个负担 通过自动内存管理实现内存的分配和资源的回收 基本思路很简单，确定哪个变量不会再被使用了，把它的内存空间释放 这个过程是周期性的，意思是这个垃圾回收程序每隔一段时间就会运行一次 像 JS 中的对象、字符串、对象的内存是不固定的，只有真正用到的时候才会动态分配内存 这些内存需在不使用后进行释放以便再次使用，否则在计算机可用内存耗尽后造成崩溃 浏览器发展史上的垃圾回收法主要有 引用计数法 标记清除法 引用计数法 思路 变量只是对值进行引用 当变量引用该值时，引用次数+1 当该变量的引用被覆盖或者清除时，引用次数-1 当引用次数为 0 时，就可以安全地释放这块内存。 let arr = [1, 0, 1]; // [1, 0, 1]这块内存被arr引用 引用次数为1arr = [0, 1, 0]; // [1, 0, 1]的内存 ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！ [打包优化]Webpack 体积压缩 (juejin.cn) HTTP 压缩 HTTP 压缩是一种内置在 服务器 和 客户端 之间的，以改进传输速度和带宽利用率的方式; HTTP 压缩的流程什么呢? 第一步:HTTP 数据在服务器发送前就已经被压缩了;(可以在 webpack 中完成) 第二步:兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式; 第三步:服务器在浏览器支持的压缩格式下，直接返回对应的压缩后的文件，并且在响应头中告知浏览器; 压缩格式 compress – UNIX 的“compress”程序的方法(历史性原因，不推荐大多数应用使用，应该使用 gzip 或 deflate); deflate – 基于 deflate 算法(定义于 RFC 1951)的压缩，使用 zlib 数据格式封装; gzip – GNU zip 格式(定义于 RFC 1952)，是目前使用比较广泛的压缩算法; br – 一种新的开源压缩算法，专为 HTTP 内容的 ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！ [分享]Webpack 打包分析工具 (juejin.cn) Webpack 打包分析 分享时间和文件的分析工具，便于进行打包优化。 打包的时间分析 如果希望看到每一个 Loader、每一个 Plugin 消耗的打包时间，可以借助于一个插件:speed-measure-webpack-plugin 注意:该插件在最新的 webpack 版本中存在一些兼容性的问题(和部分 Plugin 不兼容) 截止 2021-3-10 日，但是目前该插件还在维护，所以可以等待后续是否更新; 安装 npm i speed-measure-webpack-plugin 使用 创建插件导出的对象 SpeedMeasurePlugin; 使用 smp.wrap 包裹我们导出的 webpack 配置; const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');const smp = new Spee ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！ [打包优化]Webpack DLL (juejin.cn) 认识 DLL 库 什么是 DLL DLL 全称是动态链接库(Dynamic Link Library)，是为软件在 Windows 中实现共享函数库的一种实现方式; 那么 webpack 中也有内置 DLL 的功能，它指的是可以将可以共享，并且不经常改变的代码，抽取成一个共享的库; 这个库在之后编译的过程中，会被引入到其他项目的代码中，减少的打包的时间; DDL 库的使用分为两步: 第一步:打包一个 DLL 库; 第二步:项目中引入 DLL 库 DLL 打包 webpack 内置 DllPlugin 帮助生成 DLL 文件 webpack.common.js context：执行上下文， entry： key：name（placeholder） value：要打包的包名 output（常规） plugins DllPlugin name：定义生成 dll 文件的名称 path：生成 dll 文件的文件路 ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！ [探索]Webpack DevServer 和 HMR 原理 (juejin.cn) Webpack-Dev-Server 为什么要搭建本地服务器 目前开发的代码，为了运行需要有两个操作 npm run build编译 通过 live-server 或者直接通过浏览器打开 html 文件，查看效果 为了完成自动编译，webpack 提供了几种可选的方式 Webpack watch mode Webpack-dev-server Webpack-dev-middleware Webpack Watch Mode webpack 提供了 watch 模式 在该模式下，webpack 依赖图中所有文件，只要有一个发生了更新，那么代码将被重新编译。 不需要手动npm run build 如何开启？ 方式一：在导出的配置中，添加 watch:true module.exports = { entry: './src/index.js' ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！掘金原文链接 Webpack 模块化 Webpack 打包的代码，允许我们使用各种各样的模块化，但是最常用的是 CommonJS、ES Module。 包括如下原理: CommonJS 模块化实现原理; ES Module 实现原理; CommonJS 加载 ES Module 的原理; ES Module 加载 CommonJS 的原理; CommonJS： 打包前 const { dateFormat, priceFormat } = require('./js/format');console.log(dateFormat('abc'));console.log(priceFormat('abc')); 打包后 // 定义了一个对象// 模块的路径(key): 函数(value)var __webpack_modules__ = { './src/js/format.js ...