- 博客(206)
- 收藏
- 关注
RSS订阅原创 vite的svg插件：vite-plugin-svg-icons
vite-plugin-svg-icons 通过其优雅的设计和高效的实现，已成为Vue项目SVG图标管理的事实标准方案。结合本文的配置指南、最佳实践和扩展方案，开发者可以快速构建高性能、易维护的图标系统。建议结合官方文档和社区案例持续探索更深度应用。（注：本文大部分由ai生成，如果在使用过程中发现哪里有问题，欢迎留言或私信，我会帮你解决遇到的问题并修正文章）
2025-03-17 18:32:42
777
原创 微信小程序自定义tabbar
自定义tabbar的文件必须叫custom-tab-bar，只要把这个文件放在项目里面这个文件的内容就自动跑到页面的下面变成自定义tabbar，想要什么样式自己去调整就行了。app.json配置用于去除系统自带的tabbar，将custom的值设置为true。微信小程序自定义tabbar大致就是这些了，如果有什么疑惑欢迎在评论区提问。，不然不能获取this.getTabBar()。
2025-01-09 09:42:15
366
原创 css预处理器sass
Sass 是一种 CSS 预处理器，它扩展了 CSS 的功能，让 CSS 的编写更加高效、灵活和易于维护。Sass 是一种非常强大的 CSS 预处理器，它扩展了 CSS 的功能，让 CSS 代码的编写更加高效、灵活和易于维护。Sass 是一种 CSS 预处理器，这意味着它不是直接被浏览器解析的 CSS 代码，而是需要通过 Sass 编译器编译成浏览器能够识别的 CSS 代码。SCSS 语法是 CSS 的超集，它与 CSS 的语法非常相似，只是扩展了一些 Sass 的功能。通常，我们更推荐使用。
2025-01-04 09:44:07
734
原创 js的Reflect对象
Reflect对象是 JavaScript ES6 中引入的一个内建对象，它提供了一系列与对象操作相关的方法。这些方法与Object对象上的方法类似，但在行为上有一些差异，并且更加规范和统一。
2024-12-29 07:43:37
528
原创 webpack
在现代前端开发的浪潮中，Webpack 已经成为一个不可或缺的构建工具。它不仅能够帮助我们打包 JavaScript 代码，还能够处理各种资源（如 CSS、图片、字体等），并提供一系列优化手段，极大地提升开发效率和应用性能。
2024-12-28 19:39:00
853
原创 rgba和16进制
**透明度控制示例** | `rgba(255, 99, 71, 0.5)` | `#ff6347`（无透明度控制） || **透明度支持** | 支持透明度（alpha）控制，透明度值为0到1之间 | 不直接支持透明度（需要使用 `#RRGGBBAA` 格式来支持透明度） |在CSS中，`rgba()` 和 16进制颜色值都是用于指定颜色的两种不同方式。
2024-12-07 16:11:35
628
原创 监听浏览器刷新事件的指南
浏览器刷新（Refresh/Reload）是用户通过浏览器的刷新按钮或快捷键（如 `F5` 或 `Ctrl + R`）重新加载当前页面的行为。
2024-12-07 08:14:27
1104
原创 深入理解 JavaScript 的 MutationObserver API
试试在你的项目中使用它，为用户带来更好的体验吧！- **`type`**: 变化类型（`attributes`、`childList`、`characterData`）。- **`addedNodes` 和 `removedNodes`**: 子节点变化时的新节点和旧节点列表。### **三、基础示例**#### **1. 监听子节点的添加和移除**- **`attributeFilter`**: 限制只监听特定的属性。- **`attributeName`**: 属性变化时的属性名称。
2024-12-03 08:07:35
1339
原创 深入理解 JavaScript 的 IntersectionObserver API
为了实现页面的高效滚动加载、懒加载图片、观察元素是否进入视口等功能，JavaScript 提供了一个强大的工具 ——在这篇博客中，我们将深入解析 IntersectionObserver 的核心功能、使用方法，以及最佳实践。是一个功能强大且易于使用的 API，特别适合现代 Web 开发中与滚动、懒加载相关的任务。是一个原生的 JavaScript API，用于异步地观察目标元素与其祖先元素（或视口）交叉的情况。和优化回调函数，可以实现高效、流畅的用户体验。是浏览器优化的原生解决方案，性能更高。
2024-12-02 21:30:04
1211
原创 Lodash库
例如：`_.chunk()`, `_.compact()`, `_.concat()`, `_.difference()`, `_.uniq()`。- 例如：`map()`, `filter()`, `reduce()`, `find()`, `sortBy()`, `groupBy()` 等。- 例如：`_.get()`, `_.set()`, `_.merge()`, `_.pick()`, `_.omit()`。- Lodash 提供了许多便捷函数处理对象的属性，克隆、合并、获取深层属性等。
2024-09-24 22:32:54
781
原创 js中的cloneDeep是什么？
cloneDeep` 是 JavaScript 中用于进行**深拷贝**（deep clone）的一种方法，它会递归地复制一个对象或数组中的所有嵌套属性。深拷贝与浅拷贝（shallow copy）不同，深拷贝会完整复制对象的所有层级，包括嵌套的对象或数组，而浅拷贝只复制最外层的引用。- **浅拷贝**（如使用 `Object.assign` 或展开运算符 `...`）只会复制对象的第一层，嵌套的对象仍然是原对象的引用。- **深拷贝**：将对象的所有层级都复制出来，确保拷贝后的对象与原对象彻底分离。
2024-09-24 22:30:18
1004
1
原创 在js渲染的dom中的事件中传递对象
在某些情况下，可能需要将整个对象或部分对象嵌入到 HTML 元素的属性中，可以将对象数据序列化为 JSON 字符串，存储在data-*自定义属性中。
2024-09-04 09:04:27
565
1
原创 模块化是什么，组件化是什么，两者的区别是什么
**定义**：组件化是指将用户界面或功能单元拆分为相互独立、可复用的组件，每个组件都有自己的业务逻辑和展示效果。- **定义**：模块化是指将一个大型系统拆分为相互独立、功能相关的小模块，以便于开发、维护和复用。每个模块都有清晰的接口和功能边界，可以独立开发、测试和部署。1. **抽象层级不同**：模块化更多地关注于代码层面的组织和复用，而组件化更多地关注于用户界面或功能模块的组织和复用。2. **复用粒度不同**：模块化的复用单位更偏向于代码级别的功能模块，而组件化的复用单位更偏向于界面或功能单元。
2024-08-18 17:42:54
345
原创 vue中如何点击事件，获取该点击元素
在上面的示例中，我们在`<div>`元素上添加了一个点击事件处理程序`@click="handleClick"`，当这个`<div>`元素被点击时，`handleClick`方法会被调用，并且传入一个事件对象`event`。通过`event.target`可以获取到被点击的元素。在Vue中，你可以通过事件处理程序（event handler）来监听点击事件，并通过事件对象（event object）获取点击的元素。
2024-08-18 17:41:47
427
原创 小程序如何引入自定义组件
需要注意的是，自定义组件和页面有一些区别，例如自定义组件的`wxml`文件中只能使用相对路径来引用其他文件，而页面的`wxml`文件可以使用绝对路径。5. 在页面中引入自定义组件：在需要使用自定义组件的页面的`json`文件中引入自定义组件。3. 编写组件的模板文件：在`component.wxml`文件中编写组件的结构和布局，使用小程序的组件标签和WXSS样式来定义组件的外观。4. 编写组件的样式文件：在`component.wxss`文件中编写组件的样式，可以为组件添加各种样式效果。
2024-08-18 17:40:56
346
原创 vue2项目的书写格式
`<script>` 部分包含了 Vue 组件的 JavaScript 部分。`data` 函数返回对象，包含了组件的数据。`methods` 对象包含了组件的方法。- `<template>` 部分包含了组件的 HTML 结构，使用双括号插值语法 `{{}}` 来显示数据。在这个示例中，我们定义了一个简单的 Vue 组件，包括模板、JavaScript 代码和样式。- `<style>` 部分包含了组件的样式。使用 `scoped` 属性可以使得样式只作用于当前组件。
2024-08-18 17:39:51
401
原创 vue2项目如何获取跳转传参的数据
在这个示例中，我们在组件的 `created` 钩子函数中调用了 `getRouteParams` 方法，在该方法中使用 `this.$route.params` 来获取路由传递的参数。在这里，我们假设路由传递了一个名为 `id` 的参数，并将其存储在变量 `id` 中进行后续操作。在 Vue.js 2 中，你可以在组件的 `created` 或 `mounted` 钩子函数中获取路由传递的参数。
2024-08-18 17:39:03
411
原创 uni-app——如何阻止事件冒泡
需要注意的是，.prevent修饰符只能阻止当前事件的冒泡和默认行为，无法阻止其他事件的冒泡和默认行为。在上述代码中，当子组件被点击时，会触发handleChildClick方法，并且使用.prevent修饰符来阻止事件冒泡和默认行为。当一个组件上的事件被触发时，如果该组件有父组件，事件会沿着组件树向上层传递，直到根组件。这样做的好处是可以在父组件中监听子组件的事件，并进行相应的处理。在uni-app中，事件冒泡是指当一个组件上的事件被触发时，如果该组件有父组件，事件会沿着组件树向上层传递，直到根组件。
2024-08-14 20:56:20
3087
2
原创 JavaScript 中整数的安全范围
在 JavaScript 中，整数的安全范围可以通过两个预定义的常量来表示，即 Number.MIN_SAFE_INTEGER 和 Number.MAX_SAFE_INTEGER。Number.MIN_SAFE_INTEGER 表示 JavaScript 中整数的最小安全范围，而 Number.MAX_SAFE_INTEGER 表示整数的最大安全范围。在 JavaScript 中，整数的安全范围由 Number.MIN_SAFE_INTEGER 和 Number.MAX_SAFE_INTEGER 定义。
2024-08-11 18:54:10
301
原创 深入了解 JavaScript 中的 DOM 和 BOM
DOM 提供了一种可以访问和操作网页内容的方法，而 BOM 则提供了一种可以操作浏览器相关信息的方法。JavaScript 是一种强大的编程语言，它不仅可以操作网页的内容，还可以控制浏览器的行为。DOM 是指文档对象模型，它表示网页的结构化文档，并提供了一种可以访问和操作网页内容的方法。比如，我们可以使用 window 对象来获取浏览器的一些信息，比如浏览器的大小、位置等。BOM 是指浏览器对象模型，它提供了一种可以操作浏览器窗口、历史记录、定时器等浏览器相关信息的方法。
2024-08-11 18:53:11
383
原创 JavaScript 中如何检测一个变量是一个 String 类型？
使用 Object.prototype.toString 方法：可以使用 Object.prototype.toString 方法来检测一个变量的数据类型，如果返回的结果是 “[object String]”，则表示该变量是一个 String 类型。使用 typeof 操作符：可以使用 typeof 操作符来检测一个变量的数据类型，如果返回的结果是 “string”，则表示该变量是一个 String 类型。通过使用 typeof 操作符，我们可以轻松地检测一个变量是否为字符串类型。简单易用，代码量少。
2024-08-11 18:50:29
638
原创 JS require 与 import 的区别
但是很多人对它们的区别不太清楚。通过本文的介绍，我们了解了 require 和 import 的区别，以及它们的使用方式。在实际的开发中，我们应该根据具体的情况选择合适的引入方式，以便更好地组织和管理我们的代码。在Node.js中，require是一种CommonJS模块系统的导入方式，可以直接在服务器端使用，不需要额外的配置。JS中的require和import都是用来导入模块的关键字，但它们有一些不同的优缺点。import是ES6模块系统的导入方式，支持异步加载模块，可以提高应用程序的性能。
2024-08-11 18:49:05
624
原创 iframe实现跨域通信的方法
跨域通信是指在浏览器的同源策略下，不同源之间的通信。同源策略是浏览器最核心的安全功能之一，它限制了一个源（协议 + 域名 + 端口）的文档或脚本如何能与另一个源的资源进行交互。通过本文的介绍，我们了解了如何使用 iframe 实现跨域通信，以及其他不跨域通信的方法和代码示例。在实际的前端开发中，根据具体的情况选择合适的方法来进行跨域通信是非常重要的。希望本文能对你有所帮助！跨域通信是指在浏览器的同源策略下，不同源之间的通信。本文将介绍如何通过 iframe 实现跨域通信，以及不跨域通信的方法和代码示例。
2024-08-11 18:46:19
705
原创 理解 ＜script＞ 标签的 defer 和 async 属性
比如说，如果 script2.js 需要依赖 script1.js 中定义的某个变量，那么如果 script2.js 先于 script1.js 执行，就会出现错误。defer 和 async 属性的区别在于，defer 属性保证 JavaScript 文件的执行顺序与它们在页面中出现的顺序一致，而 async 属性不保证执行顺序。总的来说，defer 适合需要按顺序执行的脚本，而 async 适合需要立即执行且不依赖其他脚本的情况。脚本的加载和执行是异步的，不会阻塞页面的解析和其他资源的加载。
2024-08-11 18:44:02
321
原创 JavaScript文档加载和文档准备的区别
总的来说，了解JavaScript文档加载和文档准备的过程对于Web开发非常重要，可以帮助开发者更好地控制页面的加载和渲染，并且提高网站的性能和用户体验。总的来说，文档加载和文档准备都有各自的优点和缺点，开发者需要根据具体的情况选择合适的方式来加载和准备JavaScript文档。加载过程是浏览器执行JavaScript代码之前的第一步，可以确保所有相关的文档和资源都已经加载完毕，避免出现未定义的情况。文档准备是在文档加载完毕后执行的，可以确保所有相关的资源都已经加载完毕，避免出现未定义的情况。
2024-08-11 18:40:52
395
原创 详解React——简便获取经纬度信息
在现代的Web应用程序中，获取用户的地理位置信息是一项常见的需求。使用React组件库中的地图组件，如react-leaflet、react-google-maps等，这些组件封装了地图API的功能，可以方便地获取经纬度信息并在地图上展示。使用第三方地图API，如百度地图、高德地图、腾讯地图等，这些API提供了获取当前位置信息的接口，可以通过发送HTTP请求获取经纬度信息。需要注意的是，获取经纬度信息存在一定的误差，且用户可以随时禁用或拒绝授权，因此在使用时需要考虑到这些情况并进行相应的处理。
2024-08-04 22:20:13
494
原创 详解React：Props构建可复用UI的基石
在本文中，我们将探讨React中的组件和Props的重要性，以及如何利用它们来构建可复用的UI。通过Props，我们可以将数据以及回调函数传递给子组件，从而影响子组件的行为和外观。父组件可以在使用子组件时，通过设置Props的值来传递数据给子组件。父组件可以根据需要传递不同的数据给子组件，从而在不同的上下文中使用同一个子组件。通过将组件的行为和外观参数化，我们可以根据不同的需求使用相同的组件。我们将构建一个可定制的按钮组件，它可以根据传递的Props来显示不同的文本和样式。示例：构建一个可复用的按钮组件。
2024-08-04 22:16:44
279
原创 React如何进行条件渲染
在React中，条件渲染是一个非常重要的概念，它允许我们根据不同的条件来呈现不同的内容。三元运算符是一种简洁的语法，它可以让我们在一行代码中实现条件渲染。在React中，我们可以使用条件渲染来根据不同的状态来呈现不同的内容。在上面的代码中，我们使用三元运算符来检查isLoggedin的值，并根据不同的值来呈现不同的内容。在上面的代码中，我们使用if语句来检查isLoggedin的值，并根据不同的值来呈现不同的内容。在React中，我们可以使用条件语句来实现条件渲染。最常用的条件语句是if语句和三元运算符。
2024-08-04 22:13:36
156
原创 CSS精灵图：提高网站性能的秘密武器
CSS精灵图是一种可以提高网站性能的技术，可以将多个小图标合并成一个大图，从而减少HTTP请求次数，提高页面加载速度。在实际开发中，我们可以使用图像处理软件将多个小图标合并成一个大图，并通过CSS的background-position属性来控制显示哪一个小图标。可读性差：在CSS中使用精灵图时，需要通过background-position属性来控制显示的位置，这会增加代码的复杂度，降低可读性。减小文件大小：合并图像后，只需要一个CSS文件和一个图像文件，减小了文件的大小，减少了网络传输的时间。
2024-08-04 21:50:13
468
原创 Vue的计算属性：让你的代码更简洁高效
Vue的计算属性是一种特殊的属性，它可以根据其他属性的值计算出一个新的值。计算属性只有在相关的依赖属性发生变化时才会重新计算，这使得它们比直接在模板中使用方法更高效。只需要在组件的计算属性对象中添加一个新的属性，并为该属性提供一个计算函数。首先，计算属性是基于它们的依赖项进行缓存的。总的来说，Vue计算属性是一个非常有用的特性，可以用于处理大部分的数据计算和逻辑，但在处理复杂的计算逻辑时，可能需要结合其他的特性来实现。响应式更新：当计算属性依赖的数据发生变化时，计算属性会自动更新，保持数据的实时性。
2024-08-04 21:49:02
432
原创 React中的Redux：简介和实例代码
它提供了一种简单而强大的方式来构建交互式的界面。在本文中，我们简要介绍了Redux的基本概念，并提供了一个简单的示例代码来演示Redux是如何与React一起使用的。状态集中管理：Redux提供了一个全局状态管理器，可以将应用程序的状态集中管理，并且可以在应用程序中的任何地方访问和更新状态。在本文中，我们将介绍Redux的基本概念，并提供一些实例代码来帮助您更好地理解它是如何与React一起使用的。增加了代码的复杂性：Redux需要编写更多的代码来管理应用程序的状态，这可能会增加代码的复杂性。
2024-08-04 21:46:59
369
原创 ES6 class 类
你可以将类赋值给变量，将类作为函数参数传递，从函数中返回类，以及在运行时动态地创建类。这使得类在 JavaScript 中更具灵活性，可以更方便地进行模块化和编程。（意味着在代码执行之前，类声明不会被移动到作用域的顶部。这与传统的函数声明和变量声明不同，它们可以在作用域内被提升。因此，在使用类之前必须先声明类，否则会导致引用错误。对比下来，不难发现class类添加方法代码更加易懂，易读，也有好的继承特性，后续更加容易维护；类必须在严格模式下运行，类和里面模块默认必须使用严格模式书写。普通使用原型添加方法。
2024-08-01 18:05:59
216
原创 JavaScript自执行函数：用途、好处
语法：自执行函数的语法是将函数定义放在一对括号中，然后在后面再加上一对括号来立即执行该函数，例如：(function() { // code })();自执行函数经常用于实现模块化开发。避免全局污染：自执行函数可以将变量和函数封装在函数作用域内，避免了对全局作用域的污染，有助于保持代码的整洁和可维护性。避免命名冲突：自执行函数中的变量和函数都是在函数作用域内，可以避免与全局作用域中的同名变量和函数发生冲突。通过自执行函数，可以将一段代码封装起来，形成一个独立的作用域，这有助于提高代码的可读性和可维护性。
2024-07-28 18:46:48
366
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人