随笔分类 - 软件开发 / Web 前端
前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
摘要：异步路由组件 都知道异步路由组件通过 () => import("./views/Home.vue") 导入路由组件。 但是它怎么就按需加载资源、代码分割了？ 不同的代码解析报告 非异步路由组件 异步路由组件 代码分析报告生成代码 pnpm install webpack-bundle-analyz
阅读全文
摘要：ipcMain const { ipcMain } = require("electron"); ipcMain.handle("click-me", (_, msg) => { return "< " + msg + " >"; }) ipcRenderer const { contextBrid
阅读全文
摘要：macOS 不是关闭窗口退出应用，而是关闭窗口保留应用为后台进程。Windows 等系统默认关闭窗口就是退出应用也不保留后台进程。若要让 Windows 也可以实现该行为，在 electron 中可以添加如下代码实现： import { app, BrowserWindow, Tray, Menu
阅读全文
摘要：前言 $(this) 就是把 DOM 对象传递给 jQuery 构造器中，通过 jQuery 对象让我们可以使用 jQuery 的 html()、css() 等一系列函数操作 DOM 元素。 <button id="btn">Click Me</button> <script src="path/t
阅读全文
摘要：安装 搭建 Vite 项目（根据官方文档搭建），安装 electron、nodemon。 pnpm install electron nodemon -D 配置 electron/main.js file:[electron/main.js] import { app, BrowserWindow
阅读全文
摘要：要达到上图效果，可以通过 margin，但是每一行首元素和尾元素都要单独处理，通过 nth-child 选择器设置。 也可以让每一个元素宽度都是父元素宽度的 25%，然后子元素宽度再一点点调试向下减一点点，比如 22% 合适，并且需要设置 justify-content: space-between
阅读全文
摘要：v-if 作用：根据条件动态创建或销毁 DOM 元素。 原理：v-if 实际上是按需渲染的，它会根据表达式的真假值来决定是否在 DOM 树中插入或移除元素。如果条件为 false，该元素不会存在于 DOM 中。 性能：因为 v-if 会真正地添加或移除元素，因此它在初次渲染时的开销较大，特别是当需要
阅读全文
摘要：前言 当依赖的数据发生改变，computed、watch 和 watchEffect 都会被触发。但是它们之间又有自己的特点，使用场景也不一样。 关于 computed 是什么，以及它和普通函数的区别、运用场景，查看我的另一篇博文：[Vue] computed 和 普通函数的区别。 特性 watch
阅读全文
摘要：前言 key、v-once 和 v-memo 都是 Vue 提供的用于优化性能的工具，主要目的是减少不必要的渲染和更新操作，从而提升应用的性能。 key 相关的就不用多说了，[Vue] v-for key 用 index 会出现什么问题。 v-once 这个很简单，仅渲染元素和组件一次，并跳过之后的
阅读全文
摘要：性能问题 当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。例如，当你对列表进行排序时： <li v-for="(task, index) in tasks" :key="index"> {{ task.id }} - {{ t
阅读全文
摘要：app.use 插件 // myPlugin.js export default { install(app) { app.config.globalProperties.$myPlugin = () => { console.log('This is a method from a plugin!
阅读全文
摘要：前言 Vue 2.x 采用的是 Object.defineProperty 来实现响应式系统，它只能监听已经存在的属性，无法监听对象属性的新增或删除。 Vue 3 使用 Proxy 拦截对对象和数组的访问和修改，实现了响应式系统。它通过拦截这些操作，追踪哪些数据被访问、修改，从而在数据变化时通知相关
阅读全文
摘要：z-index 不生效 未设置定位 z-index 仅对定位元素生效，也就是说，元素必须设置了 position 属性为 relative, absolute, fixed 或 sticky。如果元素的 position 是默认的 static，z-index 会失效。 堆叠上下文 层叠上下文是元素
阅读全文
摘要：特点 伪类 伪元素 用途 选择元素的状态或基于结构选择元素 创建虚拟的内容，操作元素的某些部分 语法 使用单个冒号 (😃 使用双冒号 (:😃 生成内容 不生成新内容，只应用样式 可以生成并操作新内容 常见示例 :hover, :focus, :nth-child() ::before, ::af
阅读全文
摘要：src 和 href <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <
阅读全文
摘要：前言 事件委托（Event Delegation） 是一种通过将事件监听器绑定到父元素，而不是直接绑定到每个子元素上的技术。这样可以减少事件监听器的数量，提升性能，并使得对动态添加或移除的元素更容易进行事件处理。 事件冒泡和事件捕获 事件冒泡：从里往外 <div id="parent" style=
阅读全文
摘要：前言 高阶组件用于复用组件逻辑，返回一个增强后的组件。高阶组件主要用于跨多个组件复用逻辑，比如： 日志记录 权限控制 性能监控 高阶组件 import { defineComponent, onMounted, h } from "vue"; export function withAuth<T>(
阅读全文
摘要：要更新表格数据，通过 table 的 reload 方法。reload 可以重新渲染表格，并更新其数据。 <body> <table class="layui-hide" id="demo-table"></table> <div id="demo-laypage"></div> <script>
阅读全文
摘要：闭包概念 闭包（Closure）是 JavaScript 中的一个核心概念，它指的是函数和其外部环境（或词法作用域）之间的组合。简单来说，闭包是指当一个函数在其外部作用域中引用了变量时，该函数和这些变量的组合形成了一个闭包。 闭包的表现 闭包通常是由一个外部函数包裹一个内部函数，且返回内部函数，从而
阅读全文
摘要：border-box IE 盒子模型，占据网页面积： 宽度：width+margin*2 高度：height+margin*2 实际宽度：width，实际高度：height content-box 默认的盒子模型，占据网页面积： 宽度：width+padding*2+border*2+margin*
阅读全文
