JavaScript/TypeScript
文章平均质量分 79
javascript typescript
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
-
type和interface区别
type:使用type关键字定义,它可以为任何类型创建一个新的名字(别名)。这包括基本类型、联合类型、元组、映射类型等。interface:使用interface关键字定义,它专门用于定义对象的结构,包括对象的属性、方法等。type和interface在定义类型时各有优势,选择哪个取决于具体的使用场景和需求。在定义对象类型时,如果需要利用接口的继承、合并等特性,可以选择interface;在定义基本类型、联合类型、元组等复杂类型时,type则更为灵活和方便。原创 2024-08-12 09:00:04 · 583 阅读 · 0 评论 -
非常有用的 48 个 JavaScript 代码片段
返回arr.slice(-1)[0]翻译 2024-08-06 13:52:46 · 22 阅读 · 0 评论 -
ES9中5个最具变革性的JavaScript特性
异步生成器是ES9中一个强大的特性。当我们调用.next()时,我们会得到一个Promise现在要消费这个生成器,我们将使用我想知道实际的YouTube JavaScript代码是否使用了这样的生成器?转载 2024-08-06 10:38:13 · 17 阅读 · 0 评论 -
ECMAScript 2024 全新特性全面解析
2024 年 6 月 26 日,第 127 届 ECMA 大会正式批准了 ECMAScript 2024 语言规范,这意味着它现在正式成为最新 ECMAScript 标准。下面就来看看 ECMAScript 2024 都有哪些新特性吧!转载 2024-08-05 09:06:49 · 21 阅读 · 0 评论 -
11 个高级 Web 工程师必备的 Web API
这些对于处理 Web 应用程序中的 I/O 数据特别有用——例如流式上传或下载,以及与以二进制格式发送数据的 API 进行通信。Blob API 用于处理二进制数据,可以很方便地将数据转换为 Blob 对象或从 Blob 对象读取数据。在 Web 应用程序中,可能需要上传或下载二进制文件,这些数据可以使用 Blob API 方便地处理。Proxy API 可用于拦截和自定义对象上的操作,例如属性查找、赋值、枚举、函数调用等。符号可用于向对象添加唯一属性键,这些键不会与任何其他属性冲突,并可用于私有属性。转载 2024-08-05 09:05:04 · 17 阅读 · 0 评论 -
object 如何删除一个属性
1. object 如何删除一个属性1.1. 使用 delete 关键字删除对象属性1.2. 使用rest解构对象1.3. 使用ES6新增的Reflect.deleteProperty。转载 2024-08-01 14:31:16 · 182 阅读 · 0 评论 -
JavaScript对象不可变性:Object.freeze与Object.seal
在 JavaScript 处理值和对象时,有时可能需要限制对它们的操作,以防止对全局配置对象、状态对象或全局常量进行更改,从而保护应用程序的整体配置。具有此类数据访问权限的函数可能会在不应修改数据的情况下直接修改数据(这可能也是由开发人员无意间犯下的错误引起的)。此外,在同一代码库(或使用您的代码)的其他开发人员可能会意外地进行此类更改。值得庆幸的是,JavaScript 提供了一些构造来处理这类情况。在本教程中,我们将讨论不变性的概念以及 JavaScript 中的freeze()和seal()转载 2024-08-01 14:28:36 · 24 阅读 · 0 评论 -
如何理解JavaScript代理对象(JavaScript Proxy)
JavaScript的Proxy对象是一种强大且灵活的特性,它允许你拦截并自定义对对象执行的操作。自ECMAScript 6(ES6)引入以来,Proxy对象为控制对象的基本操作行为提供了一种机制,使高级用例和改进的安全性成为可能。转载 2024-08-01 14:26:41 · 16 阅读 · 0 评论 -
ES2024新特性:object.groupBy()让分组更简单
它是一个可以按任何你希望的方式对数组进行分类和排序的函数,就像是你数据的私人整理员,确保一切都被整齐地分类和轻松访问。值得一提的是,如果你需要使用任意值(不仅仅是字符串)来进行分组,Map.groupBy()函数也能帮你搞定。object.groupBy()的真正威力在于它能够基于自定义条件对数据进行分组。/* 结果如下:],*/在这个示例中,我们定义了一个包含产品对象的数组,每个产品都有名称、价格和库存状态。然后,我们创建了一个自定义回调函数myCallback,根据inStock。转载 2024-07-18 09:10:17 · 27 阅读 · 0 评论 -
ES13 中最具变革性的 5 个 JavaScript 功能
在创建类时只执行一次代码 — 就像 C# 和 Java 等 OOP 语言中的静态构造函数一样。编译器甚至不期望您尝试从类外部访问私有字段——它假设您正在尝试创建一个。因此,有时我们会捕获调用堆栈下方方法的错误,然后将其重新抛回堆栈。因此,我们通常使用方括号 ([]) 来访问数组的第 N 个元素。在 ES13 之前,我们永远无法在全局范围内使用 await。与许多其他语言不同,我们不能在类的最外层范围内声明或定义它们。静态字段——类本身的属性,而不是任何特定实例。在 ES13 之前,创建私有方法是不可能的。转载 2024-07-18 09:09:09 · 29 阅读 · 0 评论 -
13个 JavaScript 面试难题及代码实现
then方法用于注册一个回调函数,在Promise完成或被拒绝时执行,它接受两个参数onFulfilled和onRejected,分别在Promise完成或被拒绝时调用。在循环中,代码检查右操作数right的原型是否等于当前的proto,如果相等,则表示左操作数left是右操作数right的实例,返回true。如果在循环结束时没有找到匹配的原型,即proto为null,则表示左操作数left不是右操作数right的实例,返回false。如果是,则直接返回 false,因为 null 不能是任何对象的实例。原创 2024-07-18 09:08:21 · 781 阅读 · 0 评论 -
18个面向专业开发人员的高级 JavaScript 技术
当需要编写递归函数时,会声明一个函数名,但每次修改函数名时,总会忘记修改内部的函数名。开发过程中需要打印dom元素时,使用console.log往往只能打印出整个dom元素,无法查看dom元素内部的属性,可以尝试使用console.dir。当你需要判断某个dom元素当前是否出现在页面视图中时,可以尝试使用IntersectionObserver来判断。当需要阻止用户刷新或关闭浏览器时,可以选择触发 beforeunload 事件,部分浏览器无法自定义文本内容。当你需要打印出当前页面,但需要修改当前布局时。原创 2024-07-18 09:04:38 · 297 阅读 · 0 评论 -
19个基本 JavaScript 方法
【代码】19个基本 JavaScript 方法。原创 2024-07-18 09:01:59 · 107 阅读 · 0 评论 -
区分JavaScript中的onclick和addEventListener
onclick和方法。通过深入研究这两种机制的细微差别,揭示这两个方法各自的独特优势以及擅长的场景。onclick是HTML属性,用于附加JavaScript代码,当用户单击特定元素(如按钮或链接)时,执行相应的代码。此属性允许开发人员直接在HTML标记中定义内联事件处理。单击元素,将触发指定的JavaScript代码,从而启用交互性和用户发起的操作。虽然使用简单,但onclick仅限于单个事件处理程序,在用于管理同一元素的多个事件或处理更复杂的方案时会变得繁琐。转载 2024-07-18 08:59:36 · 31 阅读 · 0 评论 -
ECMAScript 2024 新特性
2024 年 6 月 26 日,第 127 届 ECMA 大会正式批准了 ECMAScript 2024 语言规范,这意味着它现在正式成为最新 ECMAScript 标准。下面就来看看 ECMAScript 2024 都有哪些新特性吧!原创 2024-07-18 08:56:32 · 592 阅读 · 0 评论 -
js连接蓝牙设备并传输数据
要在JavaScript中对接蓝牙并传输数据,通常需要使用Web Bluetooth API,该API允许网页与附近的蓝牙设备进行通信。然而,这个API仅在一些现代浏览器(如Chrome、Opera和Samsung Internet)中受到支持,并且需要用户的明确许可。另外,请确保你的设备已经配对,并且你的应用已经获得了用户的许可来访问蓝牙设备。在GATT连接建立后,你可以查找特定的服务(service)和特性(characteristic),并通过它们发送和接收数据。如果你需要读取特性的值,可以使用。转载 2024-06-24 09:31:22 · 543 阅读 · 0 评论 -
websocket封装:完美支持断网重连、自动心跳
前几天,就遇到这样一个需求,要求界面的数据通过websocket实时推送,并且必须支持!自动心跳是定期向服务端发送小型数据包,如果一段时间内服务端没有收到心跳响应,系统可能会断开连接。websokect的API非常简单但是,要封装一个支持断网重连、自动心跳的websokect没有那么容易!封装成功演示核心优势我们先看我封装的websokect,首先,最重要的,它的使用方法和官方Api完全一致!零学习成本,上手即用!转载 2024-06-24 09:23:40 · 146 阅读 · 0 评论 -
5个改善用户体验的HTML属性
在快节奏的Web开发世界中,很容易被最新的框架,库和尖端技术所吸引。但有时最有影响力的改进来自于重新审视基本面。在本篇博文中,我将向您介绍五种 HTML 属性,它们不仅能提高可访问性,还能增强整体用户体验。无论您是经验丰富的开发人员还是刚刚起步,让我们一起探索这些元素的潜力,创造更具包容性的web体验。转载 2024-06-24 09:15:44 · 55 阅读 · 0 评论 -
两种方法解决 this 在validator中不能使用
【代码】两种方法解决 this 在validator中不能使用。转载 2024-06-05 09:21:43 · 77 阅读 · 0 评论 -
45 个每个开发人员都应该知道的 JavaScript 超级技巧
解决方案:使用 `includes()`、`startsWith()` 和 `endsWith()` 进行更简单的字符串检查。解决方案:仅在 `null` 或 `undefined` 时使用空值合并 (`?解决方案:使用 `map()`、`filter()` 和 `reduce()` 进行常见的数组操作。解决方案:使用 `Array.from()` 和 `Array.of()` 获得更简洁的代码。问题:如果值为 `0` 或 `””`,则使用 `||` 提供默认值可能会产生意外结果。转载 2024-06-05 08:40:48 · 23 阅读 · 0 评论 -
ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性?
includes()方法用来判断一个数组或字符串中是否包含一个指定的值如果包含返回true,否则返回false。是async声明的函数,async函数是构造函数的实例,其中允许使用await关键字。如果你想要添加新的属性,并且在上一行已经使用了尾后逗号,你可以仅仅添加新的一行,而不需要修改上一行padStart()用另一个字符串填充当前字符串。padEnd() 方法会用一个字符串填充当前字符串(如果需要的话则重复填充)。在Promise结束的时候,不管是结果是resolved还是rejected,都会调用。转载 2024-06-04 08:43:46 · 17 阅读 · 0 评论 -
开源图片 & 海报编辑器工具
事情是这样的,前不久看到一个国产的开源 canvas 2d 框架(leaferjs)做的非常棒,于是就跃跃欲试,打算用这个框架搞点什么,于是最终决定搞一个开源的在线的图片 & 海报编辑器,肝了一个月算是搞好了。目前 AI 功能只加了一个 AI 抠图,想要扣什么内容就使用鼠标点击哪里,可以扣各种元素,因为是免费的,所以抠图的效果不是很好,如果有高要求的小伙伴可以尝试使用第三方的抠图服务。为了方便用户快速的制作图片,我参考 PS 的习惯,添加了很多快捷键,快捷键说明可以点击左下角的图标进行查看。转载 2024-06-04 08:42:52 · 32 阅读 · 0 评论 -
JS的这些新特性,你都用过么?
这个方法让我们可以在所有的Promise都得到解决之后,无论是fulfilled还是rejected,都可以获得每一个Promise的结果。可选链让我们能够以安全的方式访问嵌套对象的属性,避免因为中间某个属性不存在而抛出错误。方法让我们可以更容易地替换字符串中的所有匹配项,而不仅仅是第一个匹配项。对象允许您保持对另一个对象的弱引用,而不会阻止该对象被垃圾回收。BigInt是一种新的数值类型,让我们可以安全地操作大整数。对象允许您在对象被垃圾回收时执行一些清理工作。关键字,简化了异步导入和操作的代码逻辑。转载 2024-06-04 08:42:30 · 17 阅读 · 0 评论 -
ES7~ES12中重要的核心语法
提供了这样的一种方法:当一个在注册表中注册的对象被回收时,请求在某个时间点上调用一个清理回调。在ES7中,我们可以通过includes来判断一个数组中是否包含一个指定的元素,根据情况,如果包含则返回 true,否则返回false。方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。将一个对象转换成 entries,那么如果我们有一个entries了,如何将其转换成对象呢?在之前我们希望获取JavaScript环境的全局对象,不同的环境获取的方式是不一样的。转载 2024-06-04 08:41:17 · 21 阅读 · 0 评论 -
JS 分片任务的高阶函数封装
通过本篇文章我们可以学习到什么?API的用法浏览器的渲染原理分片高阶函数的封装。转载 2024-06-03 09:03:50 · 18 阅读 · 0 评论 -
ES2024 新鲜出炉的 JS 特性先睹为快!
除了前文提及的若干新版功能之外,ES2024 还在正则表达式和 Buffer(二进制缓冲区)方面推陈出新。提案正确格式的 Unicode 字符串提案数组分组提案正则表达式v标志提案提案ArrayBuffer 转换提案可调整大小的 ArrayBuffers 提案粉丝请注意,上述代码中,带()括号后缀的表示方法或函数,否则表示数据属性或访问器属性。后面这几个提案相对小众,但尤其在 Node 等服务端开发或前端插件生态中,也有不可或缺的用武之地,相关技术细节请进阶阅读 MDN 电子书或 ES 语言说明书。转载 2024-06-03 09:01:42 · 371 阅读 · 0 评论 -
有了这 5 个方法,轻松处理异步任务
在 JavaScript 中,许多操作都是异步的,比如发起网络请求、读取文件、定时器等。Promise 提供了一种更加结构化和易于理解的方式来处理异步操作,使得异步代码更加清晰易读,避免了回调地狱的问题。本文我将介绍 Promise 对象上 5 个非常有用的方法,掌握这些方法之后,可以让你更好地解决工作遇到的一些异步问题。转载 2024-06-03 08:59:39 · 16 阅读 · 0 评论 -
JavaScript 中的 btoa 和 atob 全局函数
btoa()方法用于将一个字符串进行 Base64「编码」。例如,以下代码将字符串「注意」btoa()方法只能对 ASCII 字符进行编码,如果字符串中包含非 ASCII 字符,则会抛出一个错误。本文主要介绍 JavaScript 中btoa和atob这两个全局函数,用来对「字符串」进行 Base64「编码和解码」,非常好用。转载 2024-06-03 08:42:44 · 84 阅读 · 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 · 17 阅读 · 0 评论 -
前端防篡改水印(Js 版本,将 class 转 function)
现在古董要重见天日了,就将上次的 Ts Class搞成 Js function的方式在项目中使用。之前由于项目使用的是 React 框架所以封装了。转载 2024-05-31 09:06:30 · 36 阅读 · 0 评论 -
前端接口防止重复请求实现方案
到这里,整个的需求总算是完结啦!不用一个个接口的改代码,又可以愉快的打代码了,nice!Demo地址[1]转载 2024-05-31 08:55:44 · 23 阅读 · 0 评论 -
前端部署真的不简单
在二者部署的时间间隔内,如果有用户访问页面,就会在新的页面结构中加载旧的资源,并且把这个旧版本的资源当做新版本缓存起来,其结果就是:用户访问到了一个样式错乱的页面,除非手动刷新,否则在资源缓存过期之前,页面会一直执行错误。看上图,用文件的摘要信息来对资源文件进行重命名,把摘要信息放到资源文件发布路径中,这样,内容有修改的资源就变成了一个新的文件发布到线上,不会覆盖已有的资源文件。全套做下来,就是相对比较完整的静态资源缓存控制方案了,而且,还要注意的是,静态资源的缓存控制要求在。转载 2024-05-31 08:51:14 · 30 阅读 · 0 评论 -
8 个关于 Promise 高级用途的技巧
有人没天赋,简单的用20行左右的代码就实现了。很多人只知道它是用来在调用await时接收async函数的返回值的,却不知道async函数它实际上是一个返回promise的函数。当它后面跟的值不是promise对象时,它会用promise对象包装该值,所以await后面的代码必须异步执行。要实现请求共享,需要使用promise的缓存功能,即一个promise对象可以通过多次await获取数据。catch 函数是在 then 函数返回的处于拒绝状态的 Promise 上调用的,因此它的错误自然可以被捕获。转载 2024-05-31 08:49:49 · 32 阅读 · 0 评论 -
IntersectionObserver:前端性能优化的新利器
IntersectionObserver:前端性能优化的新利器在当今网页设计中,用户体验和性能优化变得越来越重要。本文将带你深入了解一种强大的前端技术。通过使用IntersectionObserver API,那些性能上的优化。转载 2024-05-31 08:44:59 · 27 阅读 · 0 评论 -
bpmn-js 多实例配置MultiInstanceLoopCharacteristics实现或签会签
使用bpmn-js流程图开发过程中会遇到会签和或签的问题,这个时候我们就需要使用多实例配置来实现BPMN 2.0的配置实现了,多实例任务,是从流程编辑概念之初也就是Activiti时期就存在的一个方式。所谓的多实例任务也就是字面意思,一个任务由多个人完成,常见于我们的审批流程的或签【一个审批完成即可】和会签【多个用户审批都通过才算结束】,由于存在多个成员的操作,引入了多实例的概念。转载 2024-05-31 08:42:57 · 310 阅读 · 0 评论 -
bpmn.js一个基于Bpmn 2.0的前端工作流展示和绘制工具
这里引用咖啡兔在《Activiti实战》一书中对于工作流的描述:工作流(Work Flow)引擎被广泛应用于各种信息化系统中,将原本散乱甚至混乱的业务梳理后制定成业务规范流程,进而约束业务的规范化处理和运转。需求人员、开发人员共同协作制定了符合BPMN 2.0规范的流程定义,之后将其部署到工作流引擎中,由它自动驱动业务流程的进行。完整的工作流周期如上:定义:收集业务需求并转化为流程定义。发布:在系统管理(平台)中发布流程定义。转载 2024-05-31 08:42:43 · 440 阅读 · 0 评论 -
企业级 npm 私有仓库部署方案
cnpmcore 对于企业级 npm 私有仓库部署方案来说,是一个不错的选择。通过在 tegg 中集成 cnpmcore,我们可以很方便的进行 npm 服务的二次开发,扩展自己的业务代码,满足企业定制化需求。转载 2024-05-30 08:57:08 · 23 阅读 · 0 评论 -
2个强大的 JavaScript 动画库,可帮助你提升用户体验
Popmotion 不会假定您想要设置动画的对象的属性,而是提供可在任何 JavaScript 环境中使用的简单、可组合的函数。它是一个轻量级的 JavaScript 动画库,具有简单的 API,可用于对 CSS 属性、SVG、DOM 属性和 JavaScript 对象进行动画处理。除了能够控制动画的持续时间和延迟之外,我们还可以在动画完成后的某个时刻反转动画,或者在动画进行过程中完全停止动画。它是一个可靠且经过充分测试的库,已编写了 1500 多个测试,在 GitHub 上拥有超过 1700 颗星。原创 2024-05-30 08:51:08 · 729 阅读 · 0 评论 -
WebSocket 从入门到入土
因新部门需求有一个后台管理需要一个右上角的实时的消息提醒功能,第一时间想到的就是使用WebSocket建立实时通信了,之前没整过,于是只能学习了。和原部门相比现在太忙了,快乐的日子一去不复返了。经典的加量不加薪啊!!!转载 2024-05-30 08:50:36 · 32 阅读 · 0 评论 -
前端重新部署如何通知用户刷新网页?
有时候上完线,用户还停留在老的页面,用户不知道网页重新部署了,跳转页面的时候有时候js连接hash变了导致报错跳不过去,并且用户体验不到新功能。转载 2024-05-30 08:50:01 · 25 阅读 · 0 评论