随笔分类 - 前端
摘要：在一些业务复杂、UI 自定义程度极高的项目中，即使前端团队很有经验，也常会遇到类似的现实情况： UI 组件库并不能满足复杂或个性化的布局需求 表单组件完全是手工打造的 表单校验逻辑也属于“自研”，缺乏统一扩展机制 在这种情况下，如果突然新增一个“跨多表单项联动校验”的需求，很容易让整个校验体系崩掉，
阅读全文
摘要：Chrome浏览器采用了多进程架构，这使得它在提高浏览器稳定性、安全性和性能方面具有显著优势。每个不同的进程负责不同的功能，这样的设计使得浏览器的各个部分能够独立运行、互不干扰。下面是Chrome浏览器中常见的进程类型及其作用： 1. 浏览器进程（Browser Process） 作用：浏览器进程是
阅读全文
摘要：当新旧 vnode 的子节点都是一组节点时，为了以最小的性能开销完成更新操作，需要比较两组子节点，用于比较的算法就叫作 Diff 算法。 9.1 减少 DOM 操作的性能开销 场景： 标签相同，子节点是文本节点，文本内容不同时 虚拟节点： 01 // 旧 vnode 02 const oldVNod
阅读全文
摘要：在 <script> 标签中，defer 和 async 是两个用于控制 JavaScript 脚本加载和执行行为的属性。它们的主要区别在于加载顺序和执行时机。具体如下： 1. defer 属性 加载方式: 使用 defer 的脚本在 HTML 解析的同时异步加载。 执行顺序: 所有带有 defer
阅读全文
摘要：/** * 支持非常长的类`setTimeout`延迟定时器。 * * @param {Function} callback - 延迟执行的回调函数。 * @param {number} delay - 延迟的时间，单位为毫秒。支持超过 `setTimeout` 最大限制（2^31 - 1 毫秒，约
阅读全文
摘要：directives | index.js | throttle.js 挂载 // main.js import directives from "./directives"; Vue.use(directives); 代码实现 // index.js import Vue from "vue";
阅读全文
摘要：.tab-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; .custom-scroll(); } .wrap { min-height: 100%; .a { /* ... *
阅读全文
摘要：目标效果 实现 <div class="pop triangle-border">Hello</div> /* 气泡框类*/ .pop { ... } /* 气泡尖角伪元素*/ .triangle-border:before { content: ''; position: absolute; to
阅读全文
摘要：1. 基本原理 1.1 表单元素 v-model 指令在表单元素（<input>、<textarea> 及 <select>）上创建的双向数据绑定。会根据控件的类型自动选取正确的方法来更新元素值。 1.2 自定义组件 在自定义组件上，v-model 本质是语法糖，会将值绑定到默认的 prop（vue
阅读全文
摘要：在现代前端开发中，模块化开发是不可或缺的一部分。Webpack 作为一个强大的打包工具，提供了很多高级特性来简化和优化我们的开发流程。其中一个非常有用的功能是 require.context。本文将介绍 require.context 的使用方法及其在实际项目中的应用。 什么是 require.co
阅读全文
摘要：1. 提升编码能力和架构设计水平 通过框架源码学习，了解框架一些核心功能的代码设计与实现。这些知识可以帮助你在自己的项目中设计更高效、更优雅的代码结构。 例子1： 在一个大型项目中，你可能需要实现一个类似于Vue的数据绑定系统。通过学习Vue源码，你可以了解其实现原理，如Object.defineP
阅读全文
摘要：pnpm 是一个相对较新的包管理工具，与传统的 npm 相比，pnpm 在依赖管理方面有多个显著的优点，这些优点帮助开发者更高效地管理项目依赖，避免常见的问题。以下是详细说明： 1. 硬链接机制 pnpm 通过硬链接将全局缓存中的包链接到项目的 node_modules 文件夹，而不是像 npm 那
阅读全文
摘要：8.1 挂载子节点和元素的属性 1. 挂载子节点 // 子节点为数组 const vnode = { type: "div", children: [ { type: "p", children: "hello", }, ], }; // 支持多个子节点的挂载方法 function mountEle
阅读全文
摘要：7.1 渲染器与响应系统的结合 最简单的渲染器及其使用 // 渲染器 function renderer(domString, container) { container.innerHTML = domString } // 使用 let count = 1 renderer(`<h1>${cou
阅读全文
摘要：一、默认打包结果 二、配置 node_modules 打到一个文件 结果 配置 // vite.config.js export default defineConfig(({ mode }: ConfigEnv): UserConfig => { const root = process.cwd(
阅读全文
摘要：一、h函数（createElement函数）版本 import Vue from "vue"; import { Modal } from "ant-design-vue"; // 获取扩展 Modal 组件 function getModalConstructor(modalProps, chil
阅读全文
摘要：JSDoc 是 JavaScript 中用于添加文档注释的一种常见方式。它是一种在注释中使用特定标记和语法来描述代码功能和用法的标准化方式。以下是 JSDoc 的主要语法规范和常见标记： 1. 基本注释语法： ```javascript /** * 这里是注释的内容。 */ ``` 2. 描述块：描
阅读全文
摘要：### 父组件 ```html const stuRecordInfo = ref({ stuNum: 11111 }) // 接口请求返回 stuRecordInfo.value.stuNum = 22222 ``` ### 子组件 ```html const info = toRef(props
阅读全文
摘要：Vue依赖导入顺序 1. 类型 2. hooks（vue、vue-router、pinia、element/vant/antd、自定义） 3. 第三方库或插件（SDK） 4. 组件 5. 其他辅助文件（constants、utils、api） Vue页面编写顺序 1. import导入 2. 变量命
阅读全文
浙公网安备 33010602011771号