- 博客(90)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 深入浅出详解Intersection Observer交叉观察器 API
过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。然而，随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测：在页面滚动时“懒加载”图像或其他内容。实现“无限滚动”网站，在滚动过程中加载和显示越来越多的内容，这样用户就不必翻页了。报告广告的可见度，以便计算广告收入。根据用户是否能看到结果来决定是否执行任务或动画进程。视频的播放和暂停。
2024-09-29 09:00:00
899
原创 如何在uni-app中使用原子化 CSS——UnoCSS
UnoCSS是一个即时的原子化 CSS 引擎，旨在灵活和可扩展。核心是不拘一格的，所有的 CSS 工具类都是通过预设提供的。那么，UnoCSS 与其他框架的有何不同之处呢？UnoCSS 由 Windi CSS 团队的成员创建，灵感来源于我们在 Windi CSS 中的工作。虽然 Windi CSS 在 2023 年 3 月停止了维护，但您可以将 UnoCSS 看作是 Windi CSS 的"精神继承者"。
2024-09-17 15:00:17
587
原创 Webpack和Vite对比，Webpack会被Vite取代吗？
Vite通过利用ES模块的原生浏览器支持，使用基于浏览器原生ES模块解析的开发服务器，从而实现了快速的冷启动和热模块替换(HMR)，因此启动速度比Webpack快。Webpack具有强大的代码分割和模块化的功能，可以将代码拆分成更小的块，实现按需加载，从而减小初始加载的文件大小。Vite使用ES模块进行单文件构建，构建产物更轻量，适用于现代的单页应用，特别是基于Vue或React框架的项目。Vite利用ES模块的原生支持，避免了打包过程中的大量依赖解析和构建，因此在打包速度上也比Webpack更快。
2024-09-03 11:12:46
177
原创 CSS行元素的截断样式box-decoration-break属性，有点儿意思！
在CSS中，行元素默认情况下，行内元素不会独占一行，而是在一行内根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。行内元素不能包含块级元素，只能包含其他行内元素或文本。行内元素可以设置水平方向的边距（margin）和内边距（padding），但不会影响到其他元素的布局。常用行内元素：a、span、i、em、strong、img等。
2024-09-03 11:11:53
675
原创 3D渐变的轮播图效果，有点儿意思！
在Web开发中，轮播图（Carousel）是一种非常常见的功能，用于展示图片或内容，通过自动或手动的方式切换不同的视图，在网页设计中扮演着重要的角色。吸引注意力：轮播图通常位于页面的显眼位置，如首页的顶部或中心区域，能够立即吸引访问者的注意力。通过展示精美、引人注目的图片或视频，轮播图能够激发访问者的兴趣，促使他们进一步探索网站的内容。展示重要信息：轮播图是一种高效展示重要信息或促销活动的方式。商家可以在轮播图中展示最新的产品、优惠活动、重要公告等，以吸引潜在客户的注意并促进销售。
2024-08-26 09:57:43
854
原创 Wot Design Uni：一个高颜值、轻量化的uni-app组件库，uni-app生态的新宠
wot-design-uni组件库基于vue3+Typescript构建，参照wot design的设计规范进行开发，提供70+高质量组件，支持暗黑模式、国际化和自定义主题，旨在给开发者提供统一的UI交互，同时提高研发的开发效率。特性：🎯 多平台覆盖，支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等.🚀 70+ 个高质量组件，覆盖移动端主流场景.💪 使用 Typescript 构建，提供良好的组件类型系统.🌍 支持国际化，内置 6 种语言包.📖 提供丰富的文档和组件示例.
2024-08-23 00:48:07
1030
原创 CSS+JS实现一个鼠标移动的高亮边框效果
我们再在 .card::before 加上一个 transform属性，同时在 .card 上加上 overflow: hidden属性，观察浏览器，神奇的效果出现了！想要实现高亮的效果，我们还需要在 .card 和 .inner 之间再插入一层，这一层是我们实现高亮的关键！假如图中的小圆圈为鼠标位置，当鼠标移动到此位置时，只需要计算把每张卡片中间层的中心偏移到鼠标的位置即可。在Windows系统里有一个很棒的细节效果，元素的渐变高亮边框是可以感知鼠标的，边框的高亮部分会跟随鼠标的移动而移动。
2024-08-19 18:49:13
708
原创 Vue如何给计算属性computed传参的思考，看完就明白了！
我们仔细分析一下，其实这个需求就是希望为每一个数据参数对应一个计算属性computed，当每一行数据不变时，就返回这个没有改变的计算属性。观察浏览器的打印日志发现，每次改变一个商品的数量时，其它商品的数量虽然没有变化，但是也会在计算一次。还有，当浏览器视口宽度高度变化时，我们并没有改变商品的数量，同样的也会每次触发计算，这个方法会被不断反复的调用。当计算量大且复杂时，这种情况是相当耗性能的，并且体验也不好。上图可以看到，哪一行数据变化了就重新计算哪一行，数据不变的行不进行计算，完美的达到了我们想要的结果。
2024-08-19 10:12:25
1734
原创 2024前端面试题集（含答案）之Vue篇（二）
Vue 生命周期的 created()钩子函数进行的 DOM 操作一定要放在 Vue.nextTick()的回调函数中在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM 结构的时候，这个操作应该放在 Vue.nextTick()的回调函数中。在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。
2024-08-06 14:19:33
622
原创 2024前端面试题集（含答案）之Vue篇
1、每个组件都是 Vue 的实例。2、组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他。3、组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成全局数据的污染，导致一个变了全都变。
2024-08-06 09:34:54
704
原创 二次开发必备：开源在线海报图片设计器——poster-design
poster-design是一个最酷的开源在线海报图片设计器，漂亮易用且功能强大。它适用于多种场景：海报图片生成、电商分享图、文章长图、视频/公众号封面等，无需下载软件即可轻松实现创意、迅速完成排版。使用Vue3 、Vite5 、Vuex 、ElementPlus开发，丝滑的页面操作体验，丰富的交互细节，基础功能完善，采用服务端生成图片，确保多端出图统一性，支持各种 HTML5 特性。技术栈：前端：Vue3 、Vite2 、Vuex 、ElementPlus。
2024-07-30 13:38:07
380
原创 Driver.js，Web应用的老司机，一个强大的产品导览插件
Driver.js是一个轻量级的Javascript类库，可用于产品导览、亮点、上下文帮助等，从而一步一步地导览用户快速熟悉产品功能。强大的、高度可定制的原生JavaScript引擎，用于导览用户关注页面重点内容。无外部依赖，轻量级，支持所有主流浏览器，并且高度可定制。特点：支持所有主流浏览器：包括Chrome，IE9+、Safari、Firefox、Opera等。可运行于移动手机端：除了电脑、平板，还适配手机端。高度可定制：拥有强大的API，可以根据您的需求进行任意使用。
2024-07-30 09:12:30
1038
原创 分享一个好用的音频解码工具——音乐解锁
比如，kgm转MP3的方法想必大家在网上也寻找了各种解决方法，方法也不少，但大多数都是不好用或者需要充米。音乐解锁工具可以直接在线转换，它的界面非常的简洁，并且功能比较强大，目前支持kgm、ncm等音乐的格式转换。步骤3：然后网站下方转换列表就会出现已经转换完成的文件，这时直接点击【下载】按钮即可下载保存到本地文件夹。步骤1：打开音乐解锁的网站，就可以直接进入到文件转换的页面，我们将需要转换的文件拖入网站的文件框。步骤2：文件添加成功后，会在页面中有所展示，系统便会自动进行转换，不需要任何其他操作。
2024-07-26 10:07:48
4649
原创 CSS实现图片边框酷炫效果
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
2024-07-26 08:00:00
1954
12
原创 学会这12个JavaScript实用技巧，做一个优雅的前端人
JavaScript 最初是为了给网站添加一些功能而被设计出来的简单语言。但是时至今日，它无处不在，而且还更加复杂了。随着 Web 应用程序越来越复杂，JavaScript 也发展得越来越快。编写简洁、可读且可维护的 JavaScript 程序不再像以前那么容易了。这些技巧可以帮助您更高效地编写和维护代码，助力高效开发。
2024-07-25 23:30:19
1177
原创 用CSS实现视差滚动酷炫交互动效，高级感满满！
视差滚动是指多层背景网页元素在滚动时呈现出不同的滚动速度，可以让页面元素以不同的速度移动，从而创造出一种视觉上的层次感，形成立体的运动效果，给用户一种仿佛置身于三维空间的感觉，带来非常出色的视觉体验。网页解析成：背景层、内容层、悬浮层。当滚动鼠标滑轮的时候，各个图层以不同的速度移动，形成视觉差的效果。
2024-06-30 08:30:00
611
1
原创 一个reduce还能玩出这么多花样儿？中高级前端都知道的reduce函数高级用法
reduce 是数组的归并方法，与forEach、map、filter等迭代方法一样都会对数组每一项进行遍历，但是reduce可同时将前面数组项遍历产生的结果与当前遍历项进行运算，这一点是其它迭代方法无法企及的。reduce除了以上介绍的使用场景外，还有很多其它使用场景，有兴趣的朋友可以研究一下。
2024-06-27 08:30:00
888
原创 详解ES6中的类、对象和类的继承
在ES6（ECMAScript 2015）之前，JavaScript 并没有像其他面向对象的编程语言那样的类（class）的概念。相反，它使用了一种基于原型的继承模型来实现面向对象编程。然而，这种模型对于许多开发者来说可能比较难以理解，特别是在与更传统的面向对象语言（如Java或C++）相比较时。为了简化面向对象的编程范式并提供更直观的代码组织方式，ES6引入了类的概念。虽然JavaScript的类实际上是基于原型的继承和构造函数的语法糖，但它提供了一种更加清晰、简洁的方式来定义对象的行为和结构。
2024-06-25 09:08:41
1113
原创 ES7都增加了哪些新特性？了解JavaScript的新特性与语法演变
ES7（ECMAScript 2016）是JavaScript语言的一个重要版本更新，它们引入了一些新特性和语法改进，使得JavaScript编程更加高效、灵活和易于理解。
2024-06-25 08:00:00
373
原创 面试官：前端加密怎么做？这，这，这不是后端的活儿吗？
大部分时候，为了确保数据的安全性，会将一些敏感数据(如手机号、身份证号、银行卡号等)发送到服务端，然后再服务端进行加密。前端加密并不能确保数据的安全性，因为客户端是暴露给用户的，任何混淆或加密措施都可能被绕过（前端加密防君子不放小人）。正确的做法是在保证数据传输过程中通过HTTPS等协议加密，并在服务端进行必要的安全校验和加密处理。
2024-06-09 22:34:12
878
原创 面试官：前端实现图片懒加载怎么做？这不是撞我怀里了嘛！
注意事项兼容性：不同的浏览器和设备对懒加载的支持程度不同，需要确保所选用的懒加载方案具有良好的兼容性。用户体验：懒加载不应该影响用户的正常浏览和操作。例如，在图片加载过程中，可以显示占位符或加载提示，以增加用户的等待体验。SEO优化：虽然懒加载可能会对SEO造成一定影响，但可以通过合理的策略来优化。例如，确保关键内容和链接在初始加载时即可被搜索引擎索引。应用场景长页面和图片密集型网站：如新闻网站、社交媒体、电商网站等，这些网站通常包含大量的图片和长页面，采用懒加载可以显著提高页面性能和用户体验。
2024-06-09 22:22:00
892
原创 深入剖析JavaScript中的this（下）
定义在全局作用域中的普通函数中的this指向window对象: 作为函数调用，作为内部函数调用事件处理函数中的this指向触发事件的标签元素 DOM对象绑定事件。构造函数中的this指向当前正在创建的对象（严格模式下必须使用new）作为构造函数去调用，即new的时候，指向构造函数创建的那个实例。对象方法中的this指向：在使用对象方法调用方式时，this被自然绑定到该对象。
2024-04-05 14:26:17
815
1
原创 深入剖析JavaScript中的this（上）
在Javascript中，this 关键字是一个非常重要的概念，this这个关键字可以说是很常见也用的很多，说它简单也很简单，说它难也很难。我们经常会用到this，也经常会因为this头疼，是一个经常被误解和误用的概念，为什么呢，因为有时候我们不知道this到底指的是什么？怎么用？
2024-04-03 08:00:00
872
原创 BetterScroll2.0：完美的移动端滚动组件
在日常开发中，触摸滑动成为移动应用程序中不可或缺的交互方式。为了提供流畅、自然和高效的滑动体验，许多开发者选择使用开源库来简化开发过程。其中，BetterScroll 因其强大的功能和灵活的定制能力而备受关注。本文将深入探讨 BetterScroll 的工作原理、功能特点以及如何将其应用于实际项目中。
2024-02-27 10:52:01
2509
原创 绝了绝了！员工因Bug事故被强制要求归还年终奖，否则就收滞纳金且免费开除
消息一出，就引发了大量网友的关注和评论，有部分网友为位被要求退还年终奖的员工义愤填膺，也有部分网友疑惑该公司的做法是否合法合规，也有网友支招，不退不接受处罚，书面表达不满，保留邮件，更改账号密码，给总裁办、人力资源、直接主管写，留好写了的证据，按时上班打卡，然后等他开你然后去仲裁。1、编写清晰的代码：编写易于理解和维护的代码可以减少bug的数量。这可以帮助你更早地发现和修复bug，因为你可以频繁地构建和测试你的代码。这些工具可以帮助你检查代码的质量，找出潜在的问题，并提供有关如何修复它们的建议。
2024-02-27 08:00:00
410
翻译 扶我起来，我还能学！Vue3.4 发布了——更快、更强、更好用
在前端领域，Vue.js 总是以其优雅和高效的编码方式，受到开发者的青睐。前几天，Vue.js 迎来了一个重要更新——Vue 3.4 版本。这次更新不仅带来了性能上的飞跃，还引入了多项新特性，进一步优化了开发体验。在本文中，我们介绍一下 Vue 3.4 带来了哪些革新和提升！
2024-02-05 09:47:39
392
原创 详解JavaScript异步编程之Promise（二）
多个异步并行，且相互没有关联，使用Promise.allSettled()；多个异步并行，相互之间有依赖，使用Promise.all()；多个异步并行，最终结果根据第一个出结果（不论成功还是失败）的 promise 而定，使用Promise.race()；多个异步并行，最终结果根据第一个成功的 promise 而定，使用Promise.any()。
2024-02-05 09:37:17
925
原创 Javascript事件循环模型之同步和异步
众所周知Javascript是⼀⻔单线程语⾔，这也就决定了在Javascript中默认情况下同一个时间只能做一件事情，这个特性就造成了js的一些局限性，比如我们的页面需要发送HTTP请求从服务器获取数据时，就会出现等待数据返回之前页面假死的效果。由于js在同一个时间只能做一件事，就导致了页面的渲染和事件的执行在这个过程中无法同时进行。实际上，我们在开发中并没有遇见过这种情况，这是为什么呢？为什么js是单线程的呢？
2024-01-25 11:30:25
1080
原创 超详细的Javascript事件循环模型之JS运行机制
在上文《超详细的Javascript事件循环模型之同步和异步》中我们知道，JavaScript的运⾏顺序就是完全单线程的异步模型，也就是说，在同一个时间只能执行一个任务。这个任务通常是由事件循环机制控制的。当代码遇到异步操作时（如定时器、Ajax 请求等），它会将这个操作放入任务队列中，并继续执行下面的代码。当当前任务执行完毕后，事件循环会从任务队列中取出下一个任务并执行。也就是同步在前，异步在后。所有的异步任务都要等待当前的同步任务执⾏完毕之后才能执⾏。那么为什么是这样的执行顺序呢？
2024-01-25 11:30:10
1041
原创 详解JavaScript异步编程之Promise
JavaScript是⼀⻔典型的异步编程脚本语⾔，在编程过程中会⼤量的出现异步代码的编写，在JS的整个发展历程中，对异步编程的处理⽅式经历了很多个时代，其中最典型也是现今使⽤最⼴泛的时代，就是Promise对象处理异步编程的时代。
2024-01-24 20:09:57
1057
转载 Promise的链式调用
实际开发中，我们经常需要同时请求多个接口。比如说：在请求完接口1的数据data1之后，需要根据data1的数据，继续请求接口 2，获取data2；然后根据data2的数据，继续请求接口 3。换而言之，现在有三个网络请求，请求 2 必须依赖请求 1 的结果，请求 3 必须依赖请求 2 的结果，如果按照往常的写法，会有三层回调，会陷入“回调地狱”。这种场景其实就是接口的多层嵌套调用。有了 Promise 之后，我们可以把多层嵌套调用按照线性的方式进行书写，非常优雅。
2024-01-22 08:00:00
931
原创 Vue-Clipboard3：轻松实现复制到粘贴板功能
在现代Web开发中，剪贴板操作变得越来越重要。用户经常需要在浏览器中进行复制、粘贴等操作，而这些操作可以通过JavaScript实现。Vue-Clipboard3是一个基于Clipboard.js的粘贴板操作库，使用 Vue-Clipboard3 可以在Vue 3（composition api）中轻松复制到粘贴板，它使得在Vue3应用程序中进行粘贴板操作变得更加简单和方便。
2024-01-20 20:36:41
4840
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人