- 博客(354)
- 收藏
- 关注
RSS订阅原创 《八》层叠上下文 Stacking Context
层叠上下文：Stacking Context。是 CSS 中用于控制元素在 z 轴上的堆叠顺序的机制。z 轴：垂直于屏幕的轴。
2025-03-03 10:57:14
887
原创 OSI 参考模型和 TCP/IP 参考模型
数据通信是很复杂的，很难在一个协议中完成所有功能。因此在制定协议时经常采用的思路是将复杂的数据通信功能由若干协议分别完成，然后将这些协议按照一定的方式组织起来。最典型的是采用分层的方式来组织协议，每一层都有一套清晰明确的功能和任务，这些功能和任务相对独立，这样就可以把复杂的网络问题分解成一层一层简单的模块；每一层都对上一层通过接口提供一定的服务，高层不需要了解低层的工作机制、使用设备和技术细节，只需知道低层通过接口提供哪些服务。
2025-02-14 15:27:25
601
原创 《Vue3 十》Vue 的底层原理
原生 JavaScript、jQuery 都是命令式编程。目前，Vue、React、Angular、小程序等都是声明式编程。
2025-01-20 15:13:08
362
原创 《Vue3 七》Vue 中的动画
Vue提供了一些内置组件和对应的API来完成动画，利用它们可以方便地实现动画效果。Vue的动画并没有编写好动画的类，只是会在恰当的时机自动将开发者编写好的类添加、移除。动画的原理，Vue。
2025-01-19 17:09:30
475
原创 Pinia
通过定义 store。接收两个参数，第一个参数是当前 store 的唯一标识 id；第二个参数是当前 store 的配置对象。返回一个函数，调用返回的函数就会创建并返回 store。// 1. 定义 store。通过 defineStore() 定义 store。在 Pinia 中可以定义任意数量的 store。定义好 store 之后，不需要手动将其加入到 pinia 中，pinia 会自动对其进行管理// 2. 获取 store。通过调用 defineStore() 返回的函数创建 store。
2025-01-14 12:13:54
177
原创 Vue 的状态管理 Vuex
Vuex4 匹配 Vue3；Vuex3 匹配 Vue2。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2025-01-13 16:39:16
252
原创 Vue Router
Vue Router4 匹配 Vue3；Vue Router3 匹配 Vue2。Vue Router 是 Vue 官方的路由管理器。Vue Router 基于路由和组件的映射关系，监听页面路径的变化，渲染对应的组件。
2025-01-11 22:57:36
493
原创 《Vue3 九》＜script setup＞ 语法糖语法
在语法糖的写法中，顶层的绑定会暴露给模板，因此在中定义的变量、函数等可以直接使用。不需要像在setup()中一样return返回。<template>--在<scriptsetup>中编写CompositionAPI就相当于是在setup()函数中编写CompositionAPI-->
2025-01-11 10:32:56
439
原创 《Vue3 八》从 Options API 到 Composition API
setup() {// 1. 定义普通数据。定义普通的数据也可以被使用，但是不是响应式的，如果对其进行修改，数据会改变，但是视图不会更新// 2. 返回普通数据。所有想要绑定到 template 模版中的数据都需要返回return {count,handleAdd,
2025-01-08 12:15:16
307
原创 《Vue3 四》Vue 的组件化
使用kebab-case短横线分隔符。// 使用// 定义使用PascalCase大驼峰标识符。// 使用。在原生 HTML 文件中这么写是无效的，因为 HTML 不区分大小写；不过在 Vue 文件中就没有这个问题了// 定义。
2024-12-28 18:47:17
304
原创 《Vue3 二》Vue 的模板语法
Vue 允许开发者自定义指令。自定义局部指令：通过组件的 directives 选项定义，只能在当前组件中使用。--假设要自定义一个当 input 元素挂载完成后就自动获得焦点的指令 v-focus --><template>-- 2. 使用自定义指令 --><script>// 1. 定义自定义指令// 在 directives 中编写自定义指令的名称时不需要加 v-。编写的自定义指令是一个对象，其中放置的是自定义指令的生命周期函数，自定义指令的生命周期函数会默认接收当前元素作为参数。
2024-12-26 11:10:27
771
原创 《Vue3 三》Vue 中的 options 选项
template 选项：用于编写模板。data 返回的对象中定义的数据可以通过插值语法等方式绑定到 template 模板中。当数据发生变化时，template 模板会自动进行更新来显示最新的数据。template 模板对数据的监听默认就是深度的，即使改变的是对象中的某个属性，template 也可以监听到并自动更新显示。
2024-12-24 12:12:27
426
原创 适配 IOS 安全区域
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响。
2024-01-11 15:36:51
1641
原创 《三十一》开发模式构建工具 Vite
基于 Vite4。在实际开发中，编写的代码往往是不能被浏览器直接识别的，例如 ES6+、React、Vue、TypeScript 等，必须通过构建工具来对代码进行转换、编译，例如 Webpack、Rolluop、Vite 等。Vite：下一代前端开发与构建工具，能够显著地提升前端开发体验。
2023-12-10 20:22:04
1004
原创 《三十》模块化打包构建工具 Rollup
基于 Rollup4。Rollup 是一个 JavaScript 的模块化打包工具，可以帮助编译微小的代码到庞大的复杂的代码中（例如一个库或者一个应用程序）。
2023-12-06 11:47:12
1422
原创 《二十八》React 项目中关于 Webpack 的配置
运行 命令，创建一个 React 项目；运行 命令启动项目。查看项目根目录下的 文件，可以发现，运行 命令实际上就是在运行 命令。在项目根目录的 下可以看到有 ， 中的其实只是起一个链接的作用。真正的代码在 中，查看 文件中的 属性，可以发现， 链接到的其实是 文件。在 文件中可以看到，会根据命令中不同的参数去执行 文件夹下对应的同名文件。因此，在 React 项目中执行 命令本质上就是在执行 文件。查看 文件，会发现，React 其实也是 启动的本地服务器。
2023-12-03 13:57:00
1032
原创 JavaScript 的二进制家族三
Base64 是一种数据编码方式，基于 64 个可打印字符来表示二进制数据。也就是说选出 64 个字符作为一个基本字符集，然后其他所有符号都转换成这个字符集中的字符。64 个字符包括小写字母a-z、大写字母A-Z、数字0-9、符号"+“、”/"，再加上作为垫字的 “=”，实际上是 65 个字符。
2023-11-30 14:25:13
490
原创 《六》CSS 中的自定义属性
自定义属性：也可以称作 CSS 变量或者级联变量。），由var()函数来获取值（例如：）它包含的值在整个 CSS 文档中都可以重复使用。自定义属性会继承。
2023-11-29 09:39:42
387
原创 《二十七》自定义 Plugin
Webpack 中的大部分插件都是一个类，在类中需要实现一个叫做 apply 的方法。Webpack 在创建编译器对象时（createCompiler），会调用插件的 apply 方法注册插件，并将 compiler 编译器对象作为参数传入。在插件的 apply 方法中就可以通过 compiler 编译器对象获取到 Hook 并为其注册事件。当 Webpack 运行到对应的生命周期时会调用对应 Hook 注册的事件，其中回调函数就会被执行。新建，并编写代码。新建，并编写自定义插件的代码。
2023-11-25 14:12:25
797
原创 《二十六》自定义 Loader
新建文件，并编写代码。新建文件，并编写自定义 loader 的代码。// 导出一个函数，默认接收三个参数：第一个参数是 Webpack 读取到的要加载的模块的内容，会放到 content 中；第二个参数是 sourcemap 映射；第三个参数是 meta 元数据// 必须返回处理后的结果在中进行配置。// 为了能更明确地看到效果，使用 development 模式，防止 Webpack 进行某些默认的优化module: {rules: [
2023-11-20 21:37:05
88
原创 《二十四》运行 webpack 命令的启动流程
webpack.jswebpack.jsrun()总结来说，执行时，会先去执行，目的就是为了把打包命令中的参数和配置文件中的配置进行合并；然后再真正执行 Webpoack。不同的版本可能会略有差异，此处是和。mac 和 windows 中文件的位置不同，此处是 mac 中的文件路径。
2023-11-06 22:05:29
351
原创 《二十二》对打包时间和打包体积进行分析
可以使用 SpeedMeasurePlugin 插件来分析每个 Loader 和每个 Plugin 消耗的打包时间。新建index.html和文件，并编写代码。运行webpack命令进行打包，只能看到总的打包时间。。在配置文件中进行配置。再次运行webpack命令进行打包，可以看到总的打包时间和每个 Loader、Plugin 消耗的打包时间。
2023-11-02 18:06:57
220
原创 《十九》在 Webpack 中对文件进行 HTTP 压缩
HTTP 压缩是一种内置在客户端和服务器之间的改进传输速度和带宽利用率的方式。可以在 Webpack 中进行资源的压缩。HTTP 压缩常见的压缩格式有：compress（历史性原因，已不再推荐使用）、gzip（目前使用比较广泛）、deflate（目前使用也比较多）、br（一种新的开源压缩算法、专门为 HTTP 内容的编码而设计，但目前有些浏览器不支持）。
2023-11-01 17:33:43
93
原创 《十八》对打包后的 CSS 文件中的 CSS 代码进行 Tree Shaking
PurgeCSS 只会对打包后的 CSS 文件中的 CSS 代码进行 Tree Shaking，不会对打包后的 HTML 文件、JS 文件中的 CSS 代码进行 Tree Shaking。PurgeCSS 是一个独立的工具，可以单独使用，也可以结合 Webpack 等构建工具中一起使用。由于 PurgeCSS 是对打包后的 CSS 文件中的 CSS 代码进行 Tree Shaking，所以源代码中使用 Less、Sass 等 CSS 预处理器都没有问题。，但是它也被打包到了输出的文件中。
2023-10-29 16:18:16
238
原创 《十七》对打包后的 JavaScript 文件中的代码进行 Tree Shaking
Tree Shaking 在计算机中表示消除死代码。Tree Shaking 最早源于 LISP，用于消除未调用的代码，后来也被应用于其他的语言，例如 JavaScript、Dart 等。JavaScript 中的 Tree Shaking 依赖于 ESModule 的静态语法分析，不执行任何代码，就可以明确地知道模块的依赖关系。最早源自打包工具 rollup，rollup 主要用于对 ESModule 相关的代码进行打包。Webpack2 开始内置支持 ESModule 和检测未使用模块的能力；
2023-10-28 18:31:03
139
原创 《二十》Scope Hoisting
ModuleConcatenationPlugin 插件的原理：依赖于 ESModule 模块的静态分析，ModuleConcatenationPlugin 插件会分析出来哪些代码可以进行作用域提升，就会对可以进行作用域提升的代码进行作用域提升。在 production 模式下，该模块会默认开启。Webpack 默认情况下会有很多的函数作用域，无论是从外开始的代码开始，还是加载一个模块，都需要执行一系列的函数，Scope Hoisting 可以将函数合并到一个模块中来运行。
2023-10-25 17:28:31
82
原创 《十五》对打包后的 CSS 文件中的代码进行压缩
CssMinimizerWebpackPlugin 插件只会对打包后的 CSS 文件中的 CSS 代码进行压缩，不会对打包后的 HTML 文件、JS 文件中的 CSS 代码进行压缩。在 Webpack 中可以使用 CssMinimizerWebpackPlugin 插件来实现对 CSS 代码的压缩。CssMinimizerWebpackPlugin 插件是使用 cssnano 工具来压缩 CSS 的。CSS 压缩通常是去除无用的空行空格等，因为很难去修改选择器、属性名、属性值等。
2023-10-25 16:40:01
252
原创 《十四》对打包后的 JavaScript 文件中的代码进行压缩和丑化
Terser 是一个可以对 JavaScript 代码进行压缩和丑化的工具集。本身是一个独立的工具，可以单独使用；也可以结合 Webpack 等构建工具一起使用。早期是使用uglify-js来压缩、丑化 JavaScript 代码的，但是目前已经不再维护了，并且不支持 ES6+ 的语法。
2023-10-23 22:17:45
356
原创 《二十一》DLL 库
DLL：Dynamic Link Library，动态链接库。最早的时候是 Windows 系统中在多个软件之间实现共享函数库的一种方式。Webpack 中也有内置 DLL 的功能，指的是可以将不经常改变的代码，抽取成一个共享的库，之后就可以将其直接引入到需要的项目中了。从 Webpack4 开始用的已经很少了。React 脚手架和 Vue 脚手架中在升级到 Webpack4+ 之后，都移除了 DLL 库。以下是 Vue 作者关于移除 DLL 的说法。
2023-10-17 22:21:33
71
原创 《十三》对打包后的 CSS 文件的分离
MiniCssExtractPlugin：是一个后处理插件，可以在 Webpack 打包之后，将 CSS 样式从 bundle 中提取出来生成独立的 CSS 文件，并将其引入到 HTML 中。
2023-10-15 11:18:39
156
原创 《十二》对打包后的 JavaScript 文件的分离
默认情况下，Webpack 会将所有的代码都打包生成到一个文件中，这样的话会导致文件体积过大，影响项目启动的速度。可以进行代码分割来提高性能。代码分割：Code Spliting。将打包生成的代码分割到不同的文件中，就可以按需加载文件，提高代码的加载性能。
2023-10-07 09:11:09
688
原创 《十一》配置分离
目前，不管是开发环境的配置信息还是生产环境的配置信息都写在一起，其实可以根据环境进行配置的分离，就可以在打包时采用不同的配置进行打包了。process 是 Node 中的一个全局对象，提供了与当前进程和运行时环境交互的方法和属性。有一点比较特殊，不管为它的属性赋予任何类型的值，Node 都会将其转为字符串类型。进行赋值，就可以在 Babel 的配置文件中获取到当前的环境了。如果 Babel 的配置文件也需要进行环境分离的话，可以给。，然后在 Webpack 的配置文件中根据不同的环境为。
2023-10-05 10:38:26
50
原创 《九》Webpack 中的 watch 模式、DevServer 和 HMR 模块热替换
目前，每次修改源代码之后，都需要手动运行webpack命令重新进行编译打包，并且手动刷新浏览器，才能看到最新的效果。目前，Webpack 中有三种方案来解决这个问题。
2023-09-25 11:59:30
550
原创 《五》Webpack 中处理 JavaScript 模块的 Loader 之 vue-loader、ts-loader、eslint-loader
新建 文件并编写代码。运行 命令进行打包，会发现报错了，Webpack 不认识 Vue 文件。使用 ：：对 Vue 文件进行转换。此时，运行 命令进行打包，会发现打包成功了。：新建 并编写代码。修改 Webpack 打包的入口文件。运行 命令进行打包，会发现报错了，Webpack 不认识 TypeScript 语法。使用 ： ：会自动去使用 TypeScript Compiler 对匹配到的 TypeScript 进行编译转换。当想要对项目中所有的 TS
2023-09-22 16:45:13
656
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人