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

主要尝试实现的两点功能:

  1. 文字自动换行

  2. 对文字选择划线

成果

这是我尝试的结果:

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的语音合成能力了。真的是简单的另人发指啊。

[33天] 不同窗口或iframe通信之Broadcast Channel API

前言 目前现代浏览器(支持最新ES标准)前端通信有PostMessage和Boradcast Channel两种消息机制。这里介绍Broadcast Channel API Broadcast Channel API 可以实现同 源 下浏览器不同窗口,Tab 页,frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。 通过创建一个监听某个频道下的 BroadcastChannel 对象,你可以接收发送给该频道的所有消息。一个有意思的点