![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript/TypeScript
文章平均质量分 80
javascript typescript
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
-
js连接蓝牙设备并传输数据
要在JavaScript中对接蓝牙并传输数据,通常需要使用Web Bluetooth API,该API允许网页与附近的蓝牙设备进行通信。然而,这个API仅在一些现代浏览器(如Chrome、Opera和Samsung Internet)中受到支持,并且需要用户的明确许可。另外,请确保你的设备已经配对,并且你的应用已经获得了用户的许可来访问蓝牙设备。在GATT连接建立后,你可以查找特定的服务(service)和特性(characteristic),并通过它们发送和接收数据。如果你需要读取特性的值,可以使用。转载 2024-06-24 09:31:22 · 77 阅读 · 0 评论 -
websocket封装:完美支持断网重连、自动心跳
前几天,就遇到这样一个需求,要求界面的数据通过websocket实时推送,并且必须支持!自动心跳是定期向服务端发送小型数据包,如果一段时间内服务端没有收到心跳响应,系统可能会断开连接。websokect的API非常简单但是,要封装一个支持断网重连、自动心跳的websokect没有那么容易!封装成功演示核心优势我们先看我封装的websokect,首先,最重要的,它的使用方法和官方Api完全一致!零学习成本,上手即用!转载 2024-06-24 09:23:40 · 42 阅读 · 0 评论 -
5个改善用户体验的HTML属性
在快节奏的Web开发世界中,很容易被最新的框架,库和尖端技术所吸引。但有时最有影响力的改进来自于重新审视基本面。在本篇博文中,我将向您介绍五种 HTML 属性,它们不仅能提高可访问性,还能增强整体用户体验。无论您是经验丰富的开发人员还是刚刚起步,让我们一起探索这些元素的潜力,创造更具包容性的web体验。转载 2024-06-24 09:15:44 · 33 阅读 · 0 评论 -
两种方法解决 this 在validator中不能使用
【代码】两种方法解决 this 在validator中不能使用。转载 2024-06-05 09:21:43 · 18 阅读 · 0 评论 -
45 个每个开发人员都应该知道的 JavaScript 超级技巧
解决方案:使用 `includes()`、`startsWith()` 和 `endsWith()` 进行更简单的字符串检查。解决方案:仅在 `null` 或 `undefined` 时使用空值合并 (`?解决方案:使用 `map()`、`filter()` 和 `reduce()` 进行常见的数组操作。解决方案:使用 `Array.from()` 和 `Array.of()` 获得更简洁的代码。问题:如果值为 `0` 或 `””`,则使用 `||` 提供默认值可能会产生意外结果。转载 2024-06-05 08:40:48 · 11 阅读 · 0 评论 -
ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性?
includes()方法用来判断一个数组或字符串中是否包含一个指定的值如果包含返回true,否则返回false。是async声明的函数,async函数是构造函数的实例,其中允许使用await关键字。如果你想要添加新的属性,并且在上一行已经使用了尾后逗号,你可以仅仅添加新的一行,而不需要修改上一行padStart()用另一个字符串填充当前字符串。padEnd() 方法会用一个字符串填充当前字符串(如果需要的话则重复填充)。在Promise结束的时候,不管是结果是resolved还是rejected,都会调用。转载 2024-06-04 08:43:46 · 6 阅读 · 0 评论 -
开源图片 & 海报编辑器工具
事情是这样的,前不久看到一个国产的开源 canvas 2d 框架(leaferjs)做的非常棒,于是就跃跃欲试,打算用这个框架搞点什么,于是最终决定搞一个开源的在线的图片 & 海报编辑器,肝了一个月算是搞好了。目前 AI 功能只加了一个 AI 抠图,想要扣什么内容就使用鼠标点击哪里,可以扣各种元素,因为是免费的,所以抠图的效果不是很好,如果有高要求的小伙伴可以尝试使用第三方的抠图服务。为了方便用户快速的制作图片,我参考 PS 的习惯,添加了很多快捷键,快捷键说明可以点击左下角的图标进行查看。转载 2024-06-04 08:42:52 · 10 阅读 · 0 评论 -
JS的这些新特性,你都用过么?
这个方法让我们可以在所有的Promise都得到解决之后,无论是fulfilled还是rejected,都可以获得每一个Promise的结果。可选链让我们能够以安全的方式访问嵌套对象的属性,避免因为中间某个属性不存在而抛出错误。方法让我们可以更容易地替换字符串中的所有匹配项,而不仅仅是第一个匹配项。对象允许您保持对另一个对象的弱引用,而不会阻止该对象被垃圾回收。BigInt是一种新的数值类型,让我们可以安全地操作大整数。对象允许您在对象被垃圾回收时执行一些清理工作。关键字,简化了异步导入和操作的代码逻辑。转载 2024-06-04 08:42:30 · 5 阅读 · 0 评论 -
ES7~ES12中重要的核心语法
提供了这样的一种方法:当一个在注册表中注册的对象被回收时,请求在某个时间点上调用一个清理回调。在ES7中,我们可以通过includes来判断一个数组中是否包含一个指定的元素,根据情况,如果包含则返回 true,否则返回false。方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。将一个对象转换成 entries,那么如果我们有一个entries了,如何将其转换成对象呢?在之前我们希望获取JavaScript环境的全局对象,不同的环境获取的方式是不一样的。转载 2024-06-04 08:41:17 · 9 阅读 · 0 评论 -
JS 分片任务的高阶函数封装
通过本篇文章我们可以学习到什么?API的用法浏览器的渲染原理分片高阶函数的封装。转载 2024-06-03 09:03:50 · 8 阅读 · 0 评论 -
ES2024 新鲜出炉的 JS 特性先睹为快!
除了前文提及的若干新版功能之外,ES2024 还在正则表达式和 Buffer(二进制缓冲区)方面推陈出新。提案正确格式的 Unicode 字符串提案数组分组提案正则表达式v标志提案提案ArrayBuffer 转换提案可调整大小的 ArrayBuffers 提案粉丝请注意,上述代码中,带()括号后缀的表示方法或函数,否则表示数据属性或访问器属性。后面这几个提案相对小众,但尤其在 Node 等服务端开发或前端插件生态中,也有不可或缺的用武之地,相关技术细节请进阶阅读 MDN 电子书或 ES 语言说明书。转载 2024-06-03 09:01:42 · 147 阅读 · 0 评论 -
有了这 5 个方法,轻松处理异步任务
在 JavaScript 中,许多操作都是异步的,比如发起网络请求、读取文件、定时器等。Promise 提供了一种更加结构化和易于理解的方式来处理异步操作,使得异步代码更加清晰易读,避免了回调地狱的问题。本文我将介绍 Promise 对象上 5 个非常有用的方法,掌握这些方法之后,可以让你更好地解决工作遇到的一些异步问题。转载 2024-06-03 08:59:39 · 3 阅读 · 0 评论 -
JavaScript 中的 btoa 和 atob 全局函数
btoa()方法用于将一个字符串进行 Base64「编码」。例如,以下代码将字符串「注意」btoa()方法只能对 ASCII 字符进行编码,如果字符串中包含非 ASCII 字符,则会抛出一个错误。本文主要介绍 JavaScript 中btoa和atob这两个全局函数,用来对「字符串」进行 Base64「编码和解码」,非常好用。转载 2024-06-03 08:42:44 · 32 阅读 · 0 评论 -
分享10个超实用的高级 CSS 技巧
要从彩色图像中删除白色背景,你可以使用带有值乘的 mix-blend-mode CSS 属性。在下面的示例中,我使用 attr() 函数使用其 data-value 属性来显示 span HTML 元素的 ::after 伪类的文本内容。但是,如果我们使用带有 drop-shadow() CSS 函数的过滤器 CSS 属性而不是 box-shadow,则可以仅向 PNG 中的实际图像部分添加阴影,而不包括透明背景。在这里,你可以看到我使用了两张图像:一张是彩色的,另一张是黑色的,并且都有白色背景。转载 2024-06-03 08:37:18 · 6 阅读 · 0 评论 -
前端防篡改水印(Js 版本,将 class 转 function)
现在古董要重见天日了,就将上次的 Ts Class搞成 Js function的方式在项目中使用。之前由于项目使用的是 React 框架所以封装了。转载 2024-05-31 09:06:30 · 13 阅读 · 0 评论 -
前端接口防止重复请求实现方案
到这里,整个的需求总算是完结啦!不用一个个接口的改代码,又可以愉快的打代码了,nice!Demo地址[1]转载 2024-05-31 08:55:44 · 8 阅读 · 0 评论 -
前端部署真的不简单
在二者部署的时间间隔内,如果有用户访问页面,就会在新的页面结构中加载旧的资源,并且把这个旧版本的资源当做新版本缓存起来,其结果就是:用户访问到了一个样式错乱的页面,除非手动刷新,否则在资源缓存过期之前,页面会一直执行错误。看上图,用文件的摘要信息来对资源文件进行重命名,把摘要信息放到资源文件发布路径中,这样,内容有修改的资源就变成了一个新的文件发布到线上,不会覆盖已有的资源文件。全套做下来,就是相对比较完整的静态资源缓存控制方案了,而且,还要注意的是,静态资源的缓存控制要求在。转载 2024-05-31 08:51:14 · 9 阅读 · 0 评论 -
8 个关于 Promise 高级用途的技巧
有人没天赋,简单的用20行左右的代码就实现了。很多人只知道它是用来在调用await时接收async函数的返回值的,却不知道async函数它实际上是一个返回promise的函数。当它后面跟的值不是promise对象时,它会用promise对象包装该值,所以await后面的代码必须异步执行。要实现请求共享,需要使用promise的缓存功能,即一个promise对象可以通过多次await获取数据。catch 函数是在 then 函数返回的处于拒绝状态的 Promise 上调用的,因此它的错误自然可以被捕获。转载 2024-05-31 08:49:49 · 8 阅读 · 0 评论 -
IntersectionObserver:前端性能优化的新利器
IntersectionObserver:前端性能优化的新利器在当今网页设计中,用户体验和性能优化变得越来越重要。本文将带你深入了解一种强大的前端技术。通过使用IntersectionObserver API,那些性能上的优化。转载 2024-05-31 08:44:59 · 10 阅读 · 0 评论 -
bpmn-js 多实例配置MultiInstanceLoopCharacteristics实现或签会签
使用bpmn-js流程图开发过程中会遇到会签和或签的问题,这个时候我们就需要使用多实例配置来实现BPMN 2.0的配置实现了,多实例任务,是从流程编辑概念之初也就是Activiti时期就存在的一个方式。所谓的多实例任务也就是字面意思,一个任务由多个人完成,常见于我们的审批流程的或签【一个审批完成即可】和会签【多个用户审批都通过才算结束】,由于存在多个成员的操作,引入了多实例的概念。转载 2024-05-31 08:42:57 · 93 阅读 · 0 评论 -
bpmn.js一个基于Bpmn 2.0的前端工作流展示和绘制工具
这里引用咖啡兔在《Activiti实战》一书中对于工作流的描述:工作流(Work Flow)引擎被广泛应用于各种信息化系统中,将原本散乱甚至混乱的业务梳理后制定成业务规范流程,进而约束业务的规范化处理和运转。需求人员、开发人员共同协作制定了符合BPMN 2.0规范的流程定义,之后将其部署到工作流引擎中,由它自动驱动业务流程的进行。完整的工作流周期如上:定义:收集业务需求并转化为流程定义。发布:在系统管理(平台)中发布流程定义。转载 2024-05-31 08:42:43 · 155 阅读 · 0 评论 -
企业级 npm 私有仓库部署方案
cnpmcore 对于企业级 npm 私有仓库部署方案来说,是一个不错的选择。通过在 tegg 中集成 cnpmcore,我们可以很方便的进行 npm 服务的二次开发,扩展自己的业务代码,满足企业定制化需求。转载 2024-05-30 08:57:08 · 12 阅读 · 0 评论 -
2个强大的 JavaScript 动画库,可帮助你提升用户体验
Popmotion 不会假定您想要设置动画的对象的属性,而是提供可在任何 JavaScript 环境中使用的简单、可组合的函数。它是一个轻量级的 JavaScript 动画库,具有简单的 API,可用于对 CSS 属性、SVG、DOM 属性和 JavaScript 对象进行动画处理。除了能够控制动画的持续时间和延迟之外,我们还可以在动画完成后的某个时刻反转动画,或者在动画进行过程中完全停止动画。它是一个可靠且经过充分测试的库,已编写了 1500 多个测试,在 GitHub 上拥有超过 1700 颗星。原创 2024-05-30 08:51:08 · 722 阅读 · 0 评论 -
WebSocket 从入门到入土
因新部门需求有一个后台管理需要一个右上角的实时的消息提醒功能,第一时间想到的就是使用WebSocket建立实时通信了,之前没整过,于是只能学习了。和原部门相比现在太忙了,快乐的日子一去不复返了。经典的加量不加薪啊!!!转载 2024-05-30 08:50:36 · 9 阅读 · 0 评论 -
前端重新部署如何通知用户刷新网页?
有时候上完线,用户还停留在老的页面,用户不知道网页重新部署了,跳转页面的时候有时候js连接hash变了导致报错跳不过去,并且用户体验不到新功能。转载 2024-05-30 08:50:01 · 15 阅读 · 0 评论 -
JS 数组对象的 34 种官方用法
lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找,如果要检索的元素没有出现,则该方法返回 -1,该方法将从尾到头地检索数组中指定元素 item,开始检索的位置在数组的 start 处或数组的结尾(没有指定 start 参数时),如果找到一个 item,则返回 item 从尾向前检索第一个次出现在数组的位置,数组的索引开始位置是从 0 开始的,如果在数组中没找到指定元素则返回 -1。★注:如果你想查找数组首次出现的位置,请使用 indexOf() 方法。转载 2024-05-29 09:04:01 · 16 阅读 · 0 评论 -
ES6的一些冷门且实用的高级技巧
引言ES6(ECMAScript 2015)引入了许多新的功能和语法,其中一些功能可能相对较冷门,但非常实用。本文将介绍一些这样的高级技巧,包括Symbol类型和Symbol属性WeakMap和WeakSetBigIntArray.ofArray.from.at和flat。转载 2024-05-29 09:00:35 · 6 阅读 · 0 评论 -
20 个 JS 工具函数助力高效开发
Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库,下载、解析和执行的JavaScript更少,为代码留下更多的时间。关于时间操作,没必要自己再写一大串代码了,强烈推荐使用 day.js[2]假设我们要从树状结构数据中查找 id 为 9 的节点。不过要吐槽一句的是,uuid一般应由后端来进行生成。{number} decimals:保留几位小数。{number} number:要格式化的数字。key 根据去重的字段名。fileName 文件名。arr 要去重的数组。转载 2024-05-29 08:57:40 · 6 阅读 · 0 评论 -
前端日历实现:公历、农历、黄历、星座、节气、天干、地支、八字、星宿、五行...
比如,阴历支持获取年月日、时辰、星期、节日、干支、禄、生肖、节气、物候、数九、三伏、六曜、二十八星宿、七政(七曜)、 四宫、四神兽、 彭祖百忌、八卦方位、吉神方位、胎神方位、太岁方位、冲煞、纳音、八字、十神、旬、旬空(空亡)、建除十二值星、十二天神、每日宜忌、时辰宜忌、吉神凶煞、月相、九星、日期推移、转阳历、转佛历、转道历。阳历支持获取年月日、儒略日、获取星期、是否闰年、节日、星座、日期推移、日期相减、日期比较、薪资比例、转阴历。lunar 是一个支持阳历、阴历、佛历和道历的。转载 2024-05-28 10:46:09 · 49 阅读 · 0 评论 -
万字总结 JS 数据结构与常用的算法
的人会在门口,然后门口的人会。转载 2024-05-28 10:43:37 · 11 阅读 · 0 评论 -
42 个通过示例解释所有 JavaScript 数组方法
通过将所有元素连接到字符串,同时用逗号分隔每个元素并返回字符串,将所有元素转换为区域设置字符串。在每个元素中展开任何已建立的数组,并根据给定的深度级别继续展开嵌套的数组。将所有元素转换为语言环境字符串,将所有元素连接为字符串,同时用逗号分隔每个元素并返回字符串。返回一个新数组,其中所有元素均由给定回调修改,并按 1 深度级别展平。返回给定元素的最后一个匹配项的索引。创建一个新数组,其中包含调用方数组的元素以及给定索引处替换的给定值。创建一个新数组,其中包含调用方数组的元素以及已替换或删除的元素。转载 2024-05-28 09:47:07 · 4 阅读 · 0 评论 -
js中,对象的29个方法你都知道吗
js中对象的方法虽然有众多,但是业务项目中几乎很少能够用到,如果是比较,感觉还是对比运算符会比Object.is更方便一些。如果是对对象进行冻结、密封、禁止扩展的场景更是少之又少,访问原型链在业务需求里也是比较少的。访问对象中是否存在这个属性使用in操作符更方便些,但也不乏会有极少数场景可以使用到等方法感觉使用对数据进行分组是比较好的方法,但是「兼容性可谓是一言难尽」。目前使用最多的就是Object.keys来对对象进行判断或者遍历。转载 2024-05-28 09:24:01 · 6 阅读 · 0 评论 -
20 个 JS 工具函数助力高效开发
Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库,下载、解析和执行的JavaScript更少,为代码留下更多的时间。关于时间操作,没必要自己再写一大串代码了,强烈推荐使用 day.js[2]假设我们要从树状结构数据中查找 id 为 9 的节点。不过要吐槽一句的是,uuid一般应由后端来进行生成。{number} decimals:保留几位小数。{number} number:要格式化的数字。key 根据去重的字段名。fileName 文件名。arr 要去重的数组。转载 2024-05-28 09:12:00 · 8 阅读 · 0 评论 -
js中使用URLSearchParams获取url参数
URLSearchParams对于旧版浏览器不太兼容,使用时要注意,且URLSearchParams已经自动对参数和参数值编码进行了处理,不用额外进行处理了~js中的URLSearchParams是在ECMAScript 2015(ES6)中引入的,可以简化对URL中参数的操作。下面简单一一介绍一下这些方法。转载 2024-05-27 09:27:53 · 165 阅读 · 0 评论 -
前后端实现二维码扫码登录逻辑
登录二维码有效期默认2分钟,超过2分钟提示用户刷新:在生成登录二维码时,后端服务器将生成一个二维码标识符,并设置一个2分钟的有效期,即「生成二维码中解析的数据」{ "id": "", // 生成二维码的标识符,这个要传给账号登录的code参数 "expire": 1685696389, // 有效时间,就是生成该二维码的时间, "prefix": "[rk://scanforpclogin/]()", "platform": "Rxx_PC"}转载 2024-05-27 09:11:22 · 71 阅读 · 0 评论 -
vue项目轻松实现水印效果
下次遇到需要使用水印效果的时候,一定要记得vue2-water-marker,vue3-water-marker哟。加强了对水印的保护,删除或篡改水印的难度加大。转载 2024-05-24 11:53:48 · 437 阅读 · 1 评论 -
前端最能打的本地存储方案
前言之前开发了一个离线存储的需求,需要在本地存储较大的数据量,并且还要考虑到多种场景下的存储方式兼容。产品的原话就是“要又大又全”。既然存储量大,也要覆盖全多种设备多种浏览器。转载 2024-05-24 11:49:53 · 16 阅读 · 0 评论 -
7 个很有用的 JavaScript 技巧
我们经常使用 switch 来处理不同的事情,但是你有没有想过使用对象来大大简化你的代码?随着你的业务增长,你可能需要写更多的“||”,这很糟糕。您可能正在使用 Number() 和 parseInt() 将字符串转换为数字。这是一个深度嵌套的对象,您可以使用 console.log 来打印它。初始化一个固定长度的数组,每一项都是“fatfish”。很多时候简单的条件判断并不需要使用“if”。你只需要使用一个对象来实现你的目标。其实,使用 fill 就很简单了。使用包含使您的代码更加易于维护。转载 2024-05-24 11:07:49 · 6 阅读 · 0 评论 -
5 个最令人兴奋的 ES13 功能
不用担心,我们可以使用“Object.hasOwn”来规避这两个问题,这比“obj.hasOwnProperty”方法更方便、更安全。也许“obj.hasOwnProperty”已经可以过滤掉原型链上的属性,但在某些情况下,它并不安全,会导致程序失败。有时,代码块的错误需要根据其原因进行不同的处理,但错误的原因相对相似,因此,能够为它们分配错误名称是很棒的。ES2022提供了一个名为at的数组方法,这可能是一个很小的改变,但是可以大大提高代码的可读性。这个功能非常棒,可以让我们做很多以前做不到的事情。转载 2024-05-24 11:06:01 · 7 阅读 · 0 评论 -
Map数据类型的使用技巧08/21
这里要提一下,当我们使用新的工具或技术时,了解其优点和功能固然重要,但是,同样重要的是理解其局限性。所以呢,如果你这时候通过数字键检索值时,实际上使用的是字符串来检索值的。对象提供的方法都比较简单,如果你有需要操作复杂数据的需求,比如过滤、映射、排序等,这时候使用。但是,如果要操作的数据量非常大,或者很频繁的添加、删除键值对,这时候还是要考虑使用。如果你存储的数据量很小,并且键名是固定的,那么使用普通的。这时,如果你修改了复制后的。上面的代码遍历了输入的字符串,对于其中的每个字符,如果它已经存在于。转载 2024-05-24 11:05:04 · 11 阅读 · 0 评论