- 博客(34)
- 收藏
- 关注
RSS订阅原创 25-深入理解 JavaScript 异步生成器的实现
生成器是 JavaScript 中的一种函数类型，调用生成器函数时返回一个迭代器对象，可以通过next方法一步步执行，并根据需要暂停和恢复执行。异步生成器类似，但它可以在暂停的间隙等待异步操作完成，再继续执行。h0 });本文解析了一个 JavaScript 异步生成器控制器的实现。通过这种控制器，您可以在不支持asyncawait的环境中，管理基于生成器的异步操作。这一实现方式不仅提高了代码兼容性，还帮助我们更深入地理解了异步生成器的内部工作机制。
2024-11-16 15:52:12
532
1
原创 24-原生 JavaScript 操作 DOM：从创建元素到事件处理
DOM（Document Object Model，文档对象模型）是浏览器对 HTML 或 XML 文档的编程接口，它允许开发者通过编程来操作文档的结构、样式和内容。在 JavaScript 中，DOM 提供了许多方法来动态地添加、修改和删除页面中的元素和内容。通过本文的学习，我们掌握了使用原生 JavaScript 操作 DOM 的基础知识，包括创建和插入元素、修改属性和内容、事件处理、动态生成列表等。掌握这些基础技能对理解前端开发非常重要，即使在使用框架时，它们也能帮助你编写更高效的代码。
2024-11-16 15:50:28
1030
原创 23-JSX 与模板：区别、优缺点
JSX 是 JavaScript XML 的缩写，是 React 框架中的一种语法扩展。它允许开发者在 JavaScript 代码中直接编写类似 HTML 的语法，从而更直观地构建用户界面。模板 (Template) 通常是指在前端框架中使用的一种定义 UI 结构的方式。它们通常与特定的框架绑定，例如 Vue.js 中的模板语法，Angular 中的模板语法等。
2024-11-16 15:48:03
806
原创 22-深入理解 async 和 defer：优化你的 JavaScript 加载策略
在现代网页开发中，优化页面加载速度和性能是至关重要的。JavaScript 文件的加载和执行可以显著影响页面的加载时间和用户体验。async和defer，它们可以帮助我们更好地控制脚本的加载和执行行为。那么，async和defer到底是什么，它们之间有什么区别，又该如何选择呢？让我们一起来深入探讨。
2024-11-16 15:44:56
765
原创 21-JavaScript 解构赋值简介
JavaScript 的解构赋值特性极大地提高了代码的可读性和可维护性。通过解构赋值，我们可以轻松地从数组和对象中提取数据，并在函数参数中使用更简洁的方式传递和处理数据。无论是简单的数据提取，还是处理复杂的嵌套结构，解构赋值都提供了一种直观且高效的解决方案。希望通过本文的介绍，您能更好地理解和应用 JavaScript 的解构赋值特性。
2024-11-16 15:42:29
363
原创 20-使用 navigator.sendBeacon 进行高效数据传输
是一种高效且可靠的数据传输方法，特别适用于需要在不影响用户体验的情况下发送少量数据的场景。通过合理利用sendBeacon，我们可以实现用户行为分析、性能监控和错误日志记录等功能，从而提升网站的性能和用户体验。希望本文能够帮助你更好地理解并使用。
2024-11-16 15:38:24
788
原创 19-简单理解JavaScript中的Promise：手写Promise实现
Promise是JavaScript中的一种对象，用于表示一个异步操作的最终完成（或失败）及其结果值。Pending（待定）：初始状态，既没有被兑现，也没有被拒绝。Fulfilled（已兑现）：操作成功完成，并返回一个值。Rejected（已拒绝）：操作失败，并返回一个原因。
2024-11-16 15:35:30
450
原创 18-深入理解JavaScript中的Promise
Promise是JavaScript中的一种对象，用于表示一个异步操作的最终完成（或失败）及其结果值。Pending（待定）：初始状态，既没有被兑现，也没有被拒绝。Fulfilled（已兑现）：操作成功完成，并返回一个值。Rejected（已拒绝）：操作失败，并返回一个原因。Promise极大地改善了JavaScript异步编程的体验，使得代码更加可读和易于维护。通过掌握Promise的创建、链式调用、组合方法（如和）以及与的结合使用，可以编写出更高效、更优雅的异步代码。
2024-11-16 15:33:08
331
原创 17-理解JavaScript中的事件捕获和事件冒泡
笔记+分享在现代Web开发中，事件处理是一个至关重要的部分。JavaScript中的事件模型包括两个主要的阶段：事件捕获和事件冒泡。理解这两个概念有助于我们更好地控制事件的行为，进而编写更高效的代码。本文将详细介绍事件捕获和事件冒泡的概念、区别及其在实际开发中的应用。
2024-11-16 15:30:17
745
原创 16-简单理解offsetHeight与clientHeight的区别
是一个只读属性，它表示元素的总高度，包括元素的边框(border)、内边距(padding)和水平滚动条的高度（如果存在）。具体而言，等于元素的内容高度(content height) 加上内边距、边框和水平滚动条的高度。也是一个只读属性，它表示元素的内部高度，包括内边距(padding)，但不包括边框(border)和水平滚动条的高度（如果存在）。具体而言，等于元素的内容高度(content height) 加上内边距的高度。
2024-11-16 15:25:49
702
原创 15-JavaScript 中的 `call`、`apply` 和 `bind`
调用时间call和apply：立即调用函数。bind：返回一个新的函数，可以在以后调用。参数传递call：接受参数列表。apply：接受参数数组。bind：接受参数列表，并返回一个新的函数，可以在调用时再传入额外参数。适用场景call：在知道参数数量时使用。apply：在参数数量不确定时使用，如从数组中提取参数。bind：在需要返回一个带有特定this值的新函数时使用。
2024-06-03 22:05:20
511
原创 14-JavaScript中的点操作符与方括号操作符
语法要求：点操作符只能用于有效的标识符属性名，而方括号操作符则没有此限制，可以处理任何字符串属性名。灵活性：方括号操作符更灵活，允许使用动态属性名和包含特殊字符的属性名。代码简洁性：点操作符语法更简洁，代码可读性更高，适用于静态属性名。
2024-06-03 22:00:47
384
原创 13-为什么在JavaScript中0.1 + 0.2不等于0.3？
理解这一点，并采用适当的方法来处理浮点数计算，可以帮助我们避免相关的精度问题。首先，我们需要了解计算机是如何表示小数的。而在二进制中，并不是所有的十进制小数都能精确地表示。将这些十进制小数转换为二进制浮点数时，它们只能近似表示。但是，在二进制系统中，0.1表示为一个无限循环的小数，类似于在十进制中1/3表示为0.3333…对于需要高精度计算的场景，可以使用BigDecimal库进行处理，这些库能够精确处理十进制数。这并不是精确的0.3，而是一个非常接近0.3的数值，但在计算机的精度限制下，它们并不相等。
2024-06-03 21:59:01
802
原创 12-从URL到页面：探寻Web页面渲染的全过程
从输入URL到页面完全渲染，背后涉及的步骤非常多，包括DNS解析、TCP连接的建立与终止、HTTP请求与响应处理、DOM和CSSOM树的构建、JavaScript的执行以及页面的布局和绘制。服务器可能需要查询数据库、执行后台脚本或访问其他服务，然后将响应数据（如HTML、CSS、JavaScript、图像等）发送回浏览器。在我们浏览网页时，从输入URL到最终页面呈现在浏览器上，这背后发生了一系列复杂的步骤。得到IP地址后，浏览器与服务器建立TCP连接，确保数据可以可靠传输。
2024-06-03 21:56:33
730
原创 11-深入理解 requestAnimationFrame：高效动画渲染的秘密
是一个告知浏览器你希望执行动画，并在浏览器下一次重绘之前调用指定函数的方法。相比于传统的setTimeout或实现动画的方法，能够更高效地进行动画渲染，避免丢帧和页面卡顿。是现代浏览器提供的一种高效处理动画的API。相比于传统的setTimeout或，它在性能、资源利用和代码简洁性方面都有显著优势。通过，我们可以轻松实现高性能、流畅的动画效果，从而提升用户体验。
2024-06-03 21:03:44
1684
原创 10-探索 Intersection Observer API：高效管理元素可见性
Intersection Observer API 是一种异步观察目标元素与祖先元素（或顶级文档的视口）交叉状态变化的方法。它提供了一种便捷的方式来了解元素何时进入或离开视口，从而可以在这些时机执行相应的操作。Intersection Observer API 提供了一种高效、简洁的方式来检测元素的可见性变化。通过这一API，我们可以轻松实现懒加载、无限滚动、广告曝光统计等功能，从而提升页面性能和用户体验。希望本文能帮助你更好地理解和应用Intersection Observer API。
2024-06-03 21:01:15
965
1
原创 09-使用JavaScript处理长列表数据：惰性渲染、虚拟滚动与分批渲染
通过惰性渲染、虚拟滚动以及分批渲染，开发者可以显著优化长列表数据的处理，提升页面性能和用户体验。惰性渲染减少了不必要的数据加载，虚拟滚动仅保留视口内的数据，而分批渲染则避免了一次性渲染大量数据所导致的卡顿。希望本文能帮助你更好地理解和应用这些技术。
2024-06-03 20:59:07
927
1
原创 08-使用HappyPack提升Webpack构建速度
HappyPack 是一个让 Webpack 的构建变得更快的插件。它的核心思想是通过并行化操作，将文件的转换工作分配到多个子进程中执行，从而加快整体的构建速度。
2024-06-01 14:21:46
668
原创 07-使用 JavaScript Promise 并行处理多个请求
通过这种方式，使用时，可以确保所有Promise都能执行，无论其中某些Promise是否失败。这在处理多个并行请求时非常有用，可以确保即使某些请求失败，也能获取其他请求的结果，从而提高代码的健壮性和可靠性。希望本文的介绍和示例代码能够帮助你更好地理解和使用JavaScript中的Promise来管理并行请求。通过这种方式，开发者可以更灵活地处理并行请求，无论是使用还是，都能够确保在复杂的异步操作中更加健壮地管理请求结果。
2024-06-01 14:20:27
2235
原创 06-简单理解JavaScript事件循环：宏任务与微任务
JavaScript中的事件循环机制是理解异步编程的关键。通过了解宏任务和微任务的概念，我们可以更好地掌握JavaScript中异步代码的执行顺序。记住，宏任务和微任务的区别在于它们的执行时机和优先级，这对于编写高效、可靠的JavaScript代码至关重要。
2024-05-30 21:59:30
667
1
原创 05-JavaScript 中的 `tap` 和 `click` 事件
理解tap和click事件的区别，以及它们在不同设备和应用场景中的表现，对于开发高效、响应迅速的跨平台应用至关重要。click事件适用于桌面设备，而tap事件在移动设备上提供更好的用户体验。通过掌握事件模型、调试和优化技巧，可以显著提升用户的交互体验。
2024-05-30 21:42:04
1324
原创 04-了解和预防 JavaScript 内存泄漏
内存泄漏是 JavaScript 开发中一个常见的问题，但通过了解和预防这些常见的内存泄漏方式，可以显著提高应用的性能和稳定性。始终保持代码的整洁，及时清理不再需要的引用，并利用开发工具进行内存检测，是防止内存泄漏的有效策略。
2024-05-30 21:07:12
579
1
原创 03-JavaScript 中的相等判断与隐式类型转换
理解 JavaScript 中的相等性判断及其背后的隐式类型转换规则对于编写健壮且易于维护的代码至关重要。严格相等（===）运算符可以避免许多潜在的问题，而宽松相等（==）运算符在某些情况下虽然提供了便利，但也可能引发难以发现的错误。通过掌握这些规则，开发者可以更好地控制代码行为，提高代码质量和可靠性。
2024-05-30 20:46:41
372
原创 02-TerserWebpackPlugin：优化你的 JavaScript 代码
TerserWebpackPlugin 是一个 Webpack 插件，用于通过 Terser 压缩和优化 JavaScript 代码。Terser 是一个用于 ES6+ 代码的 JavaScript 压缩工具，它基于 UglifyJS，但添加了对现代 JavaScript 特性的支持。TerserWebpackPlugin 利用 Terser 的强大功能，帮助开发者生成更小、更高效的 JavaScript 文件，从而提升网页加载速度和用户体验。
2024-05-30 20:43:03
2599
原创 01-CompressionWebpackPlugin---提高 Web 应用性能的利器
CompressionWebpackPlugin 是一个用于 Webpack 的插件，能够在构建过程中生成压缩文件（例如.gz和.br文件）。这些压缩文件可以显著减少资源文件的大小，从而加快网页的加载速度。浏览器会优先请求这些压缩文件，减少传输数据量，提高页面响应速度。CompressionWebpackPlugin 是一个强大且易于使用的 Webpack 插件，可以显著减少资源文件的大小，提高网页加载速度。
2024-05-30 20:40:47
2977
原创 利用 element-ui 中 el-image 组件实现，图片正在加载时的动画
【代码】利用 element-ui 中 el-image 组件实现，图片正在加载时的动画。
2024-04-02 13:21:29
1128
1
原创 W7系统中Vscode软件下载插件报错XHR failed解决方案
（5）点击vscode 的扩展应用，然后选择右上的三个点，会有一个选项，应该是最后一个从vsix文件安装，然后选择就可。（9）选择右边栏的Resources下面的Changelog，里面有你需要的版本，然后记住你要的版本,如17.5.2。（7）如果在w7系统中可能会报版本不兼容，有些插件版本太高了，所以就需要下载低版本的vsix文件。（10）你需要的版本号可以百度，或者问一下别人w7系统上的vscode插件的版本。（14）将网址直接点开就行，会下载vsix文件。（13）将版本号替换成你要的版本号就行。
2023-11-25 14:51:45
1290
原创 vue2实现websocket的聊天应用
首先，我们需要简单了解一下websocket：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理，HTTP 协议无法实现服务器主动向客户端发起消息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步 JavaScript 和 XML（AJAX）请求实现长轮询。轮询的效率低，非常浪费资源。
2023-10-23 22:41:38
1817
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人