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 store = useStore(); }} V ...

什么是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。七层负载均衡可以给予这些协议来负载。这些应用层协议中会包含很多有意义的内容。比如同一个Web服务器的负载均衡，除了 ...

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)) { fn = fn.r ...

[科普]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对文件 ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！ [分享]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 SpeedMeasurePlugin ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！ [打包优化]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文件的文件路径 const path = req ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！ [探索]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", output ...

写作不易，未经作者允许禁止以任何形式转载！如果觉得文章不错，欢迎关注、点赞和分享！掘金原文链接 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": (fun ...