- 博客(59)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 如何压缩前端项目中 JS 的体积
混淆变量和函数名：通过将变量和函数名替换为更短、无意义的名称，可以减小文件体积。这样可以避免将整个 JavaScript 文件加载到页面中，只加载需要的模块，减小文件体积。在前端项目中，压缩 JavaScript 文件的体积可以提高网页加载速度和性能。使用动态导入：对于大型的 JavaScript 文件，可以使用动态导入来延迟加载文件。删除不必要的代码：检查 JavaScript 文件中是否存在不再使用的代码块、函数或变量。使用压缩版的第三方库：如果项目中使用了第三方库，通常这些库都提供了压缩版的文件。
2023-11-13 17:44:30
879
原创 如何实现 promise.map，限制 promise 并发数
最终，我们得到一个包含处理结果的数组，并打印到控制台上。对象，当所有的异步操作都完成时，会解析为一个包含所有结果的数组。是否已经超过数组长度，如果是则表示所有元素已经处理完成，调用。最后，我们使用一个循环来初始化初始的并发操作，调用。是并发限制数，表示同时执行的异步操作的最大数量。函数是一个递归函数，用于处理下一个元素。是用于对每个数组元素进行处理的异步函数，如果仍有未处理的元素，会调用。函数将数组中的每个元素乘以2，并使用。在上面的示例中，我们传入了一个数组。来跟踪当前处理的元素索引，
2023-11-13 17:09:10
484
原创 前端设计模式
设计模式是在软件开发中，针对常见问题的解决方案的经验总结。在前端开发中，设计模式可以帮助我们组织和管理代码，提高代码的可维护性和可扩展性。
2023-11-07 10:41:44
373
原创 Vue 3中的模板与渲染函数：选择正确的视图定义方式
摘要：Vue 3是一款流行的JavaScript框架，为前端开发者提供了多种方式来定义组件的视图结构。其中，模板和渲染函数是两种常用的视图定义方式。本文将深入探讨Vue 3中的模板和渲染函数的区别，帮助开发者选择适合自己项目的视图定义方式。
2023-11-07 09:53:53
211
原创 Vue 3编译器的新特性
Vue 3引入了一系列新的特性和优化，其中包括新的编译器。这些改进不仅提高了开发效率，还优化了应用程序的性能。让我们一起探索Vue 3编译器的一些主要新特性吧！💡。
2023-11-01 15:16:57
295
原创 Vue 2 vs Vue 3: 响应式系统的比较 ⚖️
总的来说，Vue 3 的 Proxy 带来了更强大的响应式系统，解决了 Vue 2 中的一些限制，但也需要考虑到其浏览器兼容性问题。在选择使用哪个版本时，需要根据项目的具体需求和目标用户的浏览器环境来做出决定。🤔🏆无论选择哪个版本，Vue.js 的响应式系统都将为你的项目带来强大的数据驱动视图更新，让你的应用更加动态和生动。🎉🎊。
2023-11-01 14:43:30
352
原创 Vue 3 中的 Composition API
需要注意的是，尽管 Composition API 带来了许多优点，但并不意味着传统的 Options API 已经过时或不再适用。在选择 API 风格时，应根据具体项目的需求和特点进行选择，也可以在不同的 API 风格之间灵活切换使用。
2023-10-31 15:59:50
210
原创 为什么在 Vue 的 v-for 循环中使用唯一的 key 可以提高性能？
在 Vue 的开发中，我们经常使用 v-for 指令来循环渲染列表。然而，在 v-for 循环中为子元素添加唯一的 key 属性能够带来性能上的改进。本文将解释为什么具有唯一 key 的子元素可以提高性能，并探讨其实现原理和优势。
2023-10-31 13:24:39
344
原创 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
105
原创 如何选择Vue的$emit和props与provide/inject，以及事件总线（Event Bus）
而对于非父子组件之间的通信，可以考虑使用事件总线（Event Bus）机制。通过创建一个中央事件管理器，组件可以订阅和触发事件来实现数据交互。对于跨层级组件之间的数据传递，可以使用。根据组件之间的关系、应用规模和需求，我们可以选择适合的数据传递和通信方式。在Vue.js中，我们有多种选择来在组件之间传递数据和通信，包括使用。来触发自定义事件，并将数据传递给父组件进行处理，同时父组件通过。应用规模：对于较小的应用程序，简单的数据传递和通信可以选择使用。数据传递关系：对于父子组件之间的数据传递，推荐使用。
2023-10-30 17:16:49
467
原创 JS的事件委托（Event Delegation）
事件委托是一种在JavaScript中处理事件的技术。它利用了事件的冒泡机制，将事件处理程序绑定到它们的共同祖先元素上，而不是直接绑定到每个子元素上。当事件触发时，事件会从子元素一直冒泡到祖先元素，然后通过判断事件的目标元素来执行相应的事件处理程序。
2023-10-27 11:18:09
1419
原创 优化Vue项目架构和模块化：提升应用性能与开发效率
在项目中明确定义和管理模块之间的依赖关系，有利于维护代码的清晰性和可扩展性。通过使用依赖注入、模块化加载器等技术，我们可以更好地管理和解耦模块之间的依赖关系。这样可以减少代码的耦合性，使得代码更加灵活和可测试。
2023-10-27 10:31:47
892
原创 IT行业就业趋势：哪些方向更受青睐？
近年来，IT行业的发展速度非常迅猛，各个领域都纷纷与IT技术进行紧密结合，这不仅带来了技术的突破和创新，也创造了大量的就业机会。对于求职者来说，选择适合自己的方向非常重要。本文将介绍目前IT行业中，哪些方向更受青睐，更有利于就业。
2023-10-26 13:42:47
202
原创 Vue缓存策略：提升应用性能与用户体验
在Vue.js应用程序开发中，缓存是一种常见的优化策略，它可以有效提升应用的性能和用户体验。Vue的缓存策略为我们提供了优化应用性能的强大工具，合理地使用它们可以帮助我们构建高效、快速响应的Vue应用程序。通过使用Vue的缓存机制，可以获得更好的性能和用户体验，提升应用的竞争力和用户满意度。这样，在路由切换时，被缓存的组件将保留在内存中，以便下次快速加载和渲染。然后，在路由切换时，被缓存的组件将保留在内存中，以便下次快速加载和渲染。👉包裹需要缓存的组件，可以在组件切换时将其保留在内存中，以便下次使用。
2023-10-26 13:33:57
494
原创 Vuex、localStorage和sessionStorage：如何选择合适的数据存储方式？
这样可以根据不同的数据类型和用途选择合适的存储方式，以满足不同的数据管理和存储需求。对于需要在浏览器关闭后仍然保留数据或在不同的浏览器会话中共享数据的需求，使用localStorage是合适的。它方便存储会话期间的临时数据，如购物车数据、临时输入数据等。如果你的应用有复杂的状态逻辑、需要在多个组件之间共享数据，或需要进行状态的异步操作和监听，那么使用。适用于需要在浏览器关闭后仍然保留数据的情况，或者在不同的浏览器会话中共享数据。只能存储字符串类型的数据，存储对象时需要进行JSON的字符串化和解析。
2023-10-26 13:21:35
466
原创 Vuex、localStorage和sessionStorage
sessionStorage也是浏览器提供的一种存储机制，但与localStorage不同，sessionStorage的数据在浏览器关闭后会被清除。如果你的应用有复杂的状态逻辑、需要在多个组件之间共享数据，或需要进行状态的异步操作和监听，那么使用Vuex是一个不错的选择。在实际开发中，可以将一些全局状态使用Vuex进行管理，将用户偏好设置存储到localStorage中，将临时会话数据存储到sessionStorage中。localStorage是Web浏览器提供的一种持久化存储数据的机制。
2023-10-26 13:14:01
264
原创 js 中同步任务，异步任务，微任务宏任务中的关系是什么
微任务和宏任务都是异步任务。微任务通常是指在一个宏任务执行完毕后立即执行的一个特殊的异步任务，例如 Promise 的 then 回调函数。宏任务的执行时机是在微任务队列执行完毕后再执行的。Event Loop 是一个负责监听异步任务的事件队列，一旦异步任务完成（如网络请求完成），Event Loop 就会将该回调函数加入到一个待执行的任务队列中，等待主线程空闲时取出执行。微任务是在当前宏任务执行完毕后立即执行的任务，而宏任务则通常是等待所有微任务执行完毕后再执行的任务。
2023-05-30 14:42:25
203
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
2554
原创 JS的高阶函数
高阶函数是指接受一个或多个函数作为输入参数，并/或者返回一个新函数的函数，简单来说，就是操作函数的函数。在 JavaScript 中，高阶函数是一等公民，即它可以与基础类型一样被传递和使用。在函数式编程中，高阶函数是非常重要的概念，发挥了对代码的简洁性和可重用性的优化作用。以 map 方法为例，它接收一个函数作为参数，该函数将应用于原数组的每个元素上，并把处理后的结果组成一个新的数组返回。// 普通函数 function double(x) {
2023-05-22 17:35:14
649
原创 JS的事件驱动是什么意思?
✨JavaScript事件驱动是一种响应用户交互和Web页面生命周期的编程模型。事件驱动程序的核心思想是当用户执行某些操作（如单击按钮）或者页面经历某些生命周期阶段（如加载完成）时，JavaScript代码可以执行相应的操作以响应这些事件。简单来说就是通过监听事件来触发操作。
2023-05-22 16:49:10
824
原创 JavaScript中的事件循环机制是什么？
总之，事件循环机制是JavaScript异步编程模型的核心，它可以处理异步任务的执行，并保证任务的执行顺序。了解事件循环机制有助于开发者更好地理解异步编程的本质，并更好地处理JavaScript中的异步操作。当执行栈中的同步任务执行完成后，事件循环机制会检查任务队列中是否有异步任务，如果有，优先执行微任务，然后执行宏任务。任务队列中存放着异步任务和回调函数，事件循环机制从任务队列中依次取出任务，并执行这些任务。当遇到异步任务时，会被挂起并加入到任务队列中，继续执行执行栈中的同步任务。
2023-05-17 15:24:58
458
原创 这些面试题，不会还不知道吧！
响应式设计（Responsive Design）是一种网页设计技术，可以根据用户的设备分辨率和屏幕尺寸自动调整网页的布局和显示效果，以提供更好的用户体验。响应式设计以一份网页代码为基础，通过使用CSS3 Media Query和响应式网格系统等技术，在不同的设备上实现网页的自适应布局和变化效果。实现响应式设计需要注意以下几点：1.设计灵活的网页布局在设计响应式网页时，应当考虑到不同设备的屏幕尺寸和分辨率的差异，在设计网页布局时需要考虑如何优雅地适应各种设备。
2023-05-17 15:01:14
590
原创 vue常见面试题
Vue是一款流行的JavaScript前端框架，它是一个渐进式框架，可以用于构建单页应用程序（SPA）和复杂的用户界面。Vue的核心库只关注视图层(View)，它通过数据绑定、组件化和虚拟DOM等技术，使构建Web应用程序更加简单、灵活、高效和可维护。Vue和其他JS框架的区别主要体现在以下几个方面：声明式渲染：Vue使用声明式渲染代替常见的命令式渲染，使得编写模板更加高效、简单和直观。组件化：Vue的组件化架构让应用程序更加模块化和可复用，通过组合不同的组件，可以构建出丰富和复杂的用户界面。
2023-05-15 14:57:45
682
原创 JS深浅拷贝
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。的值存在堆内存中，而栈内存中只存储了该值的引用或指针。值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。进行拷贝时，会出现两种情况: 深拷贝和浅拷贝，而深拷贝和浅拷贝主要区别在于拷贝后的对象与原对象是否是同一对象（即是否是引用相同）
2023-05-15 13:53:05
342
原创 小程序uniapp利用canvas生成海报并可以保存至相册
⏳看到上方代码，先是利用canvas生成图片，将图片展示出来，cavans元素移除屏幕外，这里可能有疑问为什么要这么做？直接用canvas元素来展示图片不好吗？为什么要用canvas生成的图片来显示呢？⏳这么做的原因其实是因为canvas在抖音小程序，微信小程序部分真机中没有动画过渡，当弹窗关闭时比较突兀，当然如果需求中没有动画过渡的要求，就不需要多这一步。
2023-05-09 10:04:14
4247
原创 uniapp打包字节跳动小程序时，包体积变大突增
👑通过搜索产物代码来验证，就知道为什么体积突增了，微信小程序的产物中 sourcemap 是引用了独立 sourcemap 文件夹中的文件，而字节小程序的产物中，sourcemap 就是base64编码后内联形式存在产物文件中了。最近在工作中使用uniapp来进行开发页面，在使用uniapp执行打包字节跳动小程序命令时，发现同样的一套代码打包后，字节跳动小程序的包体积将近是微信小程序打包后的体积3倍多。这样解决后，通过 uni-app 开发字节小程序的时候，再也不会遇到预览，真机调试失败的问题了。
2022-10-24 14:22:55
2723
3
原创 css处理transition 碰上display会无过度动画
css处理transition 碰上display会无过度动画相信各位老铁在实现元素隐藏到显示的过度动画时，都遇到过此问题，在此记录一个解决方法，方便自己日后使用处理过度动画无效当然可以用js写，但是感觉用js写第一是没有直接用css3方便又节省性能，第二是时间变量不好统一管理，例如初始动画时间为2s，后面项目需要动画过度时间改成0.2s，还得过去找js更改时间，很麻烦。 /*需要opacity:0和visibility:hidden实现隐藏元素*/ #bg{ /*隐藏状态下*/
2022-05-26 10:04:54
433
原创 js常用纪录
正则表达式// emoji表情正则/[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g // 特殊字符正则/[^\u4E00-\u9FA5A-Za-z0-9]/g//手机号限制/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[
2022-02-16 11:04:21
202
原创 JS时间戳转为格式日期
在此记录一个经常用到的函数，使用JS将时间戳转换为日期格式，此函数类似于PHP的date函数 let date1=date('Y-m-d','1587205098'),//很方便的将时间戳转换成了2020-4-18 date2=date('Y-m-d H:i:s','1587205098');//得到的结果是2020-4-18 18:18:18 console.log(date1)/...
2020-04-28 15:35:49
1062
原创 JS保留小数点后两位
在此记录一个函数，在不能使用toFixed情况下需将保留小数点后两位 //制保留2位小数，如：2，会在2后面补上00.即2.00 function toDecimal2(x) { var f = parseFloat(x); if (isNaN(f)) { return false; } var f = Math.ro......
2020-04-23 15:06:00
310
原创 微信小程序与支付宝小程序不同
request1.微信小程序的请求方式是wx.request 支付宝为my.request2.微信请求头header: { 'Content-type': 'application/x-www-form-urlencoded' },支付宝请求头headers: { 'content-type': 'application/x-www-form-urlencoded' },这里看起来没区...
2020-02-26 10:28:36
567
1
3d Model BMW M4
2023-11-03
Synergy windows+mac版本1.82
2020-11-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人