- 博客(83)
- 收藏
- 关注
RSS订阅原创 Chrome扩展截图功能实现
/ 选择覆盖层// 是否正在选择// 鼠标起始X坐标// 鼠标起始Y坐标// 选择框元素// 键盘事件处理器// 鼠标按下处理器// 消息监听器API 类别核心方法/属性关键作用TabsqueryTab.idTab.url管理标签页、获取上下文信息、执行截图Scripting注入页面脚本，实现前端交互（如选择覆盖层）RuntimeonMessagelastError扩展内部通信、错误捕获。
2025-12-13 17:21:40
964
原创 Chrome插件截图实现
Chrome禁止在内部页面注入脚本，需要提前检测并友好提示。现代高分辨率屏幕（如Retina显示屏）使用。Chrome API返回的截图数据是。
2025-12-06 11:14:28
978
原创 Flutter ListView 组件及各种模式
模式构造函数适用场景特点基础列表列表项少、固定一次性构建所有子项，简单但性能差动态列表（推荐）列表项多、动态生成按需构建，性能好，适合长列表带分隔线列表需要 item 间分隔在 builder 基础上增加分隔 widget自定义滚动需要完全控制列表布局使用，高级用法水平列表横向滑动内容比如轮播图、横向菜单。
2025-12-02 10:24:14
969
原创 Flutter 点击事件详解
如果你有一个自定义的 Widget（比如一个卡片、头像、自定义布局）方式适用场景是否需要额外组件是否有反馈推荐程度按钮内置 onPressed（如 ElevatedButton）标准按钮点击❌ 不需要✅ 有⭐⭐⭐⭐⭐任意组件添加点击✅ 需要❌ 默认无⭐⭐⭐⭐InkWell带水波纹点击效果✅ 需要（建议放在 Material 下）✅ 有（水波纹）⭐⭐⭐⭐⭐列表项点击❌ 不需要✅ 可自定义⭐⭐⭐⭐图标按钮❌ 不需要✅ 有⭐⭐⭐⭐。
2025-11-27 15:54:54
721
原创 使用React+TS+Vite开发chrome插件
通过以上步骤，你可以快速搭建一个基于 React + TS + Vite 的 Chrome 插件，并逐步扩展功能。Vite 负责将 React/TS 代码编译为浏览器可运行的 JS/CSS，并打包成符合 Chrome 要求的目录结构。：Popup 的 React 组件，调用 Chrome API 实现功能（如获取当前标签页）。的 Chrome 插件需要结合 Chrome 插件的规范与 Vite 的构建能力。（根目录）：Popup 的 HTML 骨架，只需引入 React 编译后的 JS。
2025-11-27 15:52:14
625
原创 Flutter 布局组件详解
Flutter 提供了丰富且灵活的布局组件，掌握这些组件的特性与使用方法是构建美观、高效 UI 的关键。组件作用适用场景Row水平排列子组件一行内的图标+文字等Column垂直排列子组件垂直信息展示ExpandedFlexible分配剩余空间比如两边固定，中间自适应Stack组件堆叠图片+文字覆盖等Padding添加内边距给子组件加边距Container通用容器组合样式、布局、装饰等ListView列表展示滚动内容列表。
2025-11-22 14:33:50
673
原创 Flutter 线性组件详解
组件作用排列方向主轴方向适用场景Row水平线性布局水平（从左到右）水平方向图标 + 文本、按钮组、横向排列等Column垂直线性布局垂直（从上到下）垂直方向表单、页面主体布局、竖向排列等。
2025-11-22 09:54:31
975
原创 Flutter 组件详解：Container
特性说明功能集成一个组件集成背景、边框、圆角、内边距、外边距、对齐、变换等多种功能。灵活组合通过属性组合实现复杂 UI（如带阴影的圆角卡片）。布局友好支持尺寸控制（widthheight）和约束（），适配不同场景。视觉增强通过decoration实现渐变、阴影、边框等高级效果。万能容器既可以承载子组件，也可以作为无内容的占位符或装饰层。🎯一句话总结Container是 Flutter 中“最懂布局的装饰盒”，适合快速实现带样式的组件容器，是日常开发中最常用的“瑞士军刀”组件。
2025-11-21 18:50:08
963
原创 Flutter Wrap 组件详解
特性说明自动换行子组件在水平方向排不下时自动换行到下一行流式布局按从左到右、从上到下顺序自然排列灵活间距支持设置子组件间距（spacing）和行间距（runSpacing对齐控制支持主轴对齐、交叉轴对齐、行间对齐轻量易用无需复杂配置，适合大多数流式布局需求Wrap 是 Flutter 中实现流式布局的利器，特别适合处理多个小组件需要横向排列且自动换行的 UI 场景，是 Row 的“升级版”，也是构建灵活、自然布局的重要工具。
2025-11-20 19:26:55
964
原创 Flutter 组件详解：无状态与有状态组件
Flutter 中的组件是一种可组合、可重用的构建块，用于构建各种用户界面。无状态组件和有状态组件的划分基于组件内部状态是否可变。这种分类方式使得开发者能够根据具体的业务需求选择合适的组件类型，以实现高效、灵活的界面开发。无状态组件和有状态组件在 Flutter 开发中都扮演着重要的角色。无状态组件适用于展示静态内容，结构简单且性能开销较小；有状态组件则用于处理交互式和动态变化的场景，虽然生命周期较为复杂，但能够提供丰富的用户体验。
2025-11-19 13:15:02
1004
原创 Flutter 基础组件
在 Flutter 中，Widget 是构成用户界面的基本单元。它不仅仅是 UI 控件，还包括布局、样式、交互行为的描述。Flutter 的界面完全由 Widget 树构成，通过组合不同的 Widget，我们可以构建出复杂的用户界面。无状态组件（StatelessWidget）：UI 不随时间或用户交互改变，比如一个固定的文本或图标。有状态组件（StatefulWidget）：UI 可以根据数据或用户操作动态更新，比如计数器、输入框等。作用：用于显示文本内容。常用属性text：要显示的字符串。
2025-11-18 16:11:48
962
原创 Webpack详解
Webpack详解：构建现代前端应用的核心工具 Webpack是一个模块化打包工具，其核心概念包括： Entry（入口）- 定义打包起点，支持单入口和多入口配置 Output（输出）- 配置打包结果的文件名和输出路径 Loader - 转换非JS文件为Webpack可处理的模块 Plugin - 扩展Webpack功能，作用于整个构建流程 Module - "一切皆模块"的设计理念 依赖图 - Webpack通过递归分析模块依赖关系构建的依赖网络 Webpack支持多种模块规范（ES M
2025-08-15 16:48:42
1308
原创 Call、Apply、Bind详解
摘要：call、apply和bind是JavaScript中改变函数this指向的三个核心方法。它们的主要区别在于：call和apply会立即执行函数，前者接收参数列表，后者接收参数数组；而bind返回新函数，延迟执行并支持参数分次传入。典型应用场景包括：call/apply用于方法借用和继承，bind用于事件绑定和参数柯里化。三者还涉及严格模式、箭头函数和性能优化等注意事项。实现原理上，它们都通过临时属性绑定this，其中bind还需处理构造函数调用的情况。
2025-07-01 10:42:28
1812
原创 虚拟 DOM Diff 算法详解
摘要：虚拟 DOM Diff 算法是现代前端框架（React/Vue）的核心优化技术，通过对比新旧虚拟 DOM 树差异，最小化真实 DOM 操作。算法核心包括：同级比较：仅逐层对比子节点，避免跨层级（O(n)复杂度）；列表优化：依赖 key 标识节点，React采用双端比较，Vue结合双指针与编译优化；特殊处理：根节点类型变化时直接销毁重建。优化策略：key 提高节点复用率，避免就地更新；双端对比减少移动操作；结合虚拟列表、Fiber架构应对大数据场景。React与Vue差异在于：R
2025-06-12 14:42:40
1145
原创 JS 原型与原型链详解
本文详细讲解了JavaScript中的原型与原型链机制。主要内容包括：1) 原型基础概念，介绍如何访问对象原型和构造函数、实例对象与原型对象的三者关系；2) 原型链的查找机制和代码示例分析；3) new操作符的执行原理及其手动实现；4) 原型链继承的实现方式。文章通过清晰的代码示例和关系图，阐述了JavaScript基于原型的继承特性，帮助读者深入理解这一核心概念。
2025-06-11 17:50:26
1395
原创 JS闭包详解：从原理到实践
闭包的本质 = 内部函数 + 引用的外层函数变量闭包（Closure）是指函数和其定义时的作用域链的结合，使得函数能够跨作用域访问变量。简单说，当一个函数内部定义了另一个函数，并且内部函数引用了外部函数的变量，那么内部函数就形成了一个闭包。只在必要时使用闭包：评估是否真的需要使用闭包，有时可以通过其他方式实现相同功能限制闭包引用的变量：只闭包引用真正需要的变量，避免大对象或DOM元素清理不需要的闭包：提供清理机制，如取消订阅、移除事件监听器等注意函数定义的位置。
2025-06-10 17:03:59
1867
原创 JS 节流（Throttle）与防抖（Debounce）详解
是的，移动端建议适当增加延迟（如PC用300ms，移动端用500ms）（Lodash）或未实现立即执行逻辑。
2025-06-05 11:46:42
1906
原创 JS 事件循环详解
JS 是一种单线程语言，这意味着它只有一个主线程（执行栈）来处理所有任务。这种设计避免了多线程环境中的复杂同步问题，但也带来了一个挑战：如何防止长时间运行的代码阻塞整个程序？：执行栈中的任务依次执行。
2025-05-30 15:00:19
2798
1
原创 React Contxt详解
React 的 Context API 是用的解决方案，尤其适合解决「prop drilling」（多层组件手动传递 props）的问题。
2025-05-19 17:40:35
1290
原创 JS Map使用方法
Map 是 ES6 引入的一种数据结构，用于存储键值对，具有以下特性：键可以是任意类型，保持插入顺序，支持直接获取大小，且在频繁增删操作时性能优于普通对象。常用方法包括 set、get、has、delete 和 clear，并支持多种遍历方式。与 Object 相比，Map 在键类型、顺序、大小获取和性能方面更具优势，但不支持直接序列化。实际应用中，Map 可用于统计字符频率、缓存计算结果等场景。需要注意的是，Map 使用 "SameValueZero" 算法比较键，且使用对象作为键时需注意内存管理问题。
2025-05-13 17:53:31
1891
原创 Vue 的双向绑定原理，Vue2 和 Vue3 双向绑定原理的区别
Vue 的双向绑定（Two-way Data Binding）是其核心特性之一，其本质是通过结合实现的。
2025-05-06 17:20:02
1204
原创 Vue 2 与 Vue 3 自定义指令（Directive）详解
Vue 的自定义指令（Directive）允许开发者直接操作 DOM，实现原生 HTML 无法直接实现的功能（如自动聚焦、滚动加载等）。以下是 Vue 2 和 Vue 3 中自定义指令的核心差异及详细用法。
2025-04-30 07:00:00
1455
原创 0.5 像素边框实现
推荐方案：优先使用缩放伪元素，兼容性最好。高分辨率设备：可结合媒体查询直接使用0.5px。简单场景：尝试box-shadow或0.5px（需测试目标浏览器支持）。性最好。高分辨率设备：可结合媒体查询直接使用0.5px。简单场景：尝试box-shadow或0.5px（需测试目标浏览器支持）。根据实际需求选择合适方案，并注意测试不同设备的显示效果。
2025-04-29 14:00:00
550
原创 JS深拷贝和浅拷贝
浅拷贝适合简单数据，或明确知道不需要独立嵌套属性的场景。深拷贝适合复杂对象，或需要完全独立副本的场景。实际开发中优先使用或 Lodash 的，手写深拷贝需谨慎处理边界情况。
2025-04-29 07:00:00
995
原创 Vue2和Vue3区别之API
Options API 是 Vue 2 中定义组件的标准方式，通过一个包含多个选项的对象来描述组件逻辑。开发者将组件的不同功能分散在不同的选项中（如。
2025-04-28 07:00:00
1272
原创 CSS 内容超出显示省略号
推荐在移动端或 WebKit 内核环境使用，其他场景可考虑后端截断或 JavaScript 方案。在 CSS 中实现内容超出显示省略号，主要通过控制文本溢出行为来实现。根据需求选择合适方案，单行场景推荐优先使用。若元素默认是行内元素（如。
2025-04-27 16:54:52
3000
原创 Vue2、Vue3区别之响应式原理
工作原理：通过遍历数据对象的每个属性，使用Object.defineProperty来定义getter和setter。当数据被访问时，收集依赖；当数据变化时，触发更新。但这种方法有一些限制，比如无法检测到对象属性的添加或删除，需要借助Vue.set或Vue.delete方法。对于数组，Vue 2需要重写数组的方法（如push、pop等）来触发更新，而不能直接通过索引设置元素或修改长度。实现步骤：Object.defineProperty()语法代码示例：2. 局限性无法检测动态属性：解
2025-04-27 08:58:33
1501
原创 CSS常见布局
渐进增强：先写 Flex 布局，再用 Grid 覆盖。：一维布局（水平或垂直方向），通过容器控制子项排列。针对 IE 编写降级代码或使用 Polyfill。：二维布局（行列同时控制），适合复杂网格结构。使用 Autoprefixer 自动添加前缀。：导航栏、等分布局、垂直居中、响应式排列。：仪表盘、卡片网格、杂志式布局。
2025-04-25 11:47:52
1718
原创 CSS标准盒子（标准盒模型）和怪异盒子（怪异盒模型）
标准盒子：内容尺寸独立，但总尺寸易失控（需手动计算padding和border怪异盒子：总尺寸固定，内容自适应，更适合现代响应式布局。优先选择border-box，仅在特殊需求时回退到。
2025-04-25 07:00:00
2987
原创 Vue2的生命周期
/ ❌ 错误：箭头函数导致 this 指向错误// this 不是 Vue 实例// ✅ 正确：使用普通函数// 正常访问数据。
2025-04-23 16:39:44
1047
原创 v-show和v-if的区别，使用场景
它们都依赖于 Vue 实例的数据属性来动态控制元素的显示与隐藏。数据属性发生变化时，Vue 会自动更新 DOM，从而改变元素的显示状态。这与 Vue 响应式原理紧密相关，只要数据变化，对应的视图就会更新。二者在使用时的语法基本相同，都是在 HTML 标签上以指令形式存在，并且后面跟一个 JavaScript 表达式。，都能用于根据不同条件渲染不同的内容。在实际开发中，可根据业务逻辑设置不同的条件表达式，从而实现灵活的页面渲染。），来控制元素显示或者隐藏的状态。时，对应的元素会显示；要复杂的多，因为还有。
2025-04-22 07:00:00
4407
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人