- 博客(178)
- 收藏
- 关注
RSS订阅原创 vue3响应式原理
Vue 3 实现响应式，本质上是通过 Proxy API 劫持了数据对象的读写，当我们访问数据时，会触发 getter 执行依赖收集；修改数据时，会触发 setter 派发通知。（分析一下依赖收集和派发通知的实现（Vue.js 3.2 之前的版本）。
2023-10-25 16:55:26
72
原创 Vue.js2.0 九个性能优化技巧
（1）定义没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法，它只是一个接受一些 prop 的函数。简单来说是 一个无状态和无实例的组件。（2）基本写法1、将functional设置为true2、.vue单文件组件写法propspropchildrenVNodeslotsdataparentlistenersdata.oninjections（4）优化原理。
2023-10-25 14:17:06
53
原创 typescript:函数类型的协变和逆变
二、TSConfig 中的 StrictFunctionTypes（1）StrictFunctionTypes配置项作用：在比较两个函数类型是否兼容时，将对函数参数进行更严格的检查（When enabled, this flag causes functions parameters to be checked more correctly），而实际上，这里的更严格指的即是 对函数参数类型启用逆变检查。（2）在禁用了 的情况下，TypeScript 并不会抛出错误。这是因为，在默认情况下，对函数参数的
2023-10-18 10:53:51
53
原创 typescript:上下文相关类型
（3）在上下文类型中，我们实现的表达式可以只使用更少的参数，而不能使用更多，这还是因为上下文类型基于位置的匹配，一旦参数个数超过定义的数量，那就没法进行匹配了。
2023-10-18 09:34:50
22
原创 typescript:内置工具类型
实际上，infer + 约束的场景是非常常见的，尤其是在某些连续嵌套的情况下，一层层的 infer 提取再筛选会严重地影响代码的可读性，而 infer 约束这一功能无疑带来了更简洁直观的类型编程代码。而差集 Exclude 也是类似，但需要注意的是，差集存在相对的概念，即 A 相对于 B 的差集与 B 相对于 A 的差集并不一定相同，而交集则一定相同。这个标记，则移除它。1、使用 extends keyof any 标明，传入的 K 可以是单个类型，也可以是联合类型，而 T 即为属性的类型。
2023-10-17 14:52:40
14
原创 typescript:结构化类型系统
（1） TypeScript 的结构化类型系统是基于类型结构进行比较的，而标称类型系统是基于类型名来进行比较的。（2）在 TypeScript 中，可以通过为类型附加信息的方式，从类型层面或者逻辑层面出发去模拟标称类型系统。（3）类型、类型系统与类型检查类型：限制了数据的可用操作、意义、允许的值的集合，总的来说就是访问限制与赋值限制。在 TypeScript 中即是原始类型、对象类型、函数类型、字面量类型等基础类型，以及类型别名、联合类型等经过类型编程后得到的类型。
2023-10-09 17:38:24
16
原创 typescript:泛型
（1）类型别名如果声明了泛型坑位，那其实就等价于一个接受参数的函数。（2）类型别名中的泛型大多是用来进行工具类型封装，比如映射类型中的工具类型。Stringify 会将一个对象类型的所有属性类型置为 string ，而 Clone 则会进行类型的完全复制。（3） 类型别名与泛型的结合中，除了映射类型、索引类型等类型工具以外，还有一个非常重要的工具：条件类型。在条件类型参与的情况下，通常泛型会被作为条件类型中的判断条件（，或者）以及返回值（即两端的值），这也是我们筛选类型需要依赖的能力之一。
2023-10-09 16:26:25
13
原创 typescript:类型工具（下）
（1）TypeScript 存在两种功能不同的 typeof 操作符。我们最常见的一种 typeof 操作符就是 JavaScript 中，用于检查变量类型的 typeof ，它会返回 "string" / "number" / "object" / "undefined" 等值。而除此以外， TypeScript 还新增了用于类型查询的 typeof ，即 Type Query Operator，这个 typeof 返回的是一个 TypeScript 类型。
2023-10-09 14:53:06
6
原创 typescript:类型工具（上）
我们认识了类型工具中的类型别名、联合类型、索引类型以及映射类型。这些工具代表了类型工具中用于创建新类型的部分，但它们实现创建的方式却五花八门，以下这张表格概括了它们的实现方式与常见搭配。
2023-10-08 17:25:52
10
原创 typescript:内置类型any、unKnown、never与类型断言
（1）TypeScript 中表示任意类型。（2）除了显式的标记一个变量或参数为 any，在某些情况下你的变量/参数也会被隐式地推导为 any。比如使用 let 声明一个变量但不提供初始值，以及不为函数参数提供类型标注。以上的函数声明在 tsconfig 中启用了 noImplicitAny 时会报错，你可以显式为这两个参数指定 any 类型，或者暂时关闭这一配置（不推荐）。（3） any 类型的变量几乎无所不能，它可以在声明后再次接受任意类型的值，同时可以被赋值给任意其它类型的变量。
2023-10-07 15:38:53
23
原创 typescript：字面量类型与枚举
（1），它代表着比原始类型更精确的类型，同时也是原始类型的子类型。（2）字面量类型主要包括和，它们可以直接作为类型标注。（3）原始类型的值可以包括任意的同类型值，而字面量类型要求的是。（4）单独使用字面量类型比较少见，因为单个字面量类型并没有什么实际意义。它通常和联合类型（即这里的）一起使用，表达一组字面量类型。
2023-09-28 15:16:49
58
原创 async-validator
当 async-validator 中常见的校验规则无法满足需求时，我们可以编写自定义的校验函数来校验数据。let errerr = '不符合规范'complex: [async-validator 支持对数据异步校验，所以在编写自定义校验函数时，不管校验是否通过，校验函数中的 callback 都要调用。
2023-09-20 13:48:59
1177
原创 vue3+ts+eslint+prettier+husky+lint-staged+commitlint+commitizen+standard-version+vue-test-utils+jest
git cz 终端操作提示都是英文的，如果想改成中文的或者自定义这些配置选项，我们使用 cz-customizable 适配器。（5）cz-customizable 初始化项目运行如下命令使用 cz-customizable 初始化项目，注意之前已经初始化过一次，这次再初始化，需要加 --force 覆盖。
2023-09-05 17:29:54
115
原创 vue3-vuex
（1）Vuex 是一个状态和数据管理的框架，负责管理项目中多个组件和多个页面共享的数据。（2）在开发项目的时候，我们就会把数据分成两个部分，一种数据是在某个组件内部使用，我们使用ref 或者 reactive定义即可，另外一种数据需要跨页面共享，就需要使用Vuex来进行管理（3）Vuex使用state定义数据，使用mutation定义修改数据的逻辑，并且在组件中使用 commit 去调用 mutations。
2023-08-15 15:31:26
315
原创 vue3：使用和动画
然后我们根据 v-move 的命名规范，设置 .flip-list-move 的过渡属性，就实现了列表依次出现的效果了。标签在进入和离开的时候，会有 fade-enter-active 和 fade-leave-active 的 class，进入的开始和结束会有 fade-enter-from 和 face-enter-to 两个 class。（3）响应式机制的进阶用法，那就是可以把一切项目中的状态和数据都封装成响应式的接口，屏蔽了浏览器的 API，对外暴露的就是普通的数据，可以极大地提高我们的开发效率。
2023-08-10 18:00:14
6
原创 vue3：新特性
1、Vue 2 内部所有的模块都是揉在一起的，这样做会导致不好扩展的问题。2、为了解决这个问题，Vue 3 进行了拆包，使用最近流行的 monorepo 管理方式，响应式、编译和运行时全部独立了3、Vue 3 的组织架构中，响应式独立了出来。而 Vue 2 的响应式只服务于Vue，Vue 3 的响应式就和 Vue 解耦了，你甚至可以在 Node.js 和 React 中使用响应式4、渲染的逻辑也拆成了平台无关渲染逻辑和浏览器渲染 API 两部分。
2023-08-09 15:47:02
340
原创 nvm下载安装配置
nvm是node版本管理的工具，具有管理、下载、切换node版本等能力。往往经常不同项目需要依赖不同版本的node，此时nvm就能有效的解决node版本切换的问题。
2023-08-07 15:08:26
1059
原创 javacsrcipt ~~ 符号和^运算符
下图以算式的形式解析了 12 和 5 进行位异或运算的过程。通过位异或运算，第 1、4 位的值为 true，而第 2、3 位的值为 false。1、“^”运算符（位异或）用于对两个二进制操作数逐位进行比较，并根据如表格所示的换算表返回结果。（1）操作符~， 是按位取反的意思，表面上~~（取反再取反）没有意义，实际上在JS中可以。2、12 和 5 进行位异或运算，则返回值为 9。
2023-08-01 17:04:48
10
原创 Element.getBoundingClientRect()
Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。
2023-08-01 14:45:00
420
原创 根据选择器匹配元素
如果元素被指定的选择器字符串选择，Element.matches() 方法返回 true;否则返回 false。（有一些浏览器使用前缀，在非标准名称 matchesSelector () 下实现了这个方法）（1） 语法（2）替代方案对于不支持Element.matches()或 Element.matchesSelector()，但支持document.querySelectorAll() 方法的浏览器，存在以下替代方案。
2023-08-01 14:26:33
255
原创 pointer-events
此时该元素将不响应指针事件，但它下面的元素可以响应指针事件，就像元素不存在于它们之上一样。② visibility属性值：visible，鼠标指针在元素边界上，且stroke属性值非none。① visibility属性值：visible，且鼠标指针在元素内部，且fill属性值非none。此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。① visibility属性值：visible，且鼠标指针在元素内部或边界。① visibility属性值：visible，且鼠标指针在元素边界。
2023-07-28 15:20:01
286
原创 流程设计器中添加泳道图
（1）新增‘垂直泳道’和‘水平泳道’两个节点。（2）点击‘垂直泳道’，拖拽‘垂直泳道’图形到画布；可拖拽图形到任意位置，可拖放图形控制大小（3） 以垂直泳道为例，点击‘更多’按钮，弹出菜单点击‘加一泳道’在垂直泳道右侧添加一条泳道，多条泳道时，有一条总名称的输入框和多条泳道输入框；（4）点击‘加一阶段’在泳道下部再添加泳道，多阶段时，可对每一附件进行阶段输入；阶段名称可修改（5）点击‘删除节点’可删除整个泳道图形（6）点击‘外观’选项，弹出外观选择框，可对泳道图的颜色、线宽、线段类型做调整。
2023-07-27 17:31:59
12
原创 Web Worker
Web Worker是HTML5标准的一部分，这一规范定义了一套 API，允许我们在 js 主线程之外开辟新的 Worker 线程，并将一段 js 脚本运行其中，它赋予了开发者利用 js 操作多线程的能力。因为是独立的线程，Worker 线程与 js 主线程能够同时运行，互不阻塞。所以，在我们有大量运算任务时，可以把运算任务交给 Worker 线程去处理，当 Worker 线程计算完成，再把结果返回给 js 主线程。
2023-07-27 15:43:56
9
原创 Excel导入数据量过大页面卡死分析与解决
（1）使用sheet.js解析excel。（2）数据量过大会导致页面卡死，接口超时。（3）数据不是纯展示，需要交互。
2023-07-24 17:53:48
232
原创 Git指令
有些分支在远程其实早就被删除了，但是在你本地依然可以看见这些被删除的分支，在根目录下运行 git remote prune origin刷新本地仓库与远程仓库的保持这些改动的同步，这样就不会报错了。回退一个版本,且会将暂存区的内容和本地已提交的内容全部恢复到未暂存的状态,不影响原来本地文件(未提交的也。回退一个版本,不清空暂存区,将已提交的内容恢复到暂存区,不影响原来本地的文件(未提交的也不受影响)回退一个版本,清空暂存区,将已提交的内容的版本恢复到本地,本地的文件也将被恢复的版本替换。
2023-05-22 14:06:40
6
原创 vite学习笔记
1）项目冷启动时必须递归打包整个项目的依赖树（2）JavaScript语言本身的性能限制，导致构建性能遇到瓶颈，直接影响开发效率（单线程）
2022-08-09 14:53:20
15
原创 webpack打包速度和体积优化总结
（1）使用 （2）作用：（1）使用:构建完成后会在 8888 端口展示大小（2）作用 （1）使用 webpack4：优化原因： （1）资源并行解析可选方案 （2） 使用 HappyPack 解析资源 1、原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中 2、使用 （2）使用 thread-loader 解析资源 1、原理：每次 webpack 解析一个模块，thread- loader 会将它及它的依赖分配给 worker 线程中 （3
2022-07-09 16:41:08
3763
1
原创 webpack--插件
1、插件没有像 loader 那样的独立运行环境（loader-runner）2、只能在 webpack 里面运行三、插件使用四、开发一个最简单的插件1、src/demo-plugin.js 2、加入到 webpack 配置中五、插件中如何获取传递的参数通过插件的构造函数进行获取 六、插件的错误处理（1）参数校验阶段可以直接 throw 的方式抛出 （2）通过 compilation 对象的 warnings 和 errors 接收 七、插件扩展：
2022-07-07 17:29:31
681
原创 webpack构建
1、初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数2、开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件和内部插件，执行run方法(compiler)开始编译3、确定入口，通过entry找到入口文件4、编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理5、完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系6、输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每
2022-07-05 17:39:44
16
原创 webpack打包原理--webapck-cli及Tapable
（1）作用（2） 命令行工具包 yargs （3）webpack-cli 使用 args 分析参数分组 (config/config-args.js)，将命令划分为9类：（4） webpack-cli 执行的结果1、webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options2、最终会根据配置参数实例化 webpack 对象，然后执行构建流程 （1）意义Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布 与订阅,控制着
2022-07-01 17:09:08
415
原创 webapck打包原理--启动过程分析
（1）npm script（2）webpack直接执行二、查找Webpack入口文件（1）在命令行运行以上命令后，npm会让命令行工具进入node_modules\.bin 目目录查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行，不存在，就抛出错误。（2）实际的入口文件是：node_modules\webpack\bin\webpack.js 四、启动后的结果webpack 最终找到 webpack-cli (webpack-command)
2022-06-25 15:17:11
371
原创 webpack学习笔记
一、loader（1）webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文 件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。（2）本身是一个函数，接受源文件作为参数，返回转换的结果。二、plugin（1）插件⽤于 bundle ⽂件的优化，资源管理和环境变量注⼊，作⽤于整个构建过程。（2）babel-loader的配置文件.babelrc{"presets": [ + "@babel/preset-env” .
2022-06-10 17:56:52
22
原创 浏览器原理--浏览上下文组：如何计算Chrome中渲染进程的个数？
（1）在默认情况下，如果打开一个标签页，那么浏览器会默认为其创建一个渲染进程。（2）如果从一个标签页中打开了另一个新标签页，当新标签页和当前标签页属于同一站点(相同协议、相同根域名)的话，那么新标签页会复用当前标签页的渲染进程。 （1）通过标签点击该链接会打开新的b标签页，新标签页中的 window.opener 的值就是指向a标签页中的 window，这样就可以在新的b标签页中通过 opener 来操作a标签页了。这样我们可以说，这两个标签页是有连接的。（2）通过 JavaScript 中的 ...
2022-06-08 15:46:30
286
原创 浏览器原理--HTTPS：让数据传输更安全
（1）起初设计 HTTP 协议的目的很单纯，就是为了传输超文本文件，那时候也没有太强的加密传输的数据需求，所以 HTTP 一直保持着明文传输数据的特征。（2）但这样的话，在传输过程中的每一个环节，数据都有可能被窃取或者篡改，这也意味着你和服务器之间还可能有个中间人，你们在通信过程中的一切内容都在中间人的掌握中：（1）从 HTTP 协议栈层面来看，我们可以在 TCP 和 HTTP 之间插入一个安全层，所有经过安全层的数据都会被加密或者解密。（2）安全层有两个主要的职责：对发起 HTTP 请求的数据进行加密操作
2022-06-08 12:00:57
1344
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人