- 博客(147)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 flutter-完美解决键盘弹出遮挡输入框的问题
本文介绍了Flutter中处理输入框被键盘遮挡的解决方案。通过Scaffold组件的resizeToAvoidBottomInset属性（默认为true），可自动调整页面布局使输入框不被键盘遮挡。对于特殊场景如底部抽屉中的输入框，可使用MediaQuery.of(context).viewInsets.bottom动态获取键盘高度，手动设置容器底部内边距来实现精准抬升。文中提供了底部抽屉内输入框的完整实现代码，展示了如何结合isScrollControlled属性和键盘高度计算，确保输入内容始终可见。
2025-07-25 09:34:17
662
原创 Flutter控制组件显示的两种方式Offstage与Visibility
Flutter 中 Offstage 和 Visibility 组件的对比分析摘要：两者均可控制组件显示，但存在关键差异。Offstage 通过移出布局流实现隐藏，保留组件状态和布局计算，适合高频切换场景；Visibility 提供更灵活的隐藏行为（保留空间/替换组件等），支持状态销毁。性能方面，Offstage 切换更快，Visibility 内存管理更优。实际开发中，频繁切换且需保状态选 Offstage，需自定义隐藏逻辑则用 Visibility。本文通过原理对比、场景分析和实战案例，帮助开发者合理选
2025-07-24 09:53:37
553
原创 Vue中使用Swiper的完整指南
本文介绍了如何在Vue项目中集成Swiper轮播库。针对Vue2和Vue3版本，分别推荐使用vue-awesome-swiper插件和Swiper7+原生支持。详细讲解了两种环境下的安装配置方法、基础用法实现，以及分页器、导航按钮等功能的设置。文章还提供了自定义样式的方案，帮助开发者快速实现美观的轮播效果。对于需要轮播功能的Vue项目，本文提供了全面的技术指导，从基础配置到高级定制一应俱全。
2025-07-23 09:45:18
779
原创 ElementUI的Carousel轮播图高度问题
Element UI的Carousel轮播图组件常见高度适配问题及解决方案。文章分析了图片拉伸变形、空白过多、布局抖动和响应式失效等问题，提出基于动态计算的响应式方案。通过监听窗口变化实时计算高度，保证轮播图始终按16:9等比例显示，实现全端适配。该方案适用于以图片为主的轮播场景，能有效避免图片变形和布局抖动问题，保持统一的视觉体验。文中提供了完整的代码示例，包括HTML模板和JavaScript实现逻辑。
2025-07-22 09:48:37
706
原创 父组件调用子组件方法：React的forwardRef完全指南
本文深入探讨了React的forwardRef功能，它允许父组件直接访问子组件的DOM节点或实例。文章介绍了基础用法包括在类组件和函数组件中的实现方式，以及与useImperativeHandle结合使用自定义暴露方法。还讲解了在高阶组件中的应用，确保ref正确传递。常见使用场景包括封装可复用组件如Modal，通过ref控制组件行为。forwardRef在需要直接操作子组件DOM时非常有用，但应避免滥用以保持组件封装性。
2025-07-21 09:38:50
844
原创 TypeScript学习第九天：从零搭建工程化项目
本文介绍了如何从零搭建企业级TypeScript项目，全文以实战为导向，涵盖项目初始化、构建配置到团队协作规范，帮助企业开发者建立标准化TypeScript工程实践。
2025-07-18 10:12:22
631
原创 TypeScript学习第八天：深入高级类型的无限可能
高级类型。这些特性能够帮助我们处理更复杂的类型场景，写出更灵活、更精确的类型定义，让 TypeScript 的类型检查能力发挥到极致。
2025-07-17 09:34:07
1011
原创 TypeScript学习第七天：衔接JavaScript实现渐进式迁移
本文介绍了TypeScript与JavaScript混合开发的实践技巧。主要内容包括：TypeScript作为JavaScript超集的互操作性原理，通过类型声明文件(.d.ts)为JS库提供类型支持的方法，在TS项目中引入JS文件的配置方式（allowJs、checkJs），以及使用JSDoc注释增强类型推断。文章还提供了JavaScript项目渐进式迁移到TypeScript的四个步骤策略，并针对第三方库缺失类型声明、循环依赖等常见问题给出解决方案。这些方法使开发者能够在不中断现有项目的情况下，逐步享受
2025-07-16 09:35:50
876
原创 TypeScript学习第六天：使用模块与命名空间规范代码
模块与命名空间，它们是代码组织的核心工具。模块通过 `import`/`export` 实现跨文件的代码复用和依赖管理，适合大型项目；命名空间通过 `namespace` 关键字将代码组织到命名范围内，适合中小型项目或简单场景。
2025-07-15 09:37:56
577
原创 TypeScript学习第五天：让代码更具通用性的泛型
本文介绍了TypeScript中泛型的概念和应用场景。泛型能够在不牺牲类型安全的前提下，实现代码的复用性和灵活性。
2025-07-14 09:59:20
762
原创 TypeScript 学习第四天：class类与interface接口的结合
在 TypeScript 中，接口除了可以描述对象和函数的结构，还能用来定义类应该遵循的“契约”。一个类可以通过 `implements` 关键字来实现一个或多个接口，这意味着该类必须包含接口中定义的所有属性和方法，否则就会报错。
2025-07-11 09:48:56
581
原创 TypeScript学习第三天：初探接口Interface
TypeScript接口使用指南 本文介绍了TypeScript中接口(Interface)的基本概念和使用方法。接口作为类型检查工具，能够定义对象结构并提供契约式约束。
2025-07-10 09:40:18
991
原创 深度解析useReducer：轻松驾驭React多状态联动场景
useReducer`是 React 提供的一个 Hook，它是 useState`的替代方案，用于管理复杂的状态逻辑。与 useState`不同
2025-07-09 09:49:13
948
原创 告别React页面闪烁！useLayoutEffect 让 DOM 操作快准稳
React的useLayoutEffect Hook在DOM更新后同步执行，适用于需要基于最新DOM进行操作的场景，如获取元素尺寸、更新样式等，能避免视觉闪烁。其语法与useEffect相似，但执行时机不同：useLayoutEffect在浏览器绘制前执行，而useEffect在绘制后异步执行。常见应用包括动态图表渲染、主题切换和DOM事件绑定。使用时需注意避免耗时操作阻塞渲染，合理设置依赖项，并及时清理资源。结合useRef可方便操作DOM元素，但需权衡性能影响。
2025-07-08 09:57:41
881
原创 一文吃透 useContext：神奇的React跨组件数据共享
useContext是React中实现跨组件数据共享的关键Hook，它通过Context机制打破组件层级限制，无需props层层传递。主要特点包括：1) 与createContext配合使用，通过Provider传递数据，子组件用useContext获取；2)适用于全局状态管理、跨层级通信等场景；3)可与useMemo等Hook结合优化性能。使用时需注意避免过度使用导致渲染性能问题，合理区分全局/局部状态管理。相比props传递和高阶组件，useContext提供了更简洁的数据共享方案，是构建复杂React
2025-07-07 09:38:15
1023
原创 React 性能优化实战：用useTransition解决卡顿问题
useTransition是React提供的Hook，用于优化非紧急UI更新，确保用户交互的即时响应。它在并发模式下工作，将更新标记为低优先级，避免界面卡顿。适用于数据密集型界面、动态内容切换和实时搜索等场景。通过返回的isPending和startTransition，开发者可以控制过渡状态并启动更新。与useDeferredValue不同，useTransition更适合处理包含多个状态变化的复杂更新。结合Suspense使用时，能进一步优化异步数据加载体验。注意需在并发模式下使用，且不适用于实时性要求
2025-07-04 09:49:43
790
原创 React中useCallback的深度解析与性能优化
摘要：React的useCallback钩子用于缓存函数引用，避免不必要的组件重新渲染。文章介绍了其基本语法、常见应用场景（如优化子组件渲染、处理依赖函数引用和高频事件），并对比了useCallback与useMemo的区别。同时指出了使用时的注意事项，包括避免过度使用、正确处理依赖项和循环依赖等问题，最后通过综合示例展示了如何结合React.memo进行性能优化。
2025-07-02 09:00:00
554
原创 深度解析React中useEffect钩子的使用
useEffect用于执行副作用操作，如数据获取、DOM操作、订阅管理和计时器设置。文章详细介绍了依赖项数组的使用方法，包括空数组、包含依赖项和复杂依赖项的处理。同时针对异步操作中的竞态条件和内存泄漏问题提供了解决方案，如使用挂载状态标记来确保组件安全。通过多个代码示例展示了useEffect在实际开发中的最佳实践。
2025-07-01 09:00:00
615
原创 React中useRef钩子的深度解析与实践应用
React的useRef钩子详解：功能与应用指南 useRef是React函数式组件中实现持久化数据存储的重要工具。它创建的可变ref对象在组件生命周期内保持不变，且修改其current属性不会触发重新渲染。
2025-06-30 09:00:00
1057
原创 详解前端console.log自定义打印列表图片和调试
本文全面介绍了JavaScript中Console对象的多样化调试功能。基础部分涵盖debug/log/info等不同级别的信息打印；数据可视化展示了表格形式的数据呈现和分组日志管理；性能调试方面包括计时器、计数器和对象结构分析；错误处理环节讲解堆栈跟踪和断言机制；高级特性包含控制台样式自定义和图片打印技巧。这些方法为开发者提供了从基础调试到复杂性能优化的全套工具，显著提升开发效率。
2025-06-27 09:59:36
1089
原创 Vue项目i18n国际化多语言切换方案实践
本文介绍了在Vue项目中实现国际化的完整流程，主要使用Vue官方推荐的Vue I18n插件。内容包括：1) 插件安装与基础配置，通过JSON语言包实现中英文切换；2) 动态语言切换功能开发；3) 复杂场景应用如动态文本插值和复数处理；4) 优化方案包括语言包按需加载和浏览器语言自动适配。文章还提供了完整的代码示例，帮助开发者快速掌握Vue项目国际化实现方法。
2025-06-26 09:37:54
847
原创 Vue移动端开发的适配方案与性能优化技巧
本文介绍了Vue移动端开发的适配方案与性能优化技巧。主要内容包括：1）视口适配、rem/em和vw/vh单位转换等移动端布局方案；2）虚拟列表、图片懒加载、首屏优化和事件节流等性能优化手段；3）解决移动端300ms点击延迟等常见问题的方案。通过配置PostCSS插件、使用响应式UI组件库以及优化资源加载等方法，可显著提升移动端应用的适配性和性能表现。
2025-06-25 09:08:29
803
原创 深度剖析Vue3响应式原理Proxy
Vue3响应式系统全面升级，采用Proxy替代Vue2的Object.defineProperty，解决了无法检测对象属性增删、数组操作不足等问题。Proxy可拦截13种对象操作，性能更优。Vue3通过effect函数注册副作用函数，建立响应式数据与副作用函数的依赖关系，使用targetMap和activeEffect实现依赖收集与触发更新。reactive和ref分别用于创建对象和基本类型的响应式数据。与Vue2相比，Vue3响应式系统更全面高效，是提升开发体验的重要改进。
2025-06-24 10:28:14
574
原创 基于Vue3+TS的自定义指令开发与业务场景应用
在 Vue3 的开发生态中，自定义指令是一项极为灵活且强大的功能，它允许开发者对 DOM 元素进行底层操作，实现复用性高的特定逻辑。结合 TypeScript（TS）强类型的特性，能让自定义指令的开发更加规范、安全，减少运行时错误。本文将深入讲解基于 Vue3 + TS 的自定义指令开发，并通过实际的业务场景做一些示例。在 Vue3 中，使用app.directive方法来注册自定义指令。结合 TS，我们可以通过定义接口和类型别名来规范指令的参数和钩子函数。
2025-06-23 09:46:11
1188
原创 vue3监听属性watch和watchEffect的详解
本文介绍了Vue3中watch函数的使用方法和常见应用场景。主要内容包括：1) watch的基础用法，通过监听ref数据响应变化并执行回调；2) 深度监听对象属性和路由变化的方法，强调需要配置deep参数；3) 典型应用场景展示，如表单即时验证、搜索联想功能优化（加入防抖处理）和数据联动计算等。Vue3的watch相比Vue2更加灵活，支持多种数据源监听，并可通过配置选项实现深度监听、立即执行等功能，在数据响应处理中发挥重要作用。
2025-06-20 09:49:04
1895
原创 详解vue渲染函数render的使用
Vue的渲染函数(render)提供了比模板更灵活的编程能力，允许直接生成虚拟DOM。文章通过标题组件对比了模板和render函数的写法差异，详细介绍了createElement函数的三个参数：标签名/组件、属性对象、子节点。重点解析了第二个参数(Option数据对象)的配置项，包括class/style绑定、事件监听、指令等。同时说明了常见指令在render函数中的变化：v-if转为条件判断、v-model需手动实现双向绑定、事件修饰符使用特定前缀处理。render函数更适合需要完全JavaScript编
2025-06-19 10:07:10
1263
原创 详解React组件状态管理useState
React的useState Hook是函数式组件状态管理的核心工具，它取代了类组件中的this.state，提供更简洁的语法。基本用法为const [state, setState] = useState(initialState)，支持直接更新和基于前值的函数式更新。特别在处理对象/数组时应创建新引用以确保重新渲染。常见应用包括表单处理、布尔状态切换等场景。其底层原理与React的Fiber架构和状态链表机制相关，通过异步批量更新优化性能。面试关注点包括状态隔离性、函数式更新必要性等。掌握useStat
2025-06-18 09:37:04
1024
原创 使用PWA 将网页变为桌面应用保姆级教程
本文介绍了渐进式网络应用(PWA)的核心特性及其配置方法。首先阐述了PWA的六大特点：渐进增强、响应式布局、离线访问、推送通知、安装性和链接分享。随后详细说明了配置过程
2025-06-17 09:44:49
1264
原创 详解vue中attrs和listeners的使用及高级组件封装
Vue中$attrs和$listeners是组件通信的重要工具，$attrs收集父组件传递的非prop属性，$listeners包含父组件的非.native事件监听器。通过v-bind="$attrs"和v-on="$listeners"可实现属性与事件的透传，特别适用于多层嵌套组件封装。文中通过复选框组件示例展示了二者配合使用的方法，并指出Vue 3中$listeners已被合并到$attrs中。这些特性在组件库开发和高阶组件封装中非常实用。
2025-06-16 09:41:15
1075
原创 vue的实用且常用的各种api
本文总结了Vue.js开发中的核心API使用指南，包括：1）实例配置方法如关闭日志、调试工具设置；2）组件获取方式如$root、$parent等；3）响应式数据操作$set/$delete；4）生命周期钩子函数；5）自定义事件处理$emit/$on；6）路由相关操作；7）其他实用API如混入、指令、过滤器等。全文以代码示例为主，系统梳理了Vue开发中的关键知识点，适合作为速查手册使用。
2025-06-12 10:34:34
992
原创 深入解析vue的transition过渡动画使用和优化
本文详细介绍了Vue内置的<transition>组件，该组件用于实现元素进入/离开DOM时的过渡效果。主要内容包括：1) 基础属性配置（name、mode、duration等）；2) 过渡事件钩子；3) 实现原理（通过添加/移除类名触发CSS过渡）；4) 常见应用场景（列表、模态框等）；5) 实用技巧（自定义过渡类和JavaScript钩子）；6) 性能优化建议（优先使用transform/opacity）。文章还提供了代码示例和注意事项，帮助开发者更好地使用该组件实现平滑的过渡效果。
2025-06-11 11:20:27
1257
原创 vue过滤器filter的详解及和computed的区别
本文详细介绍了Vue过滤器(filter)的使用方法，包括局部过滤器和全局过滤器的定义与注册，以及如何传递参数和串联使用过滤器。过滤器主要用于文本格式化或数组数据处理，不改变原始数据，通过管道符(|)调用。文章还对比了filter与computed的区别，并列举了常见的使用场景如状态转换、数字/日期格式化等。最后提供了作者往期技术文章的链接，涵盖Vue、Flutter、CSS等多个前端开发领域的技术分享。
2025-06-10 09:41:39
1110
原创 深入解析vue的keep-alive缓存机制
Vue的keep-alive组件是一个内置的抽象缓存容器，能够保留包裹组件的状态，避免重复渲染。它通过activated和deactivated钩子管理组件生命周期，支持include/exclude属性精准控制缓存范围，以及max属性限制缓存数量。常见应用场景包括路由状态持久化和动态组件切换。底层通过cache对象存储组件实例，采用LRU策略淘汰缓存。最佳实践包括结合路由元信息动态管理缓存、避免过度缓存以及在activated钩子处理数据刷新。注意需为组件设置name属性，且缓存组件不会触发mounted
2025-06-09 10:03:40
1257
原创 前端项目eslint配置选项详细解析
ESLint是一个可配置的JavaScript代码检查工具，主要用于发现和修复代码问题。其核心功能包括静态代码分析、自动修复和可配置规则，能帮助统一代码规范，提高可维护性。错误级别分为关闭(0)、警告(1)和错误(2)。常用规则涵盖逻辑错误预防、最佳实践、变量声明、CommonJS和代码风格等方面，如禁止console使用、强制===操作符、变量命名规范等。这些规则可通过配置文件灵活调整，适合团队协作和CI/CD集成，有效提升代码质量。
2025-06-06 10:26:56
434
原创 vue中ref的详解以及react的ref对比
Vue中的ref详解：用法、特性与最佳实践 ref是Vue中用于获取DOM元素或组件实例的特殊属性，通过$refs对象访问。文章详细介绍了ref的基本用法、非响应式特性、延迟更新特点，以及在DOM操作、组件通信中的使用场景。特别强调了在v-for循环、函数式组件和组合式API中的特殊用法，并与React的ref机制进行了对比比较。文章还提供了动态ref管理和$nextTick等实用技巧，最后总结了ref的最佳使用实践，即优先采用数据绑定，仅在必要场景下使用ref进行直接操作。
2025-06-05 10:10:22
794
原创 vue异步更新nextTick的详解
nextTick是Vue中用于在DOM更新后执行回调的API，其语法支持回调函数和Promise两种形式。主要使用场景包括：数据变化后获取最新DOM、在created生命周期操作DOM等。其实现原理基于JS事件循环机制，Vue会将回调函数推入队列，根据环境优先选择微任务（如Promise.then）执行。通过异步更新策略，Vue优化了DOM更新性能，确保在数据变化后能准确获取更新后的DOM结构。文章还通过实例展示了如何利用nextTick获取动态生成的DOM节点。
2025-06-04 09:49:25
1020
原创 vue混入mixins详解和生命周期影响
Vue.js中的mixins（混入）是一种提高代码复用的重要机制。本文介绍了mixins的基本概念和使用场景，包括局部混入和全局混入的实现方法，并演示了如何定义和使用混入对象。同时详细讲解了混入后组件生命周期的执行顺序，指出当混入与组件存在同名方法时，组件的方法会覆盖混入的方法。文章还提供了代码示例展示混入对象与组件的合并过程，帮助开发者理解如何利用mixins来减少重复代码并扩展组件功能。
2025-06-03 09:56:09
817
原创 vue的监听属性watch的详解
watch 是一个对象，键是需要观察的表达式，用于观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数的参数是新值和旧值。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。
2025-05-30 09:08:25
1713
原创 vue计算属性computed的详解
计算属性必须返回一个值，值的结果会被缓存，除非依赖的响应式 property 变化才会重新计算，如果某个依赖在该实例范畴之外，则计算属性是不会被更新的。
2025-05-29 10:11:45
2402
js前端浏览器打开本地exe程序的demo
2020-10-16
前端层级拖拽文件夹组件（Vue3+elementPlus的Tree组件实现）
2024-01-05
js前端Web Woeker和Shared Worker使用案例demo
2023-11-02
js前端jsPlumb插件使用案例demo（流程图效果）
2019-10-20
js前端实现的组合快捷键demo（类似QQ截图快捷键等）
2020-09-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人