- 博客(67)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 不要在手写过度动画了，用上GSAP! （二） GSAP 基础属性内容详解
函数会针对数组中的每个目标/元素调用一次，并应返回从起始位置开始的总延迟时间（而不是从前一个动画开始时间的延迟量）。负值的作用相同，但顺序相反，最后一个元素首先开始。到目前为止，介绍的所有属性都是在页面加载时或之后播放的delay。一个常见的用例是在某个交互（如按钮单击或悬停）上播放动画。后时，它是基于前一个动画的总持续时间。的顶层 vars 对象中，它会等待所有子动画完成后再重复整个序列。如果你希望每个子动画独立重复（即每个子动画完成后立即重复），只需将。前缀后时，百分比是基于被插入动画的总持续时间。
2025-01-14 17:00:36
893
原创 不要在手写过度动画了，用上GSAP！（一）初步介绍
GSAP 提供了强大的动画能力，与 Vue 的结合非常简单。本文只是简单介绍。通过GSAP，您应该可以在 Vue 项目中轻松地实现复杂的动画效果。如果需要更高级的动画，建议参考GSAP 官方文档以获取更多信息。
2025-01-14 15:46:48
535
原创 JS开发者必知：URL API的正确用法
URL API是一个强大的接口，用于在 JavaScript 中构建、验证和操作URL。与手动解析或使用正则表达式相比，它更安全且更不容易出错。通过使用对象，你可以轻松构建查询字符串，而无需担心字符串拼接或特殊字符的编码问题。I 更进一步，支持通配符和命名占位符，使得解析和处理URL变得更加灵活，能够满足应用的多种需求。
2025-01-13 17:43:09
627
原创 JavaScript 闭包是什么？简单到看完就理解！
对于 JavaScript 开发者来说，理解闭包至关重要，因为闭包在现代 JavaScript 模式、框架和库中被广泛使用。闭包提供了一种在函数式编程中创建私有变量和维护状态的方法，使代码保持简洁且易于维护。请记住：闭包不仅仅是嵌套在另一个函数中的函数。它是一个能够访问外部作用域变量的函数，并且即使外部函数已执行完毕，仍能持续访问这些变量。
2024-11-08 15:30:57
445
原创 在 Sass 中使用 Mixins
Mixin此mixin有四个参数：水平和垂直偏移、模糊半径和阴影颜色。.card {.card {Sass中的Mixins是一款功能强大的工具，可让您的 CSS 更有条理、更易于重复使用和维护。通过消除冗余并提高一致性，mixins可帮助您编写更简洁、更高效的样式表。无论您是在开发小型项目还是大型应用程序，掌握mixins都会改善您的开发工作流程。因此，下次发现自己编写了重复的CSS时，请考虑将其转换为mixin。
2024-11-07 17:55:50
1413
原创 响应式排版：让文本适应所有屏幕
在网页设计中，响应式排版常常被布局考虑所掩盖，尽管文本可读性是用户体验的基础。在不同屏幕尺寸上正确使用排版可以提升你的设计并确保一致的可读性。下面深入介绍如何使排版具有响应性，并提供一些 CSS 技巧和工具，帮助文本在所有屏幕上完美适应。
2024-11-07 10:37:52
576
原创 优雅的使用TypeScript的建议
TypeScript 提供了多种实用类型（PartialPickOmitReadonly等），可让您的代码更简洁，并有助于避免重复定义。例如，如果您想要一个User具有所有可选属性的版本，请使用。这些实用类型简化了处理类型的变化，使您的代码更加通用。定义函数时，请务必指定返回类型。这不仅使代码更可预测，而且还可以帮助 TypeScript 在函数行为稍后发生变化时捕获错误。明确的返回类型可以减少歧义并有助于确保函数按预期运行。
2024-11-06 16:17:24
1104
原创 display:none后没有过度动画,transition未生效
属性，而不需要去修改 JavaScript 中的逻辑，这对于统一管理和维护项目的过渡动画效果非常方便。在前端开发中，当我们想要实现一个元素从隐藏到显示的过渡动画时，通常会遇到一个常见的问题，那就是。的组合能够保持良好的性能表现，避免了不必要的 DOM 操作，是实现平滑过渡动画的理想选择。时，元素不会出现在页面中，也不会占用空间，但仍然可以在元素上进行动画过渡。这两个 CSS 属性，既能实现隐藏与显示的效果，同时又能保持过渡动画的平滑过渡。时，元素会恢复显示，并且所有的过渡动画都能平滑地过渡。
2024-11-06 15:21:57
719
原创 如何压缩前端项目中 JS 的体积
混淆变量和函数名：通过将变量和函数名替换为更短、无意义的名称，可以减小文件体积。这样可以避免将整个 JavaScript 文件加载到页面中，只加载需要的模块，减小文件体积。在前端项目中，压缩 JavaScript 文件的体积可以提高网页加载速度和性能。使用动态导入：对于大型的 JavaScript 文件，可以使用动态导入来延迟加载文件。删除不必要的代码：检查 JavaScript 文件中是否存在不再使用的代码块、函数或变量。使用压缩版的第三方库：如果项目中使用了第三方库，通常这些库都提供了压缩版的文件。
2023-11-13 17:44:30
1195
原创 如何实现 promise.map，限制 promise 并发数
最终，我们得到一个包含处理结果的数组，并打印到控制台上。对象，当所有的异步操作都完成时，会解析为一个包含所有结果的数组。是否已经超过数组长度，如果是则表示所有元素已经处理完成，调用。最后，我们使用一个循环来初始化初始的并发操作，调用。是并发限制数，表示同时执行的异步操作的最大数量。函数是一个递归函数，用于处理下一个元素。是用于对每个数组元素进行处理的异步函数，如果仍有未处理的元素，会调用。函数将数组中的每个元素乘以2，并使用。在上面的示例中，我们传入了一个数组。来跟踪当前处理的元素索引，
2023-11-13 17:09:10
580
原创 前端设计模式（附便于理解的栗子❕）
设计模式是在软件开发中，针对常见问题的解决方案的经验总结。在前端开发中，设计模式可以帮助我们组织和管理代码，提高代码的可维护性和可扩展性。
2023-11-07 10:41:44
419
原创 Vue 3中的模板与渲染函数：选择正确的视图定义方式
摘要：Vue 3是一款流行的JavaScript框架，为前端开发者提供了多种方式来定义组件的视图结构。其中，模板和渲染函数是两种常用的视图定义方式。本文将深入探讨Vue 3中的模板和渲染函数的区别，帮助开发者选择适合自己项目的视图定义方式。
2023-11-07 09:53:53
359
原创 Vue 3编译器的新特性
Vue 3引入了一系列新的特性和优化，其中包括新的编译器。这些改进不仅提高了开发效率，还优化了应用程序的性能。让我们一起探索Vue 3编译器的一些主要新特性吧！💡。
2023-11-01 15:16:57
345
原创 Vue 2 vs Vue 3: 响应式系统的比较 ⚖️
总的来说，Vue 3 的 Proxy 带来了更强大的响应式系统，解决了 Vue 2 中的一些限制，但也需要考虑到其浏览器兼容性问题。在选择使用哪个版本时，需要根据项目的具体需求和目标用户的浏览器环境来做出决定。🤔🏆无论选择哪个版本，Vue.js 的响应式系统都将为你的项目带来强大的数据驱动视图更新，让你的应用更加动态和生动。🎉🎊。
2023-11-01 14:43:30
415
原创 Vue 3 中的 Composition API
需要注意的是，尽管 Composition API 带来了许多优点，但并不意味着传统的 Options API 已经过时或不再适用。在选择 API 风格时，应根据具体项目的需求和特点进行选择，也可以在不同的 API 风格之间灵活切换使用。
2023-10-31 15:59:50
254
原创 为什么在 Vue 的 v-for 循环中使用唯一的 key 可以提高性能？
在 Vue 的开发中，我们经常使用 v-for 指令来循环渲染列表。然而，在 v-for 循环中为子元素添加唯一的 key 属性能够带来性能上的改进。本文将解释为什么具有唯一 key 的子元素可以提高性能，并探讨其实现原理和优势。
2023-10-31 13:24:39
449
原创 vue高频面试题（收集）
MVVM 指的是 Model-View-ViewModel，是一种软件架构模式。在 MVVM 中，View 是用户界面，ViewModel 是视图模型，负责在 View 和 Model（数据层）之间进行通信和数据绑定。Vue.js 的架构与 MVVM 相关联。Vue.js 的视图部分即为 View，组件中的数据和状态即为 ViewModel。Vue.js 的响应式数据绑定系统使得 ViewModel 中的数据与 View 同步更新，帮助开发者更轻松地管理和维护用户界面。
2023-10-30 17:29:58
124
原创 如何选择Vue的$emit和props与provide/inject，以及事件总线（Event Bus）
而对于非父子组件之间的通信，可以考虑使用事件总线（Event Bus）机制。通过创建一个中央事件管理器，组件可以订阅和触发事件来实现数据交互。对于跨层级组件之间的数据传递，可以使用。根据组件之间的关系、应用规模和需求，我们可以选择适合的数据传递和通信方式。在Vue.js中，我们有多种选择来在组件之间传递数据和通信，包括使用。来触发自定义事件，并将数据传递给父组件进行处理，同时父组件通过。应用规模：对于较小的应用程序，简单的数据传递和通信可以选择使用。数据传递关系：对于父子组件之间的数据传递，推荐使用。
2023-10-30 17:16:49
618
原创 JS的事件委托（Event Delegation）
事件委托是一种在JavaScript中处理事件的技术。它利用了事件的冒泡机制，将事件处理程序绑定到它们的共同祖先元素上，而不是直接绑定到每个子元素上。当事件触发时，事件会从子元素一直冒泡到祖先元素，然后通过判断事件的目标元素来执行相应的事件处理程序。
2023-10-27 11:18:09
1530
原创 优化Vue项目架构和模块化：提升应用性能与开发效率
在项目中明确定义和管理模块之间的依赖关系，有利于维护代码的清晰性和可扩展性。通过使用依赖注入、模块化加载器等技术，我们可以更好地管理和解耦模块之间的依赖关系。这样可以减少代码的耦合性，使得代码更加灵活和可测试。
2023-10-27 10:31:47
1099
原创 IT行业就业趋势：哪些方向更受青睐？
近年来，IT行业的发展速度非常迅猛，各个领域都纷纷与IT技术进行紧密结合，这不仅带来了技术的突破和创新，也创造了大量的就业机会。对于求职者来说，选择适合自己的方向非常重要。本文将介绍目前IT行业中，哪些方向更受青睐，更有利于就业。
2023-10-26 13:42:47
228
原创 Vue缓存策略：提升应用性能与用户体验
在Vue.js应用程序开发中，缓存是一种常见的优化策略，它可以有效提升应用的性能和用户体验。Vue的缓存策略为我们提供了优化应用性能的强大工具，合理地使用它们可以帮助我们构建高效、快速响应的Vue应用程序。通过使用Vue的缓存机制，可以获得更好的性能和用户体验，提升应用的竞争力和用户满意度。这样，在路由切换时，被缓存的组件将保留在内存中，以便下次快速加载和渲染。然后，在路由切换时，被缓存的组件将保留在内存中，以便下次快速加载和渲染。👉包裹需要缓存的组件，可以在组件切换时将其保留在内存中，以便下次使用。
2023-10-26 13:33:57
607
原创 Vuex、localStorage和sessionStorage：如何选择合适的数据存储方式？
这样可以根据不同的数据类型和用途选择合适的存储方式，以满足不同的数据管理和存储需求。对于需要在浏览器关闭后仍然保留数据或在不同的浏览器会话中共享数据的需求，使用localStorage是合适的。它方便存储会话期间的临时数据，如购物车数据、临时输入数据等。如果你的应用有复杂的状态逻辑、需要在多个组件之间共享数据，或需要进行状态的异步操作和监听，那么使用。适用于需要在浏览器关闭后仍然保留数据的情况，或者在不同的浏览器会话中共享数据。只能存储字符串类型的数据，存储对象时需要进行JSON的字符串化和解析。
2023-10-26 13:21:35
589
原创 Vuex、localStorage和sessionStorage
sessionStorage也是浏览器提供的一种存储机制，但与localStorage不同，sessionStorage的数据在浏览器关闭后会被清除。如果你的应用有复杂的状态逻辑、需要在多个组件之间共享数据，或需要进行状态的异步操作和监听，那么使用Vuex是一个不错的选择。在实际开发中，可以将一些全局状态使用Vuex进行管理，将用户偏好设置存储到localStorage中，将临时会话数据存储到sessionStorage中。localStorage是Web浏览器提供的一种持久化存储数据的机制。
2023-10-26 13:14:01
302
原创 js 中同步任务，异步任务，微任务宏任务中的关系是什么
微任务和宏任务都是异步任务。微任务通常是指在一个宏任务执行完毕后立即执行的一个特殊的异步任务，例如 Promise 的 then 回调函数。宏任务的执行时机是在微任务队列执行完毕后再执行的。Event Loop 是一个负责监听异步任务的事件队列，一旦异步任务完成（如网络请求完成），Event Loop 就会将该回调函数加入到一个待执行的任务队列中，等待主线程空闲时取出执行。微任务是在当前宏任务执行完毕后立即执行的任务，而宏任务则通常是等待所有微任务执行完毕后再执行的任务。
2023-05-30 14:42:25
242
1
原创 JS 中的.bind是什么
在这个例子中，我们创建了一个新的函数 newX，它使用 obj.getX 函数并将其绑定到一个新的对象上（具有 x 值为 20）。在上面的例子中，.bind 方法将 add 函数绑定到 obj 上，并且在调用 add 函数时，它会自动将 5 和 10 作为第一个和第二个参数传递给原函数。.bind 方法可以将函数绑定到指定的对象上，从而改变函数内部的 this 值的指向。.bind 是 JavaScript 中的一个内置方法，可以将一个函数绑定到一个指定的对象上，从而改变该函数内部 this 的指向。
2023-05-22 17:54:55
2759
原创 JS的高阶函数
高阶函数是指接受一个或多个函数作为输入参数，并/或者返回一个新函数的函数，简单来说，就是操作函数的函数。在 JavaScript 中，高阶函数是一等公民，即它可以与基础类型一样被传递和使用。在函数式编程中，高阶函数是非常重要的概念，发挥了对代码的简洁性和可重用性的优化作用。以 map 方法为例，它接收一个函数作为参数，该函数将应用于原数组的每个元素上，并把处理后的结果组成一个新的数组返回。// 普通函数 function double(x) {
2023-05-22 17:35:14
678
原创 JS的事件驱动是什么意思?
✨JavaScript事件驱动是一种响应用户交互和Web页面生命周期的编程模型。事件驱动程序的核心思想是当用户执行某些操作（如单击按钮）或者页面经历某些生命周期阶段（如加载完成）时，JavaScript代码可以执行相应的操作以响应这些事件。简单来说就是通过监听事件来触发操作。
2023-05-22 16:49:10
899
原创 JavaScript中的事件循环机制是什么？
总之，事件循环机制是JavaScript异步编程模型的核心，它可以处理异步任务的执行，并保证任务的执行顺序。了解事件循环机制有助于开发者更好地理解异步编程的本质，并更好地处理JavaScript中的异步操作。当执行栈中的同步任务执行完成后，事件循环机制会检查任务队列中是否有异步任务，如果有，优先执行微任务，然后执行宏任务。任务队列中存放着异步任务和回调函数，事件循环机制从任务队列中依次取出任务，并执行这些任务。当遇到异步任务时，会被挂起并加入到任务队列中，继续执行执行栈中的同步任务。
2023-05-17 15:24:58
489
原创 这些面试题，不会还不知道吧！
响应式设计（Responsive Design）是一种网页设计技术，可以根据用户的设备分辨率和屏幕尺寸自动调整网页的布局和显示效果，以提供更好的用户体验。响应式设计以一份网页代码为基础，通过使用CSS3 Media Query和响应式网格系统等技术，在不同的设备上实现网页的自适应布局和变化效果。实现响应式设计需要注意以下几点：1.设计灵活的网页布局在设计响应式网页时，应当考虑到不同设备的屏幕尺寸和分辨率的差异，在设计网页布局时需要考虑如何优雅地适应各种设备。
2023-05-17 15:01:14
642
1
原创 vue常见面试题
Vue是一款流行的JavaScript前端框架，它是一个渐进式框架，可以用于构建单页应用程序（SPA）和复杂的用户界面。Vue的核心库只关注视图层(View)，它通过数据绑定、组件化和虚拟DOM等技术，使构建Web应用程序更加简单、灵活、高效和可维护。Vue和其他JS框架的区别主要体现在以下几个方面：声明式渲染：Vue使用声明式渲染代替常见的命令式渲染，使得编写模板更加高效、简单和直观。组件化：Vue的组件化架构让应用程序更加模块化和可复用，通过组合不同的组件，可以构建出丰富和复杂的用户界面。
2023-05-15 14:57:45
698
原创 JS深浅拷贝
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。的值存在堆内存中，而栈内存中只存储了该值的引用或指针。值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。进行拷贝时，会出现两种情况: 深拷贝和浅拷贝，而深拷贝和浅拷贝主要区别在于拷贝后的对象与原对象是否是同一对象（即是否是引用相同）
2023-05-15 13:53:05
365
原创 小程序uniapp利用canvas生成海报并可以保存至相册
⏳看到上方代码，先是利用canvas生成图片，将图片展示出来，cavans元素移除屏幕外，这里可能有疑问为什么要这么做？直接用canvas元素来展示图片不好吗？为什么要用canvas生成的图片来显示呢？⏳这么做的原因其实是因为canvas在抖音小程序，微信小程序部分真机中没有动画过渡，当弹窗关闭时比较突兀，当然如果需求中没有动画过渡的要求，就不需要多这一步。
2023-05-09 10:04:14
4529
原创 uniapp打包字节跳动小程序时，包体积变大突增
👑通过搜索产物代码来验证，就知道为什么体积突增了，微信小程序的产物中 sourcemap 是引用了独立 sourcemap 文件夹中的文件，而字节小程序的产物中，sourcemap 就是base64编码后内联形式存在产物文件中了。最近在工作中使用uniapp来进行开发页面，在使用uniapp执行打包字节跳动小程序命令时，发现同样的一套代码打包后，字节跳动小程序的包体积将近是微信小程序打包后的体积3倍多。这样解决后，通过 uni-app 开发字节小程序的时候，再也不会遇到预览，真机调试失败的问题了。
2022-10-24 14:22:55
2971
3
3d Model BMW M4
2023-11-03
Synergy windows+mac版本1.82
2020-11-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人