- 博客(32)
- 收藏
- 关注
RSS订阅原创 前端性能优化：HMR热更新和预获取加载
预获取（Prefetch）是一种性能优化技术，允许浏览器在空闲时提前加载后续页面或功能所需的资源（如 JavaScript 文件）。通过预获取，可以减少用户后续操作的等待时间，提升用户体验。动态导入是 ES6 提供的一种语法，允许在运行时异步加载模块。它返回一个Promise，当模块加载完成后，Promise会被解析为模块对象。热模块替换（Hot Module Replacement，HMR）是一种开发工具功能，允许在代码修改后，只替换发生变化的模块，而无需刷新整个页面。
2025-01-24 12:51:55
2127
原创 React 路由导航与传参详解
通过，我们可以轻松实现 React 应用中的路由导航、传参以及嵌套路由。<Link>和提供了灵活的导航方式，而和useParams则帮助我们处理路由传参。<Outlet />组件为嵌套路由提供了便捷的占位符功能。此外，通过redirect参数，我们可以在用户登录后将其重定向回原本想要访问的页面，从而提升用户体验。掌握这些工具和技巧，能够帮助我们构建更加复杂和高效的单页面应用。
2025-01-23 21:16:58
2489
原创 前端开发中的状态管理与网络请求封装
通过对比Vuex和Pinia，我们可以看到Pinia在Vue3中更加简洁和高效。封装Axios可以帮助我们统一处理网络请求，提高代码的可维护性。
2025-01-19 23:11:09
940
原创 前端开发中的模拟后端与MVVM架构实践[特殊字符][特殊字符][特殊字符]
Vue2：在data()中定义数据。Vue3：使用ref和reactive定义数据。通过插件，我们可以轻松模拟后端接口，加快前端开发进度。MVVM架构帮助我们更好地组织代码，降低耦合度，提高代码的可维护性。Vue3带来了许多新特性，如Proxy双向绑定、组合式API等，使得开发更加高效。动态路由和登录鉴权是后台管理系统中常见的需求，合理处理这些问题可以提升用户体验和系统安全性。
2025-01-19 23:04:01
1377
1
原创 React 表单处理与网络请求封装详解[特殊字符][特殊字符]
FormItem绑定name属性：确保与后端字段名一致，方便数据映射。表单校验与失焦校验：通过rules和实现灵活的校验逻辑。获取表单数据：使用onFinish回调函数获取校验通过的表单数据。封装请求模块：通过axios封装通用的request模块，统一管理网络请求，提升代码复用性和可维护性。通过以上方法，可以高效地处理React中的表单和网络请求，提升开发效率和代码质量。
2025-01-17 23:37:49
931
1
原创 vite工程化
HMR是一种开发技术，允许在应用程序运行时替换、添加或删除模块，而无需完全重新加载页面。Vite的HMR基于原生ES模块，这意味着当代码发生变化时，Vite只会重新加载和替换发生变化的模块，而不是整个应用。这大大加快了开发过程中的反馈速度。ES模块（ECMAScriptModules）：ES模块是JavaScript的官方标准模块系统，允许开发者将代码拆分为多个模块，并通过import和export语句进行模块间的依赖管理。
2025-01-17 23:24:55
496
原创 别的可以不聊，但面试必考的PWA与AMP得聊聊
回答思路：示例答案：PWA（Progressive Web App，渐进式网页应用）是一种通过现代 Web 技术提供类似原生应用体验的网页应用。它的核心特性包括：回答思路：示例答案：PWA 的离线功能主要通过 Service Worker 实现。Service Worker 是一个运行在浏览器后台的脚本，它可以拦截网络请求并缓存资源。具体实现步骤如下：注册 Service Worker：编写 Service Worker：在 中定义缓存策略。例如：3. Service Worker 的
2025-01-15 16:42:52
1013
原创 你可能不知道的 @ 配置路径的使用指南
@ 是路径别名，通常指向项目的根目录（如 src）。- 优点：代码更简洁、路径更直观、减少错误、方便重构。- 配置方法：在 Vite、Webpack 或 TypeScript 中配置路径别名即可。使用 @ 路径别名可以让你的项目代码更优雅、更易维护，是现代前端开发中的一种最佳实践！
2025-01-10 10:39:29
953
原创 你可能不清楚的Vuex状态管理
Vuex 是 Vue 的官方状态管理工具，适用于中大型应用。- 核心概念包括 State、Getters、Mutations 和 Actions。- 通过集中管理状态，Vuex 解决了组件间数据传递和共享的问题。- 对于小型应用或简单场景，可以使用 Composition API 或 Pinia 等替代方案。掌握 Vuex 的使用，可以帮助你更好地组织和管理 Vue 应用的状态，提升开发效率和代码质量。
2025-01-09 23:40:01
1066
原创 configureStore：Redux Toolkit 的核心
configureStore：Redux Toolkit 的核心，帮我们自动配置 Redux 的常用功能。- 异步操作：通过 Thunk 和 async/await，轻松处理网络请求和状态更新。- useDispatch：在组件中分发 action，自动获取 dispatch 方法，简化代码。Redux Toolkit 的这些特性，让状态管理变得像日常生活中的小事一样简单。你只需要专注于业务逻辑，剩下的交给它来处理就好啦！
2025-01-08 23:36:57
556
原创 React18实现账单管理项目（三）：日期分组与图标适配
从数据组织到UI交互，再到图表展示，每一个环节都经过精心设计，旨在为用户提供最佳的使用体验。最后，为了使我们的应用能够支持多种类型的图表展示，我们决定封装一个通用的图表组件。最终，我们将结果构造成一个新的对象数组，其中每个对象都包含一个日期和该日期下的所有账单。）来控制元素的显示与隐藏，并且通过CSS类名的变化来改变箭头图标的朝向，给用户提供视觉反馈。实现了账单详情的展开/收起功能——用户可以通过点击来切换账单详情的可见性。，我们可以创建一个映射，将每种类型的账单与其对应的中文名称关联起来。
2025-01-07 10:38:14
462
2
原创 一文理解Vue.js 与 Vue Router：构建现代单页面应用
今天来讲讲Vue.js 里面的路由导航。本文将深入讲解 Vue.js 的核心概念，并结合 Vue Router 展示如何创建一个交互式的、多视图的 SPA。Vue.js 是一个用于构建用户界面的渐进式框架。Vue Router 作为官方推荐的路由管理器，使得基于 Vue 的单页面应用程序（SPA）的开发变得更加简单和直观。
2025-01-04 13:23:53
1012
原创 React18路由和Vue3路由进行对比
虽然 React 18 和 Vue 3 的路由系统都提供了强大的功能，但两者在实现上有一些细节上的差异，尤其是在路由配置、导航方式、路由参数的获取以及嵌套路由的实现上。路由实例的创建方式：React 使用或，Vue 使用。路由导航：React 使用hook，而 Vue 使用。参数获取：React 使用useParams和，Vue 使用和。嵌套路由：两者的配置方式相似，均通过children数组进行配置。这样我们可以看出，React 18和Vue 3 还是有很多相似处的，只是语法用法上不同。
2025-01-03 08:28:57
1054
原创 吴恩达系列——微调（Fine-tuning）与生成模型的应用
微调（Fine-tuning）是指在已有预训练模型的基础上，对模型进行进一步训练，以适应特定任务或需求。在自然语言处理领域，生成模型通过微调可以在特定场景下生成更加准确、一致的输出，同时保护用户的隐私，减少不当信息的泄露。本文将结合生成模型的工作原理和实际应用，解释微调如何提升生成模型的效果，并探讨其在保护隐私方面的优势。
2025-01-01 09:49:30
1171
1
原创 “媒婆”和“反映人”：Reflect 和Proxy
Reflect提供了对对象的更简洁、更一致的操作方式，特别是和Proxy配合时，它让代码更加可读和易于管理。Proxy允许你在对象的行为上添加拦截器，使得你可以自定义对象的操作。通过使用Reflect，你可以确保在拦截操作中，原本的行为能按预期执行，同时可以添加自定义功能。
2024-12-31 19:33:36
352
2
原创 数据驱动的界面与双向绑定：Vue 2 与 Vue 3 的演变
通过Vue，开发者可以轻松实现数据和视图之间的同步更新，确保应用状态的一致性。本文将深入探讨Vue中的双向绑定概念，并对比Vue 2与Vue 3在这方面的差异。
2024-12-28 10:14:58
1107
原创 Node.js 记账本项目总结
在使用Node.js结合Express框架构建记账本的过程中，遇到了一些常见的问题，这些问题主要集中在路径处理、包管理工具的选择、开发环境优化以及HTTP响应处理等方面。
2024-12-27 17:04:18
744
原创 接口管理Apifox工具为什么这么好用
Apifox 是接口管理、开发、测试全流程集成工具，定位 Postman + Swagger + Mock + JMeter。通过一套系统、一份数据，解决多个系统之间的数据同步问题。只要定义好接口文档，接口调试、数据 Mock、接口测试就可以直接使用，无需再次定义；接口文档和接口开发调试使用同一个工具，接口调试完成后即可保证和接口文档定义完全一致。高效、及时、准确！
2024-12-27 16:51:27
642
原创 React 基本操作~~
虚拟DOM是真实DOM的一个轻量级副本，它存在于内存中，允许React高效地计算并最小化实际DOM更新。每当状态改变时，React会比较新的虚拟DOM树与旧的版本，找出差异，然后只对实际DOM进行必要的更新。例如，数字可以直接用作样式属性值，字符串需要被引号包裹，而布尔值则可以用来控制属性的存在与否。相反，通过类名应用样式通常是更好的选择，
2024-12-22 23:33:31
363
原创 Python贪心：746. 使用最小花费爬楼梯
看一下递归公式，dp[i]由dp[i - 1]，dp[i - 2]推出，既然初始化所有的dp[i]是不可能的，那么只初始化dp[0]和dp[1]就够了，其他的最终都是dp[0]dp[1]推出。因为是模拟台阶，而且dp[i]由dp[i-1]dp[i-2]推出，所以是从前到后遍历cost数组就可以了。dp[i - 1] 跳到 dp[i] 需要花费 dp[i - 1] + cost[i - 1]。
2024-12-22 23:20:34
840
原创 Ajax里面的query
在使用AJAX时，你可以通过JavaScript动态地创建一个HTTP请求，并将查询字符串作为请求的一部分发送给服务器。对于POST请求，你可以直接在请求体中发送数据，而不必使用查询字符串。URL的一部分，位于问号（?）之后，并且包含了键值对的形式来传递参数给服务器。通常指的是发送到服务器的查询字符串（query string）。如果你使用的是现代的JavaScript和。内容类型时，这是推荐的方式，因为它会正确地编码参数。对象被用来构建查询字符串或请求体的内容。默认的表单编码类型，当浏览器提交HTML。
2024-12-20 23:58:16
379
原创 JavaScript进行数组相等判断
在使用 includes、indexOf 等方法时，要注意这些方法对于非基本类型（如对象、数组）的比较是基于引用的，而不是基于内容的。
2024-12-19 23:54:46
732
1
原创 React 与Vue3 初体验区别
React 使用函数组件（Functional Components）或类组件（Class Components）。函数组件是推荐的方式，特别是结合 Hooks 使用时。return (// 导出两个组件// 多个使用useState钩子函数， 是函数组件中添加状态的钩子函数（函数组件是return返回html格式的函数）。useState钩子很好的创建和管理组件状态，不需要直接dom操作，这时候react自动处理动漫更新声明状态变量count。
2024-12-19 23:52:22
2316
2
原创 你了解多少JavaScript 类型转换？来看看这篇文章你是否另有收获
在 ES6 之前，JavaScript 拥有六种基本数据类型（Primitive Types）和一种复杂数据类型（Complex Type）。这些类型是构建 JavaScript 应用程序的基础。1.1 简单数据类型 (Primitive)简单数据类型包括 number、string、boolean、null、undefined 和 symbol。它们都是按值传递的，意味着当你将一个原始类型的值赋给另一个变量时，实际上是拷贝式赋值复制了这个值。因此，对新变量的操作不会影响原变量。
2024-12-16 23:47:29
971
原创 前端工程化初期：一篇文章讲好 node.js里面 path和fs文件读写
Node.js 提供了许多内置模块，如 fs 和 path，帮助我们进行文件系统操作和路径处理。在前端开发中，工程化帮助我们更好地管理和组织代码，提高开发效率和代码质量。工程化包括多个方面，如代码压缩、打包、脚手架工具、格式化和转换工具等。
2024-12-16 15:28:38
522
原创 响应式设计：适配所有屏幕
你是否想过，每台设备屏幕大小不一样，设计师是需要设计多少份设计稿，才能让程序员进行页面设计呀？其实不是，设计稿就一份，只是程序员使用相对像素进行设计页面的。可能对"相对rem"有点陌生，下面就给大家讲讲——程序员“高光适配屏幕时刻”
2024-12-12 17:48:39
1116
原创 CommonJS 与 ES6 模块：Node.js 中的模块化艺术
Node.js 支持两种主流的模块系统：CommonJS 和 ES 模块（ESM）。这两种方式各有千秋，适用于不同的场景和开发需求。下面让我们分别来看看两种模块化的区别和适用性~~
2024-12-11 13:07:27
520
原创 面试官这么喜欢问this、apply、call、bind 呀！？
JavaScript是一种动态类型语言，它允许隐式类型转换，即当运算符对不同类型的值进行操作时，JavaScript会自动尝试将这些值转换为适合运算的类型。
2024-12-11 12:44:14
811
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人