LENTON'S BLOG
ES2023新内容概要
其中以数组又双叒叕新增了方法为主。可以更方便的操作数组了。也是因为数组数据处理是日常业务中最广范最多的原因了。
新内容清单:
Array.prototype.toSorted
Array.prototype.toReversed
Array.prototype.with
2023-10-23 10:29:50
180
0
原生JS的GZIP压缩解压缩API
Compression Stream API
Compression Stream API 提供了一种 JavaScript API,使用 gzip 或者默认格式压缩和解压缩数据流。 内置的压缩库意味着 JavaScript 应用不再需要包含其它压缩库,这使得应用程序的下载大小更小。
2023-08-31 11:50:44
206
0
JS前端实现摇杆轮盘
前端用JS实现一个向手游中可以360度滑动方向的控制轮盘。
这是从我的项目中抽出来的代码DEMO:
注: 因为是用在3D中,所以在屏幕中y轴的滑动对应的是3D世界中的z轴。所以代码中会有y,z,要注意区分。
2023-03-10 15:01:31
696
0
微信阅读网页版实现的初步尝试
前言
最近用微信阅读网页版时突然想到的。看了源代码,因为压缩了并没有看出什么有价值的东西。于是自己尝试了一下如何实现。
不知道微信阅读用的是什么Canvas JS库,我用了自己比较熟悉的FabricJS
主要尝试实现的两点功能:
-
文字自动换行
-
对文字选择划线
成果
这是我尝试的结果:
2022-12-22 11:43:54
535
0
伍-酷狗歌词文字粒子效果JS实现
前言废话
听歌时偶然发现了酷狗音乐APP的歌词增加了粒子效果。感觉很酷。然后就尝试着用JS在前端实现了一下。细节和酷狗还有差距。主要是尝试一下实现思路。
先看效果:
录屏效果太差了,直接看在线演示好一些
2022-11-14 19:19:40
615
0
肆-Web Components
整体介绍
用过Vue, React等现代前端框架的,对此概念会很熟悉:
Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的 web 应用中使用它们。
与框架不同的是,它是原生,无任何依赖的组件方案。
先来看下Web Components的三个要素。
一、Custom elements(自定义元素)
2022-11-11 13:58:15
796
0
Canvas中的文字居中和宽度
一直以来我都认为Canvas API中,文字的处理很麻烦。不好计算位置和边界尺寸。直到刚刚阅读掘金文章竟然发现,有相关的API。真的是有种 “难道我一直是个SB ?”。
获取文本宽度
measureText()
measureText(text) 方法参数为需要测量的文本, 返回一个关于被测量文本TextMetrics 对象包含的信息(例如它的宽度)
例如,用红色背景完整包裹文字:
const canvas = document.querySelecto
2022-08-25 14:32:37
1057
0
Notifications API系统通知
前言
这是HTML5时代(ES6)可以跨过页面,页签。直接从系统层面弹出消息通知的API。
Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外,因此即使用户已经切换标签页或移动到不同的应用程序,也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。
权限申请
想使用此API需要用户授权。所以需要先申请授权:
Notification.requestPermission().then(function(p
2022-07-14 14:22:57
737
0
[34天] 各种好玩的WEB API
前言
最近读MDN Web API,发现了一些好玩有趣的API,也许在有些场景下十分有用,特此记录分享一下。
Web Speech API 语音识别与合成
语音识别与语音合成功能,
来吧,再控制台输入以下代码并回车,你听到了什么?
window.speechSynthesis.speak(new window.SpeechSynthesisUtterance('你好帅'))
你好帅!,没错这就是Web Speech API的语音合成能力了。真的是简单的另人发指啊。
2022-06-19 13:28:49
773
0
[33天] 不同窗口或iframe通信之Broadcast Channel API
前言
目前现代浏览器(支持最新ES标准)前端通信有PostMessage和Boradcast Channel两种消息机制。这里介绍Broadcast Channel API
Broadcast Channel API 可以实现同 源 下浏览器不同窗口,Tab 页,frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。
通过创建一个监听某个频道下的 BroadcastChannel 对象,你可以接收发送给该频道的所有消息。一个有意思的点
2022-06-18 17:29:23
962
0