- 博客(48)
- 收藏
- 关注
RSS订阅原创 ACM算法
在ACM编程竞赛或在线判题系统(如LeetCode、牛客网等)中，JavaScript/TypeScript需要特定的方式来获取输入值。
2025-05-14 21:38:55
235
原创 Preview 插件
3. **智能代码折叠**：自动折叠import等非核心代码，提升可读性"1. **双向绑定调试**：修改props实时反馈，同时生成对应代码示例。1. **代码净化**：移除危险API调用（如fetch、eval）2. **安全沙箱**：通过iframe隔离执行环境，防止恶意代码。2. **沙箱隔离**：iframe + sandbox属性限制。2. **新人 onboarding**：交互式学习组件API。/* 重置继承样式 */3. **API 设计反馈**：通过使用数据优化组件设计。
2025-05-14 10:50:27
528
原创 Eslint和perrier的作用
'@typescript-eslint/no-unnecessary-type-assertion': 'error' // 避免冗余类型断言。'@typescript-eslint/consistent-type-imports': 'error', // 强制类型导入风格。ignorePatterns: ['**/dist/**', '**/node_modules/**'], // 忽略目录。'react-hooks/rules-of-hooks': 'error', // 必须遵守hooks规则。
2025-05-14 09:17:09
606
原创 asadfdsadsad
好的，以下是一个关于如何通过重构 Webpack 构建策略来优化性能的示例。这个过程包括分析现有构建策略的问题、优化策略的制定以及具体的代码实现。
2025-05-13 15:51:12
681
原创 webpack重构优化
在参与公司的性能专项优化过程中，我发现现有的 Webpack 构建策略存在一些问题，例如构建速度慢、打包体积大、代码分割不合理等。- 使用 `HardSourceWebpackPlugin`，Webpack 会缓存构建结果，减少重复构建的时间，特别是在大型项目中效果显著。- 使用动态导入（`React.lazy` 和 `Suspense`），将 `LazyComponent` 按需加载，减少初始加载体积。- **用户体验改善**：按需加载的代码分割策略显著减少了初始加载时间，提升了用户体验。
2025-05-13 13:01:06
904
原创 Ref是什么
createRef` 返回一个引用对象，其 `.current` 属性被初始化为 `null`。- **不要在函数式组件中使用字符串 `ref`**：在 React 16.3 之后，字符串 `ref` 已被废弃，应使用 `useRef` 或 `createRef`。- **`ref` 的值**：`ref` 的值在组件挂载后才会被赋值，因此在组件挂载之前访问 `ref` 的值可能会导致 `null`。- **避免过度使用 `ref`**：`ref` 是一种强大的工具，但应谨慎使用。
2025-05-12 17:32:30
432
原创 Fiber
Fiber 是 React 16 引入的一种新的数据结构和渲染机制，用于实现可中断的渲染过程，提高 React 应用的响应性和性能。React 使用任务队列来管理 Fiber 节点。- **提高响应性**：通过可中断的渲染机制，React 可以在渲染过程中处理更高优先级的任务，提高应用的响应性。- **更好的性能**：通过增量渲染，React 可以逐步完成渲染任务，减少主线程的阻塞时间，提高应用的性能。- **任务队列的管理**：React 使用任务队列来管理 Fiber 节点，确保任务的有序执行。
2025-05-12 17:22:44
304
原创 浏览器url解析
这些步骤共同确保了网页能够高效、准确地加载和显示。3. **本地 hosts 文件**：操作系统会检查本地的 `hosts` 文件（如 `/etc/hosts` 或 `C:\Windows\System32\drivers\etc\hosts`），看看是否有该域名的映射。2. **ACK**：服务器收到 `FIN` 请求后，回复一个 `ACK`（确认）响应，表示服务器已收到关闭连接的请求。4. **ACK**：浏览器收到服务器的 `FIN` 请求后，回复一个 `ACK` 响应，确认连接已关闭。
2025-05-12 15:43:00
417
原创 js事件循环机制
事件循环是 JavaScript 实现异步编程的核心机制，它使得单线程的 JavaScript 能够处理非阻塞 I/O 操作。下面我将从基础概念到实际运行过程全面讲解。
2025-05-11 15:59:44
469
原创 多包管理工具
公共库组件的特征之一就是代码复用率很高，改其中一部分代码，大部分组件就都需要更新一遍依赖，所以如何快速更新依赖、添加版本号、发布组件、上传组件代码就成了一个问题。这里我使用了bolt来批量管理组件的迭代。
2025-03-19 16:02:47
316
原创 事件动态挂载到组件上
如果你需要在组件挂载后动态绑定事件（例如绑定到原生 DOM 元素），可以使用 `useEffect`。- 如果需要绑定到原生 DOM 元素，可以使用 `useRef` 和 `useEffect`。你可以将事件处理函数存储在一个对象中，然后通过遍历对象动态绑定事件。### 4. **使用 `useEffect` 动态绑定事件**### 3. **通过 `props` 动态传递事件**### 1. **使用对象存储事件处理函数**### 2. **动态生成事件处理函数**### 5. **动态事件名称**
2025-03-05 11:10:57
410
原创 React事件动态挂在到组件上
如果需要简单绑定多个事件，可以使用对象展开语法（如果需要动态生成事件处理函数，可以在组件内部定义逻辑。如果需要绑定到原生 DOM 元素，可以使用useRef和useEffect。这些方法都可以帮助你灵活地处理事件绑定问题。
2025-03-05 11:01:38
564
原创 前后端对接
前端与后端的对接主要依赖接口，通过 HTTP 请求（如 GET、POST）进行数据交互。清晰的接口文档。统一的请求和返回格式（通常是 JSON）。处理跨域、认证、错误等问题。使用工具进行联调和测试。通过良好的协作和规范，可以确保前后端高效对接。
2025-03-04 16:50:49
1627
原创 前后端对接
前端与后端的对接主要依赖接口，通过 HTTP 请求（如 GET、POST）进行数据交互。清晰的接口文档。统一的请求和返回格式（通常是 JSON）。处理跨域、认证、错误等问题。使用工具进行联调和测试。通过良好的协作和规范，可以确保前后端高效对接。
2025-02-21 10:02:55
4288
原创 部署前端项目2
前端项目的部署方式多种多样，可以根据项目需求和团队技术栈选择合适的方案。常见的部署方式包括静态文件托管、云服务器部署、Docker 部署和 CDN 加速。结合 CI/CD 工具可以实现自动化部署，提高效率。
2025-02-19 10:26:47
484
原创 部署前端项目
常见的前端项目依赖包括框架（如React、Vue、Angular）、库（如webpack、Babel、ESLint等）。通过以上步骤，开发者可以顺利地将前端项目部署到各种平台，并确保项目的稳定运行和高质量用户体验。构建项目是将源代码转换为生产可用的文件（如HTML、CSS、JavaScript等）的过程，通常使用构建工具来完成。：创建一个构建配置文件（如webpack.config.js），定义项目的入口文件和输出文件等。：在项目根目录下运行命令构建项目。：根据项目的需求和特点，选择合适的部署平台。
2025-02-19 10:23:40
779
原创 对象的操作
前端开发中，熟练掌握 JavaScript 内置对象及其方法可以大大提高开发效率。结合现代 JavaScript 特性（如解构、箭头函数、async/await 等），可以编写更简洁、高效的代码。
2025-02-19 10:08:56
327
原创 HTTP状态码
HTTP 状态码是客户端与服务器通信的重要工具，能够清晰地表达请求的处理结果。开发时应根据业务场景选择合适的状态码，并结合响应体提供详细的错误信息，以便客户端正确处理。
2025-02-19 10:04:52
418
原创 什么是Ajax
AJAX（Asynchronous JavaScript and XML）是一种用于创建异步 Web 应用程序的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换并更新部分页面内容。AJAX 的核心是通过 JavaScript 发送 HTTP 请求，并在后台与服务器通信，然后根据服务器的响应动态更新页面。AJAX 允许网页在不重新加载的情况下与服务器通信，提升用户体验。通过或fetchAPI，可以轻松实现异步数据请求和页面更新。
2025-02-19 09:58:43
630
原创 Webpack，Vite打包的理解
Webpack：功能强大，适合复杂项目，但配置复杂，打包速度较慢。Vite：开发体验优秀，配置简单，适合现代前端项目，但对旧版浏览器支持有限。选择 Webpack 还是 Vite 取决于项目需求、团队熟悉度和浏览器兼容性要求。
2025-02-18 15:40:40
751
原创 Promise异步编程
是 JavaScript 中用于处理异步操作的一种机制，它解决了传统回调函数嵌套（回调地狱）的问题，使异步代码更易于编写和维护。
2025-02-18 13:24:50
733
原创 es6新特性
ES6 引入了许多强大的特性，使得 JavaScript 更加现代化和高效。掌握这些特性可以显著提升开发效率和代码质量。建议在实际项目中逐步应用这些特性，以加深理解。
2025-02-18 13:21:05
440
原创 宏任务和微任务
在前端开发中，**宏任务（Macro Task）**和**微任务（Micro Task）**是 JavaScript 事件循环（Event Loop）中的两个重要概念。它们决定了异步代码的执行顺序。---### 1. **事件循环（Event Loop）**JavaScript 是单线程的，通过事件循环机制处理异步任务。事件循环的核心是：- **主线程**：执行同步代码。- **任务队列**：存放异步任务的回调函数。- **事件循环**：不断检查任务队列，将任务推入主线程执行。任务队列分为两种：-
2025-02-16 20:26:27
455
原创 React常用库
官网: https://testing-library.com/docs/react-testing-library/intro/官网: https://github.com/atlassian/react-beautiful-dnd/官网: https://formidable.com/open-source/victory/官网: https://react-dnd.github.io/react-dnd/官网: https://formatjs.io/docs/react-intl/
2025-02-16 20:16:25
766
原创 异步是什么
异步（Asynchronous）是与同步（Synchronous）相对的一个概念。在计算机编程中，同步操作意味着任务按照代码的顺序依次执行，而异步操作则允许任务在后台执行，不会阻塞主线程，从而允许程序在等待异步任务完成的同时继续执行其他任务。异步操作的本质是将耗时的任务交给其他线程或线程池来处理，当前线程在等待结果时不会被阻塞，可以继续处理其他任务。当异步任务完成时，通常会通过回调函数、Promise、Async/Await等方式通知主线程或处理结果。
2025-02-14 16:08:34
430
原创 输入url按下回车后发生了什么
需要注意的是，以上步骤是一个典型的过程描述，实际过程中可能会因浏览器实现、网络状况、服务器配置等因素而有所不同。此外，随着技术的不断发展，新的标准和特性可能会被引入，从而影响这一过程的具体实现。在前端浏览器中输入URL并按下回车后，会触发一系列复杂的过程来加载和显示所请求的网页。
2025-02-13 13:56:43
401
原创 React常用hooks
React 中的 Hooks 是一系列函数，它们可以让你在函数组件中使用 state 和其他 React 特性。Hooks 的引入使得函数组件更加灵活和强大，不再局限于无状态组件。这些 Hooks 提供了在函数组件中管理 state、执行副作用、访问上下文、优化性能以及创建可重用逻辑的能力。通过组合这些 Hooks，你可以构建出复杂且高效的 React 应用。
2025-02-13 13:54:45
259
原创 对This的理解
的工作机制是掌握 JavaScript 的关键之一，因为它涉及到对象、函数和原型继承等多个核心概念。的值取决于函数是如何被调用的，而不是函数被定义的位置。这意味着同一个函数在不同的调用环境中可能会有不同的。，因此它们通常不适合用作对象的方法，除非你已经有了特定的上下文绑定需求。是一个非常重要的关键字，它代表当前执行上下文中的一个特殊对象。：当函数不作为对象的方法被调用时（即独立调用），在非严格模式下，在浏览器环境中，全局对象是。时，它引用的是定义箭头函数时的上下文中的。：当函数作为对象的一个方法被调用时，
2025-02-13 13:26:34
153
原创 JS（1）
基本数据类型：、、 、、、、利用 来实现换行；基本数据类型：typeof复杂数据类型：inctanceof还可以toString：1. 闭包是什么 闭包是一个函数加上到创建函数的作用域的连接，闭包“关闭”了函数的自由变量。2. 闭包可以解决什么问题【闭包的优点】 2.1 内部函数可以访问到外部函数的局部变量 2.2 闭包可以解决的问题 var lis = document.getElementsByTa
2024-12-26 09:31:12
355
原创 CSS（2）
原理：将多个小图像（如图标、装饰性图像等）合并成一个较大的图像文件。优势减少HTTP请求减轻服务器负载，提高缓存效率简化维护ie低于版本8的浏览器的盒子模型中的width包括内边距和边框;1）有两种， IE 盒子模型、W3C 盒子模型；2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；3）区 别： IE的content部分把 border 和 pading计算了进去;外边距重叠就是margin-collapse。
2024-12-12 21:42:43
822
原创 CSS布局
如果脱离文档流，那么文档原本占据文档流的位置会被它后面的元素填补。响应式设计简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
2024-12-12 19:54:50
646
原创 CSS属性
伪元素以双冒号（::）开头（在CSS3及更高版本中，但CSS2及更早版本使用单冒号），例如::before、::after等。伪元素的主要作用是允许你在已选择的元素内部创建或修改内容，而无需在文档结构中添加额外的HTML元素。伪类的主要作用是选择已有文档中的元素的特定状态，并为其应用相应的样式。浮动元素：浮动元素会脱离正常的文档流，向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。当浮动元素的高度发生变化时，需要手动更新父元素的高度，增加了维护成本。为浮动元素的父元素设置。
2024-12-12 18:50:19
943
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人