- 博客(145)
- 收藏
- 关注
RSS订阅原创 Vue3实现mqtt的订阅与发布
MQTT（Message Queuing Telemetry Transport）是一种轻量级的、基于发布/订阅模式的通信协议，通常用于连接物联网设备和应用程序之间的通信。它最初由IBM开发，现在由OASIS（Organization for the Advancement of Structured Information Standards）进行标准化。MQTT的工作原理：它采用发布/订阅模式，其中设备（称为客户端）可以发布消息到特定的主题（topics），而其他设备可以订阅这些主题以接收消息。
2024-09-30 15:41:58
441
原创 File 和 Blob两个对象有什么不同
Blob 是纯粹的二进制数据，它可以存储任何类型的数据，但不具有文件的元数据（如文件名、最后修改时间等）。File 是 Blob 的子类，File 对象除了具有 Blob 的所有属性和方法之外，还包含文件的元数据，如文件名和修改日期。可以将 File 对象看作是带有文件信息的 Blob。Blob 更加通用，而 File 更专注于与文件系统的交互// true。
2024-09-29 16:56:54
858
原创 img和background-image区别及使用场景
需要区分不同场景选择合适的方式去渲染图像一般来说，重要的图像或者需要优先加载的图片最好用img，优先级次之的图片采用background-image。img标签有利于SEO，img标签语义化明确。img有利于图像保存。
2024-09-20 18:11:51
296
原创 WebRTC的了解与使用
WebRTC（Web 实时通信）是一种可以在浏览器中实现点对点（Peer-to-Peer）通信的技术标准和开源项目。它使得浏览器和移动应用能够进行实时语音、视频和数据交换，无需安装插件或第三方插件。WebRTC 提供了一组 API，使开发者可以轻松地构建各种实时通信应用程序，如视频会议、语音电话、文件共享等。
2024-09-14 15:40:58
307
原创 vue3中provide和inject详解
在 Vue 3 中 组件的实例方法和属性的继承不再依赖于原型链，而是引入了Composition API，它采用了一种不同的方式来组织组件的代码和状态。组件的选项被重构为一个配置对象，其中 setup 函数用于定义组件的响应式数据、计算属性、方法等。这些选项不再依赖于原型链，而是直接导出给组件实例。provide和inject也可以传递响应式数据和方法，但是传递响应式数据的时候，官网做了一个推荐使用：当提供 / 注入响应式的数据时，**建议尽可能将任何对响应式状态的变更都保持在供给方组件中。
2024-09-06 20:30:00
2020
原创 js实现页面全屏展示
这个方法会尝试让当前处于全屏模式的元素退出全屏。用户手动按下ESC键，也可以退出全屏键。方法，可以使得这个节点全屏，全屏模式的具体实现可能因浏览器而异，所以要做不同浏览器处理。退出全屏模式可以通过调用。
2024-08-30 17:06:55
417
原创 如何终止一个 Promise 继续执行
一旦一个 Promise 被创建，它就会开始执行，并且不能被直接终止。但是，可以采取一些方法来间接地"终止"一个 Promise 的执行，或者至少是阻止它执行的结果继续传递。如果 Promise 是由某些可取消的操作（如 HTTP 请求）创建的，可以在操作对象上调用取消方法。但是可以控制 Promise 的结果如何被处理，或者在某些条件下停止等待 Promise 的结果。如果想要等待所有的 Promise 完成，不管它们是解决还是拒绝，然后根据所有结果做决定，可以使用。可以在 Promise 的链中使用。
2024-08-25 23:41:32
667
原创 SVG中的paint-order属性实现文字描边
如果要改变绘制顺序，也相当于改变层级，让填充覆盖在描边上面，可以使用paint-order属性。看着变细了，这是因为描边是居中的，由于先绘制的描边，后绘制的填充颜色（后绘制的在上面），所以描边被填充盖住了一半。相比SVG最大的好处就是，排版更加灵活，比如文本自动换行，SVG就无法直接实现，CSS就非常容易了。在普通HTML中，可以用-webkit-text-stroke来实现文字的描边效果，例如。以往通常使用绝对定位叠加的方式，手动让描边的那一层位于底部（可以用伪元素代替），就像这样。
2024-08-18 22:37:20
678
原创 了解package.json的配置
如果你有少数不上传的文件，那可以创建一个.npmignore 文件（类似于.gitignore，但该文件不会上传 npm），去掉你不需要上传的文件，其余都上传。有些项目所以来的包跟 npm 的版本或者 node 版本有要求，不符合版本的时候项目经常启动不起来，该文件只是说明该项目所需要的 node 版本，并非起到限制作用。该字段不能设置为空，它和版本号组成唯一的标识来代表整个项目，字母不能大写，可以使用-，_符号，如果需要在 npm 平台发布，需要保证你的 name 在平台是唯一的。开发阶段需要的依赖包。
2024-08-11 21:56:10
527
原创 vue3使用clipboard实现复制功能
data-clipboard-text中为复制内容，class名必须与new Clipboard()中的class名相同。阻止冒泡@click.stop无法使用clipboard进行复制，改为使用其他方法实现。
2024-08-05 09:32:07
283
原创 什么是埋点？前端如何埋点？
埋点” 是一种在应用程序或网站中插入代码的技术，用于收集用户行为数据或特定事件的信息。它是用于分析和监控用户行为、应用性能和其他关键指标的一种常用方法。通过在特定位置插入代码或调用特定的 API，开发人员可以捕获有关用户如何与应用程序或网站交互的数据。通过埋点，可以收集以下类型的数据用户行为数据：例如页面浏览量、点击事件、表单提交、购买行为等。应用性能数据：例如页面加载时间、API 调用延迟、错误日志等。设备和环境数据：例如用户设备类型、操作系统、浏览器版本等。
2024-07-26 16:34:33
921
原创 el-popover嵌套select弹窗点击实现自定义关闭
也就是说， el-select 的 options 弹框不在 el-popover 弹出框上，点击options 弹框后会触发 popover 弹窗框的关闭条件，因此就会造成选择 el-select 选择器的选项后，外层的 el-popover 弹出框也会关闭。：在 el-popover 弹出框组件中嵌入 el-select 选择器组件后，点击 el-select 选择器选中选项后，不仅 el-select 选择器的选项弹框关闭了，外层 el-popover 组件的弹框也一并关闭了。
2024-07-19 16:05:29
729
原创 了解微前端和qiankun
Qiankun是由蚂蚁金服开源的一款基于single-spa的微前端实现库。它旨在通过微前端的方式，将大型前端应用拆分成多个小型、独立、可独立开发、测试和部署的子应用。每个子应用都拥有自己独立的生命周期和上下文环境，通过Qiankun的框架进行集成和管理，形成一个完整的用户界面。
2024-07-14 22:28:25
604
1
原创 图片预加载和懒加载
它只加载用户当前能够看到或即将看到的图片，对于当前不可见的图片则暂时不加载，从而提高了页面的性能和用户体验。图片懒加载（也称为延迟加载）是指在页面加载完成后，只加载用户当前可见区域或即将进入可见区域的图片资源。图片预加载是指在页面展示之前提前加载即将使用到的图片资源，以便当用户需要查看时，能够直接从本地缓存中快速渲染，从而提高页面加载速度和用户体验。图片预加载通过提前将图片下载到浏览器缓存中，当用户实际需要查看图片时，可以直接从缓存中读取，避免了再次从服务器下载的过程，从而减少了加载时间。
2024-07-07 18:28:23
804
原创 JavaScript检查对象是否包含某个属性
当使用 Object.prototype.hasOwnProperty.call 时，实际上是在调用 hasOwnProperty 方法，并明确指定 this 的值，这使得可以检查任何对象是否拥有指定的属性。使用 Object.prototype.hasOwnProperty.call 的好处是，它允许将 hasOwnProperty 方法作为一个函数传递给其他函数，或者在不直接引用对象的情况下使用它。hasOwnProperty 方法会检查对象自身是否具有指定的属性，而不考虑原型链。
2024-06-28 14:33:15
1213
原创 ElementPlus el-date-picker日期时间选择器组件禁用此刻之前的时间（精确时分秒）
这里时分秒的判断用到TimePicker 时间选择器的属性disabled-hours、disabled-minutes、disabled-seconds。由于element plus的DateTime Picker组件只提供了disabled-date属性。使用DateTimePicker 日期时间选择器 的disabled-date。
2024-06-19 17:39:49
1136
原创 学习vite的核心原理
当代码执行到模块加载时，浏览器会动态地下载导入的模块，而不需要等待整个项目的构建完成。因此，随着项目规模的增大和路由的增加，Vite的构建速度不会受到影响。这意味着Dev Server必须等待所有模块构建完成，即使在开发过程中只修改了一个子模块，整个bundle文件也会重新打包，导致启动时间随着项目规模增大而变长。总的来说，Vite 利用了浏览器原生对 ES 模块的支持，通过 WebSocket 实现了与客户端的实时通信，从而实现了基于 ESM 的热模块替换功能。
2024-06-16 21:48:02
817
原创 vue3中$attrs与inheritAttrs的使用
包含了父组件传递给子组件的属性，但不包括子组件已经声明的 props。在 Vue 3 中，Vue 3 引入了一些新特性和改进，其中之一就是对。在 Vue 2 中，
2024-06-10 20:07:17
497
原创 el-rate 改变星星的大小和样式
这意味着鼠标事件和触摸事件会穿透到元素的背后，但是如果元素有填充（例如背景颜色），鼠标事件和触摸事件将在遇到填充之前停止传播。这意味着鼠标事件和触摸事件会穿透到元素的背后，但是如果元素是不透明的，鼠标事件和触摸事件将在遇到元素之前停止传播。这意味着鼠标事件和触摸事件会穿透到元素的背后，但是如果元素有边框，鼠标事件和触摸事件将在遇到边框之前停止传播。visibleFill：元素对鼠标事件作出响应，但不会成为鼠标事件的目标。visible：元素对鼠标事件和触摸事件作出响应，但不会成为鼠标事件和触摸事件的目标。
2024-05-31 17:26:59
1146
原创 学习JavaScript底层逻辑之预编译
发现变量声明var a，加入AO，值为undefined（注意这里先于形参声明，但不影响最终结果，因为形参的赋值会覆盖这个undefined）。当JavaScript环境初始化时，无论是浏览器环境下的window对象（浏览器全局对象）还是Node.js环境下的global对象（Node.js全局对象），都会创建一个全局执行上下文。函数声明（使用function关键字）同样会被提升，但不同于变量声明，整个函数体也会被提升，而不仅仅是函数声明。在函数体内找函数声明，将函数名作为AO的属性名，值赋予函数体。
2024-05-26 23:15:16
1023
1
原创 echarts图表x轴如何只显示起始数据和结束数据
如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。坐标轴刻度标签的显示间隔，
2024-05-11 16:15:20
1429
原创 js实现倒计时效果
既然是倒计时，肯定是要涉及到时间日期的操作了。js 里可以用 new Date() 来创建各种格式的时间日期。还涉及到定时器的使用。计算出当前时间和目标时间的时间差，还要对剩余时间做下处理，得出时、分、秒，然后通过重复调用，每隔 1 秒刷新一次就实现了。
2024-04-28 17:03:19
548
原创 echarts组件x轴坐标显示不全解决方法
刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
2024-04-21 16:21:26
942
原创 JavaScript扩展运算符...的实现原理
如何实现一样的功能？由上面的用法，可以知道。扩展运算符（spread）是三个点（…），用于取出参数对象中的所有可遍历属性，浅拷贝到当前对象之中。因为任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。可以看出上面的例子，没有考虑到属性的可遍历性判断，那么需要进一步优化。
2024-04-14 22:05:57
511
原创 实现文本溢出提示效果
监听元素的mouseenter事件，然后判断元素的scrollWidth是不是大于clientWidth，就可以知道元素是否在水平方向上发生溢出，然后再加上tooltip就好了。本文的需求是文本溢出时显示省略号，鼠标移入文本时提示完整的文字内容。
2024-03-24 18:07:25
324
原创 纯 CSS 实现文字换行环绕效果
定义一个由内容区域的外边缘封闭形成的形状（译者：表述的不太好，就是被 padding 包裹的区域，在 chrome 控制台中的盒子模型图中的蓝色区域。每一个角的弧度取 0 或 border-radius - border-width - padding 中的较大值。shape-outside 的 CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。shape-outside 提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
2024-03-17 22:27:46
695
原创 js实现文本内容过长中间显示...两端正常展示
给外层元素设置溢出隐藏的样式属性，不对内层元素做处理，这样内层元素的宽度是不变的。通过charCodeAt返回指定位置的字符的Unicode编码, 返回的值对应ASCII码表对应的值，0-127包含了常用的英文、数字、符号等，这些都是占一个字节长度的字符，而大于127的为占两个字节长度的字符。通过charCodeAt获取指定位置字符的Unicode编码，返回的值对应ASCII码表对应的值，0-127包含了常用的英文、数字、符号等，这些都是占一个字节长度的字符，而大于127的为占两个字节长度的字符。
2024-03-10 22:48:29
1071
原创 async/await高级用法
在JavaScript中，类的构造器（constructor）不能是异步的。但可以通过工厂函数模式来实现类实例的异步初始化。当需要对数组中的元素执行异步操作时，可结合async/await与数组的高阶函数（如map、filter等）。使用async/await可以更好地控制事件循环，像处理DOM事件或定时器等场合。通过async/await，可以将错误处理的逻辑更自然地集成到同步代码中。async/await可以很容易地使递归函数进行异步操作。使用await可以直观地按顺序执行链式调用中的异步操作。
2024-02-25 19:15:00
259
原创 width:100%与width:auto区别
给parent设置了padding:20px 内边距，给两个child都设置了margin:20px的外边距。child1的width属性是auto,child2的width属性是100%。可以看到child1的宽度是可以适应的，不会溢出其父元素。而child2的宽度则是和父元素一样大最终溢出了其父元素。width 属性用于设置元素的宽度。width 默认设置内容区域的宽度，但如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度。
2024-01-19 17:43:34
979
原创 既然有了 cookie 为什么还要 localStorage?
前后端分离架构: 在一些现代的 Web 应用程序中,前端和后端通常是通过 API 进行通信的,而不是使用传统的服务器端渲染。在这种情况下,前端可能是一个独立的应用程序,如基于 JavaScript 的单页应用或移动应用程序。由于前端和后端是分离的,Cookie 在这种架构中不太容易管理,因为跨域请求可能会遇到一些限制。localStorage 提供了一种更方便的解决方案,前端应用程序可以直接访问和管理存储在本地的令牌;安全性需求。
2024-01-05 17:43:10
933
原创 JavaScript 中如何取消请求
取消请求，readyState 会变成 XMLHttpRequest.UNSENT(0)；请求的 xhr.status 会被设为 0；取消 Fetch 请求，需要用到 AbortController API。其实可以在 controller.abort() 传入“取消请求的原因”参数，然后进行 try…，可以作为参数传入到 fetch 中，用于将控制器与获取请求相关联；axios 同样支持 AbortController。, controller 它有一个只读属性。
2024-01-02 09:20:21
521
原创 ES6之数组新增的扩展
ES6 则是明确将空位转为undefined，包括Array.from、扩展运算符、copyWithin()、fill()、entries()、keys()、values()、find()和findIndex()flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。将数组扁平化处理，返回一个新数组，对原数据没有影响。
2023-12-24 20:39:24
300
原创 ES6之对象新增的方法
Object.assign()方法用于对象的合并，将源对象source的所有可枚举属性，复制到目标对象target。返回一个对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对的数组。Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象。返回自身的（不含继承的）所有可遍历（enumerable）属性的键对应值的数组。返回自身的（不含继承的）所有可遍历（enumerable）属性的键名的数组。返回指定对象所有自身属性（非继承属性）的描述对象。
2023-12-17 20:09:48
246
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人