- 博客(38)
- 收藏
- 关注
RSS订阅原创 多包管理工具
公共库组件的特征之一就是代码复用率很高，改其中一部分代码，大部分组件就都需要更新一遍依赖，所以如何快速更新依赖、添加版本号、发布组件、上传组件代码就成了一个问题。这里我使用了bolt来批量管理组件的迭代。
2025-03-19 16:02:47
299
原创 事件动态挂载到组件上
如果你需要在组件挂载后动态绑定事件（例如绑定到原生 DOM 元素），可以使用 `useEffect`。- 如果需要绑定到原生 DOM 元素，可以使用 `useRef` 和 `useEffect`。你可以将事件处理函数存储在一个对象中，然后通过遍历对象动态绑定事件。### 4. **使用 `useEffect` 动态绑定事件**### 3. **通过 `props` 动态传递事件**### 1. **使用对象存储事件处理函数**### 2. **动态生成事件处理函数**### 5. **动态事件名称**
2025-03-05 11:10:57
399
原创 React事件动态挂在到组件上
如果需要简单绑定多个事件，可以使用对象展开语法（如果需要动态生成事件处理函数，可以在组件内部定义逻辑。如果需要绑定到原生 DOM 元素，可以使用useRef和useEffect。这些方法都可以帮助你灵活地处理事件绑定问题。
2025-03-05 11:01:38
538
原创 前后端对接
前端与后端的对接主要依赖接口，通过 HTTP 请求（如 GET、POST）进行数据交互。清晰的接口文档。统一的请求和返回格式（通常是 JSON）。处理跨域、认证、错误等问题。使用工具进行联调和测试。通过良好的协作和规范，可以确保前后端高效对接。
2025-03-04 16:50:49
1090
原创 前后端对接
前端与后端的对接主要依赖接口，通过 HTTP 请求（如 GET、POST）进行数据交互。清晰的接口文档。统一的请求和返回格式（通常是 JSON）。处理跨域、认证、错误等问题。使用工具进行联调和测试。通过良好的协作和规范，可以确保前后端高效对接。
2025-02-21 10:02:55
1696
原创 部署前端项目2
前端项目的部署方式多种多样，可以根据项目需求和团队技术栈选择合适的方案。常见的部署方式包括静态文件托管、云服务器部署、Docker 部署和 CDN 加速。结合 CI/CD 工具可以实现自动化部署，提高效率。
2025-02-19 10:26:47
466
原创 部署前端项目
常见的前端项目依赖包括框架（如React、Vue、Angular）、库（如webpack、Babel、ESLint等）。通过以上步骤，开发者可以顺利地将前端项目部署到各种平台，并确保项目的稳定运行和高质量用户体验。构建项目是将源代码转换为生产可用的文件（如HTML、CSS、JavaScript等）的过程，通常使用构建工具来完成。：创建一个构建配置文件（如webpack.config.js），定义项目的入口文件和输出文件等。：在项目根目录下运行命令构建项目。：根据项目的需求和特点，选择合适的部署平台。
2025-02-19 10:23:40
744
原创 对象的操作
前端开发中，熟练掌握 JavaScript 内置对象及其方法可以大大提高开发效率。结合现代 JavaScript 特性（如解构、箭头函数、async/await 等），可以编写更简洁、高效的代码。
2025-02-19 10:08:56
307
原创 HTTP状态码
HTTP 状态码是客户端与服务器通信的重要工具，能够清晰地表达请求的处理结果。开发时应根据业务场景选择合适的状态码，并结合响应体提供详细的错误信息，以便客户端正确处理。
2025-02-19 10:04:52
408
原创 什么是Ajax
AJAX（Asynchronous JavaScript and XML）是一种用于创建异步 Web 应用程序的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换并更新部分页面内容。AJAX 的核心是通过 JavaScript 发送 HTTP 请求，并在后台与服务器通信，然后根据服务器的响应动态更新页面。AJAX 允许网页在不重新加载的情况下与服务器通信，提升用户体验。通过或fetchAPI，可以轻松实现异步数据请求和页面更新。
2025-02-19 09:58:43
622
原创 Webpack，Vite打包的理解
Webpack：功能强大，适合复杂项目，但配置复杂，打包速度较慢。Vite：开发体验优秀，配置简单，适合现代前端项目，但对旧版浏览器支持有限。选择 Webpack 还是 Vite 取决于项目需求、团队熟悉度和浏览器兼容性要求。
2025-02-18 15:40:40
714
原创 Promise异步编程
是 JavaScript 中用于处理异步操作的一种机制，它解决了传统回调函数嵌套（回调地狱）的问题，使异步代码更易于编写和维护。
2025-02-18 13:24:50
724
原创 es6新特性
ES6 引入了许多强大的特性，使得 JavaScript 更加现代化和高效。掌握这些特性可以显著提升开发效率和代码质量。建议在实际项目中逐步应用这些特性，以加深理解。
2025-02-18 13:21:05
435
原创 宏任务和微任务
在前端开发中，**宏任务（Macro Task）**和**微任务（Micro Task）**是 JavaScript 事件循环（Event Loop）中的两个重要概念。它们决定了异步代码的执行顺序。---### 1. **事件循环（Event Loop）**JavaScript 是单线程的，通过事件循环机制处理异步任务。事件循环的核心是：- **主线程**：执行同步代码。- **任务队列**：存放异步任务的回调函数。- **事件循环**：不断检查任务队列，将任务推入主线程执行。任务队列分为两种：-
2025-02-16 20:26:27
450
原创 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
724
原创 异步是什么
异步（Asynchronous）是与同步（Synchronous）相对的一个概念。在计算机编程中，同步操作意味着任务按照代码的顺序依次执行，而异步操作则允许任务在后台执行，不会阻塞主线程，从而允许程序在等待异步任务完成的同时继续执行其他任务。异步操作的本质是将耗时的任务交给其他线程或线程池来处理，当前线程在等待结果时不会被阻塞，可以继续处理其他任务。当异步任务完成时，通常会通过回调函数、Promise、Async/Await等方式通知主线程或处理结果。
2025-02-14 16:08:34
359
原创 输入url按下回车后发生了什么
需要注意的是，以上步骤是一个典型的过程描述，实际过程中可能会因浏览器实现、网络状况、服务器配置等因素而有所不同。此外，随着技术的不断发展，新的标准和特性可能会被引入，从而影响这一过程的具体实现。在前端浏览器中输入URL并按下回车后，会触发一系列复杂的过程来加载和显示所请求的网页。
2025-02-13 13:56:43
367
原创 React常用hooks
React 中的 Hooks 是一系列函数，它们可以让你在函数组件中使用 state 和其他 React 特性。Hooks 的引入使得函数组件更加灵活和强大，不再局限于无状态组件。这些 Hooks 提供了在函数组件中管理 state、执行副作用、访问上下文、优化性能以及创建可重用逻辑的能力。通过组合这些 Hooks，你可以构建出复杂且高效的 React 应用。
2025-02-13 13:54:45
251
原创 对This的理解
的工作机制是掌握 JavaScript 的关键之一，因为它涉及到对象、函数和原型继承等多个核心概念。的值取决于函数是如何被调用的，而不是函数被定义的位置。这意味着同一个函数在不同的调用环境中可能会有不同的。，因此它们通常不适合用作对象的方法，除非你已经有了特定的上下文绑定需求。是一个非常重要的关键字，它代表当前执行上下文中的一个特殊对象。：当函数不作为对象的方法被调用时（即独立调用），在非严格模式下，在浏览器环境中，全局对象是。时，它引用的是定义箭头函数时的上下文中的。：当函数作为对象的一个方法被调用时，
2025-02-13 13:26:34
141
原创 JS（1）
基本数据类型：、、 、、、、利用 来实现换行；基本数据类型：typeof复杂数据类型：inctanceof还可以toString：1. 闭包是什么 闭包是一个函数加上到创建函数的作用域的连接，闭包“关闭”了函数的自由变量。2. 闭包可以解决什么问题【闭包的优点】 2.1 内部函数可以访问到外部函数的局部变量 2.2 闭包可以解决的问题 var lis = document.getElementsByTa
2024-12-26 09:31:12
347
原创 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
816
原创 CSS布局
如果脱离文档流，那么文档原本占据文档流的位置会被它后面的元素填补。响应式设计简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
2024-12-12 19:54:50
634
原创 CSS属性
伪元素以双冒号（::）开头（在CSS3及更高版本中，但CSS2及更早版本使用单冒号），例如::before、::after等。伪元素的主要作用是允许你在已选择的元素内部创建或修改内容，而无需在文档结构中添加额外的HTML元素。伪类的主要作用是选择已有文档中的元素的特定状态，并为其应用相应的样式。浮动元素：浮动元素会脱离正常的文档流，向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。当浮动元素的高度发生变化时，需要手动更新父元素的高度，增加了维护成本。为浮动元素的父元素设置。
2024-12-12 18:50:19
933
原创 HTML属性问题
data-xxx为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取；
2024-12-12 11:47:14
332
原创 HTML5的缓存
cookie支持数据小且不能跨域访问，需要自己封装函数，localStorage可以本地持久化保存并且不需要自己封装get，set函数。
2024-12-11 21:51:04
210
原创 HTML5 新的 doctype 和 charset 是什么？
就这么几个字母，摆平了。这就是 HTML5 的一个设计准则之一——化繁为简。字符集的声明也被大大的简化。会导致中文网页的乱码，指定字符编码就可以了。
2024-12-11 21:38:25
265
原创 HTML5新特性
这个属性有两个值，一个是on，另一个是off。auto是自动的意思，focus是聚焦的意思，这个属性描述的就是自动聚焦到需要填写的textarea。这个属性是文本的占位符，相当于一种提示信息，显示在输入域，描述期待user输入的值。方法：play(),pause(),load(),分别是播放，停止，加载方法。属性：autoplay：自动播放，值的类型为bool，默认为true。这个属性的值为Bool，默认为true，意思是在输入域不能为空。video的方法，属性，事件可以使用js来控制。
2024-12-11 21:29:40
953
原创 React性能优化
上图在每一次点击add按钮时候都会将"hello"加入数组，每次都会执行conlole说明后面的useState语句也会每次执行。这个时候我们只需要将useState中传入一个函数，那么只会在渲染阶段执行一次，并不会组件每次更新执行。useState传入普通变量的时候，在每次组件更新都会执行一次。只适用于数据结构复杂，计算成本高的场景。如图genArr函数只执行了一次。
2024-12-11 19:16:46
209
原创 Redux状态管理
其中countReducer是为管理加减信息的，从count.ts文件中导入（后文提及）创建store文件夹，在其中新建index.ts文件，作为总的store仓库管理。需要在根组件中用包裹，并且传入仓库store。注意需导出actions方法和整个reducer函数。以防忘记，文件列表如下。
2024-12-11 19:16:12
146
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人