发表于
2023-11-19 15:12:20
剪映APP的视频特效如何在Web中JS实现
发表于
2023-11-19 15:12:20
剪映APP的视频特效如何在Web中JS实现
发表于
2023-11-14 16:37:18
mp4box.js加WebCodecs 解码MP4视频帧并渲染
发表于
2023-11-14 16:37:18
mp4box.js加WebCodecs 解码MP4视频帧并渲染
发表于
2023-11-09 22:46:45
20行JS代码实现屏幕录制
在开发中可能有遇到过屏幕录制的需求，无论是教学、演示还是游戏录制，都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多，现在浏览器中的MediaRecorder也提供了这种能力。MediaRecorder是一种强大的技术，可以在浏览器端实现屏幕录制功能。本文将介绍如何使用JSMediaRecorder实现屏幕录制。代码实现要实现屏幕录制，我们需要通过navigator.mediaDevices.getDisplayMedia()方法获取屏幕媒体流，这个方法会弹出一个选择窗口，让用户选择要录制的屏幕或窗口。但出于安全原因，发起录制时必须确保用户手势触发捕获，例如点击按钮：const button = document.createElement("button");
button.innerHTML = "capture";
document.body.append(button);
button.addEventListener("click", async () => {
// TODO
});点击后，获取视频流并录制，获取到媒体流后，我们可以将其传给MediaRecorder对象后开始屏幕录制。const stream = await navigator.mediaDevices.getDisplayMedia();
const recoder
...继续阅读
(63)
发表于
2023-11-09 00:00:00
奇趣周刊 - 第 26 期
奇趣周刊，每周四发布，分享有趣的软件，程序，动态新闻等。 周刊列表 | rss 订阅 江畔渔火对愁眠。 1.Clash 系列删库事件 2023 年 11 月 2 日，Fndroid/clash_for_windows_pkg 作者由于某些原因，删除仓库中的 releases 包。 3 日，clash 核心也随之删库，紧接着，一系列基于 clash 核心的软件都宣告删库或者 archived。 2.令人困惑的 git 术语 https://jvns.ca/blog/2023/11/01/confusing-git-terminology/ 作者举例了很多有关 git 指令奇怪的术语。 3.GitHub 如何恢复旧的 feed 流推送？ https://github.com/wangrongding/github-old-feed 一个油猴脚本，将 GitHub 首页的推送信息进行优化，显示效果也是非常不错的。 4.知乎评论时间精确到秒 - 油猴脚本 https://meta.appinn.net/t/topic/47711/18 来自一位网友的分享，我修改了一些内容和知乎网页风格保持一致。将显示 几小时前 的时间显示改为正常 年-月-日 时-分-秒 油猴脚本代码 // ==UserScript== // @name 知乎评论时间精确到秒 // @namespace http://ta
...继续阅读
(43)
发表于
2023-11-08 09:56:13
前端如何防止数据被异常篡改并且复原数据
每天，我们都在和各种文档打交道，PRD、技术方案、个人笔记等等等。其实文档排版有很多学问，就像我，对排版有强迫症，见不得英文与中文之间不加空格。所以，最近在做这么一个谷歌扩展插件chrome-extension-text-formatting，通过谷歌扩展，快速将选中文本，格式化为符合中文文案排版指北的文本。emmm，什么是排版指南？简单来说它的目的在于统一中文文案、排版的相关用法，降低团队成员之间的沟通成本，增强网站气质。举个例子：中英文之间需要增加空格正确：在 LeanCloud 上，数据存储是围绕AVObject进行的。错误：在LeanCloud上，数据存储是围绕AVObject进行的。在 LeanCloud上，数据存储是围绕AVObject进行的。完整的正确用法：在 LeanCloud 上，数据存储是围绕AVObject进行的。每个AVObject都包含了与 JSON 兼容的 key-value 对应的数据。数据是 schema-free 的，你不需要在每个AVObject上提前指定存在哪些键，只要直接设定对应的 key-value 即可。例外：「豆瓣FM」等产品名词，按照官方所定义的格式书写。中文与数字之间需要增加空格正确：今天出去买菜花了 5000 元。错误：今天出去买菜花了 5000元。今天出去买菜花了5000元。当然，整个排版规范不仅仅局限于此，上面只是简单列出部分
...继续阅读
(64)
发表于
2023-11-06 09:30:40
理解JavaScript模运算符
本文翻译自Understanding the JavaScript Modulo Operator，作者：joshwcomeau， 略有删改。当我第一次学习编码时，我记得发现模运算符（%）非常令人困惑。😬当你不明白它的原理的时候，它产生的值看起来完全是随机的：const what = 10 % 4; // 2
const the = 10 % 10; // 0
const heck = 4 % 10; // 4在这篇文章中，我们将通过改进除法的心理模型来学习这个运算符是如何工作的，文末还将介绍一个实用的日常实践。受众群体:这篇博客文章是为初级到中级JavaScript开发人员所写。一些JavaScript知识是假设的，但核心内容应该对每个人都有用！重新思考假设我们有下面的计算：12 ÷ 4除法常常让人感觉非常抽象或理论化，但有一种实用的方法来思考它：我们可以把一个数字分成大小相等的组。12 ÷ 4的计算结果为3，因为每个组正好包含3个项目。从本质上讲我们正在计算每个组中将包含多少个项目。在上面的示例中我们的被除数是12。使用除法时，它可以用很多不同的方式来分割。假设我们有以下等式：11 ÷ 4这个方程式的值为2.75。每组有2个完整的项目，然后是另一个项目的3/4。如果我们分披萨或蛋糕，这是可行的。但如果这些物品是不可摧毁的呢？如果我们不能把每一项分解成更小的部分呢？在这种情况下，
...继续阅读
(75)
发表于
2023-11-04 14:55:52
通过实例理解Web应用授权的几种方式
发表于
2023-10-28 11:39:20
为什么我更推荐命令式 Modal
该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/programming/why-i-prefer-imperative-modalModal 模态对话框。在中台业务中非常常见。什么是声明式 Modal组件库中一般都会内置这类组件，最为参见的声明式 Modal 定义。例如 Antd 5 中的声明式 Modal 是这样定义的。const App: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false)
const showModal = () => {
setIsModalOpen(true)
}
const handleOk = () => {
setIsModalOpen(false)
}
const handleCancel = () => {
setIsModalOpen(false)
}
return (Open ModalSome contents...Some contents...Some contents...< />
)
}上面是一个受控的声明式 Modal 定义，写起来非常臃肿。你需要手动控制 Modal 的 Open 状态。并且你需要首先定
...继续阅读
(79)
发表于
2023-10-26 22:33:57
眨个眼就学会了PixiJS
本文简介带尬猴，我是德育处主任当今的Web开发中，图形和动画已经成为了吸引用户注意力的重要手段之一。而Pixi.js作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选（我吹的）。本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们快速光速入门，掌握Pixi.js的用法。实际工作中我还没有用上Pixi.js，本文只是记录我的学习过程。将我认为入门时需要掌握的知识点记录下来。所以，你们懂的，太难的问题我回答不上，或者我会用拆特鸡皮蹄敷衍你。环境搭建本文将使用原生三件套的方式讲解如何使用Pixi.js，你可以根据自己的需求搭建环境。我使用VS Code开发，并在VS Code安装了Live Server插件方便启动本地服务。创建好项目后就需要安装Pixi.js，常用的方式有CDN和NPM，选其中一种就行。本文使用 Pixi.js 7.2 版本CDN本文为了和各位工友一起快速上手Pixi.js，所以会使用CDN的方式引入Pixi.js。在实际项目开发中，你最好还是将Pixi.js保存到你的项目中再引入。根据你的项目需求选择对应的Pixi.js版本：🔗 Pixi.js 历史版本下载地址NPM工作中很多项目都会使用脚手架的方式进行开发，通常也会使用npm的方式下载依赖包。Pixi.js也提供了这种方式。npm i pixi.js下载好Pixi.js后，在需要用到Pix
...继续阅读
(64)
发表于
2023-10-26 22:26:45
有关安卓软键盘遮挡输入框的问题分析及处理方案
本文参与了1024 程序员节活动，欢迎正在阅读的你也加入。经过多番查阅资料，发现只通过前端是无法完美处理该问题的。主要原因在于:js没有相关接口可以准确获取安卓手机软键盘的高度，这样也就无法处理当软键盘弹出时，能够将输入框顶上去，并且与软键盘完美的贴合，比如输入框在最底部的场景，此时页面滚动高度不够，因此无法准确的滚动到底，使得软键盘将输入框顶上去并与之完美的贴合。js并不能监听软键盘关闭的事件，比如点击折叠按钮关闭软键盘，此时输入框焦点还在，无法触发输入框的blur事件，有人说会触发resize事件，但是经过我的测试，resize事件并未触发。以下是我的解决方案。首先封装一个获取页面视图宽高的工具函数，代码如下:const getViewSize = ():{ width:number;height:number } {
if (window.innerWidth) {
return {
width: window.innerWidth,
height: window.innerHeight
};
} else if (document.compatMode === 'CSS1Compat') {
return {
width: document.documentElement.c
...继续阅读
(64)
发表于
2023-10-25 13:48:45
通过实例理解Web应用用户密码存储方案
发表于
2023-10-25 08:56:56
2年过去了，React Forget 凉了么？
大家好，我卡颂。在 2 年前的React Conf 2021，黄玄第一次介绍了React Forget，这是个可以生成等效于 useMemo、React.memo的编译器（可以简单理解为，有了它，开发者不需要考虑React项目的性能优化了）。由于React独特的架构（全局更新），React 性能优化一直让开发者头疼，这里主要有两个问题：很多开发者不知道如何正确使用性能优化API，甚至有人认为FC（函数组件）中所有函数都应该包裹在useCallback中即使写出性能优秀的项目，随着需求迭代，新增的代码很可能破坏之前的优化效果所以，React Forget的愿景一经宣传，就受到社区极大的关注。从React Conf 2021油管播放量来看，React Forget演讲占了所有 19 个演讲总播放量的 1/4（当然，也可能是因为黄玄长得帅）。现在2年过去了，我们很少听到React Forget的进展，黄玄也离开React 团队了。这让我们不禁要问，React Forget凉了么？本文会聊聊React Forget当前的进展、接下来的发展方向，以及他的工作原理。欢迎围观朋友圈、加入人类高质量前端交流群，带飞React Forget 凉了么？首先要明确的是，React Forget并没有凉，相反，他正在稳定迭代。根据React团队成员Mofei Zhang在React Advanced Lo
...继续阅读
(78)
发表于
2023-10-24 21:24:05
难以置信，一个小小的需求让我捣鼓出一个提效的网站来
难以置信，一个小小的需求让我捣鼓出一个提效的网站来本文参与了1024 程序员节活动，欢迎正在阅读的你也加入。需求介绍事情是这样的，有个群友在业务当中碰到一个小小的需求，需求是这样的: 页面当中存在多个输入框，输入框的 value 值是一个数值组成的字符串（盲猜应该是身份证号码），这个字符串的位数是 15 位或者是 18 位，例如:'621848063680370'(15 位)和'621848063688370808'(18 位)，然后默认的值是这样的，现在问题来了，需求希望在这些数值中插入空白符号，比如 15 位的数字就按照 6 + 6 + 3 的格式分隔，分隔的时候需要使用空白符号。比如'621848063680370'分隔后应该变成'621848 063680 370',也就是数字位数到了第 6 位就加个空白符号分隔，...依次类推，而 18 位数字的分割规则则是:6 + 4 + 4 + 4。比如'621848063688370808'应该分隔成'621848 0636 8837 0808'。这个需求就是对字符串的处理，提到分隔替换，那么我们就可以想到强大的字符串替换方法 replace，这个方法可以接受 2 个参数，一个参数通常是一个正则表达式，第二个参数则是一个回调函数，用于定义替换后返回字符串。因此，我的第一个想法就是使用正则表达式去处理，如何处理呢？原理分析首先我们需要
...继续阅读
(97)
发表于
2023-10-20 22:02:38
JavaScript实现元素吸顶(踩小坑)
背景页面内的tab导航需要在滚动到视口顶部的时候进行吸顶，这个功能算是比较常见，也比较容易实现。刚开始按照自己想到的最简单的方法来实现，写完代码后进行测试，发现页面有很明显的bug，心里直呼大意了，特此记录下。错误示例DOCTYPE htmlDocument.page-container {
width: 1200px;
margin: 0 auto;
}
.top-area {
height: 300px;
background-color: lightskyblue;
margin-bottom: 20px;
}
.tab {
padding: 0 20px;
display: flex;
justify-content: space-between;
background-color: #f4f4f4;
}
.tab.fixed {
position: fixed;
width: 1200px;
box-sizing: border-box;
top: 0;
}
.tab
...继续阅读
(79)
发表于
2023-10-19 23:15:17
JS实现页面导航与内容相互锚定
引文在日常的学习和工作中，经常会浏览的这样一种网页，它的结构为左侧是侧边栏，右侧是内容区域，当点击左侧的侧边栏上的目录时，右侧的内容区域会自动滚动到该目录所对应的内容区域；当滚动内容区域时，侧边栏上对应的目录也会高亮。恰巧最近需要写个类似的小玩意，简单的做下笔记，为了避免有人只熟悉Vue或React框架中的一个框架，还是使用原生JS来进行实现。思路点击侧边栏上的目录时，通过获取点击的目录的类名、或id、或index，用这些信息作为标记，然后在内容区域查找对应的内容。滚动内容区域时，根据内容区域的内容的dom节点获取标记，根据标记来查找目录。实现页面初始化首先把html和css写成左边为目录，右边为内容的页面结构，为测试提供ui界面。DOCTYPE html目录与内容相互锚定.container {
display: flex;
flex-direction: row;
}
#nav {
width: 150px;
height: 400px;
background-color: #eee;
}
#nav .nav-item {
cursor: pointer;
}
#nav .nav-item.active {
font-weight: bold;
...继续阅读
(61)
发表于
2023-10-18 15:29:57
express.static 中间件如何设置 Cache-Control
const express = require('express');const path = require('path');const app = express();// 设置静态文件目录app.use(express.static(path.join(__dirname, 'public'), {maxAge: '1d', // 设置缓存的最大时间etag: false, // 禁用 ETaglastModified: false, // 禁用 Last-ModifiedsetHeaders: function (res, path) {res.setHeader('Cache-Control', 'public, max-age=86400'); // 设置 Cache-Control 标头}}));app.listen(3000, () => {console.log('Server started on port 3000');});
...继续阅读
(51)
发表于
2023-10-17 06:15:12
window.open打开并修改名字
直接看代码：123456789 const win = window.open(routeData.href, this.windowTitle); win.windowTitle = this.windowTitle; const loop = setInterval(function() { if (win.closed) { clearInterval(loop); } else { win.document.title = win.windowTitle; } }, 1000);web开发分享声明:本文采用BY-NC-SA协议进行授权 |WEB开发分享转载请注明转自《window.open打开并修改名字》
...继续阅读
(60)
发表于
2023-10-16 03:42:00
使用CloudFlare Workers 创建自己的AI程序，基于meta llama-2-7b大语言模型
发表于
2023-10-15 14:26:45
JavaScript中的Promise
为什么需要Promise？JavaScript在执行异步操作时，我们并不知道什么时候完成，但是我们又需要在这个异步任务完成后执行一系列动作，传统的做法就是使用回调函数来实现，下面举个常见的例子。DOCTYPE htmlDocumentfunction loadImage(imgUrl, callback) {
const img = document.createElement("img");
img.onload = function () {
callback(this);
};
img.src = imgUrl;
}
loadImage(
"https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg",
(img) => document.body.appendChild(img)
);上面这个例子会在图片加载完成后将图片放置在body元素下，随后在页面上也会展示出来。但是如果我们需要在加载完这张图片后再加载其它的图片呢，只能在回调函数里面再次调用loadImageloadImage(
"
...继续阅读
(71)
发表于
2023-10-09 21:03:47
dom-to-image库是如何将html转换成图片的
dom-to-image库可以帮你把dom节点转换为图片，它的核心原理很简单，就是利用svg的foreignObject标签能嵌入html的特性，然后通过img标签加载svg，最后再通过canvas绘制img实现导出，好了，本文到此结束。另一个知名的html2canvas库其实也支持这种方式。虽然原理很简单，但是dom-to-image毕竟也有1000多行代码，所以我很好奇它具体都做了哪些事情，本文就来详细剖析一下，需要说明的是dom-to-image库已经六七年前没有更新了，可能有点过时，所以我们要看的是基于它修改的dom-to-image-more库，这个库修复了一些bug，以及增加了一些特性，接下来我们就来详细了解一下。将节点转换成图片我们用的最多的api应该就是toPng(node)，所以以这个方法为入口：function toPng(node, options) {
return draw(node, options).then(function (canvas) {
return canvas.toDataURL();
});
}toPng方法会调用draw方法，然后返回一个canvas，最后通过canvas的toDataURL方法获取到图片的base64格式的data:URL，我们就可以直接下载为图片。看一下draw方法：functio
...继续阅读
(63)
发表于
2023-10-09 14:50:57
JS改变AudioBuffer音量并下载为新audio音频
发表于
2023-10-09 14:50:57
JS改变AudioBuffer音量并下载为新audio音频
发表于
2023-10-07 15:06:01
停止在 JavaScript 中使用 Promise.all()
免费体验 Gpt4 plus 与 AI作图神器，我们出的钱 体验地址：体验JavaScript 中的 Promises 是什么？如果你偶然发现了这篇文章，你可能已经对 promises 很熟悉了。但对于那些新接触 JavaScript 的人来说，我们来详细解释一下。从本质上讲，Promise 对象表示异步操作的最终完成或失败。有趣的是，当promise被创建时，其值可能不会立即可用。const promise = new Promise((resolve, reject) => {
// 一些异步操作
if (/* 操作成功 */) {
resolve(result);
} else {
reject(error);
}
});它们有3种状态：Pending（待定）：这是初始状态，既没有实现也没有被拒绝。Fulfilled（已实现）：当 promise 成功完成并产生值时的状态。Rejected（已拒绝）：当发生错误并且 promise 中的操作不成功时的状态。一旦 promise 被解决，你可以使用.then()来处理结果，使用.catch()来管理其执行过程中出现的任何错误。promise
.then(result => {
console.log('成功：', result);
}
...继续阅读
(58)
发表于
2023-10-07 08:34:43
聊聊前端框架的未来 Signals
Signals 在目前前端框架的选型中遥遥领先！国庆节前最后一周在 Code Review 新同学的 React 代码，发现他想通过 memo 和 useCallback 只渲染被修改的子组件部分。事实上该功能在 React 中是难以做到的。因为 React 状态变化后，会重新执行 render 函数。也就是在组件中调用 setState 之后，整个函数将会重新执行一次。React 本身做不到。但是基于 Signals 的框架却不会这样，它通过自动状态绑定和依赖跟踪使得当前状态变化后仅仅只会重新执行用到该状态代码块。个人当时没有过多的解释这个问题，只是匆匆解释了一下 React 的渲染机制。在这里做一个 Signals 的梳理。优势对比 React，基于 Signals 的框架状态响应粒度非常细。这里以 Solid 为例：import { createSignal, onCleanup } from "solid-js";
const CountingComponent = () => {
// 创建一个 signal
const [count, setCount] = createSignal(0);
// 创建一个 signal
const [count2] = createSignal(666);
// 每一秒递增 1
const interva
...继续阅读
(63)
发表于
2023-09-29 19:43:43
了解JavaScript中的单例模式
定义单例模式的定义：确保一个类只有一个实例，并且提供访问这个实例的全局访问点。好处对于一些场景，全局只需要一个实例即可，单例模式可以复用已产生的对象，避免频繁的创建与销毁对象。使用场景上面提到了单例模式确保一个类只会产生一个对象，那么使用场景上也会紧紧围绕这一条规则，所使用的实例会保持唯一性。前端范围内，例如浏览器的window对象、某些登录弹窗等等。实现JavaScript在ES6出来前没有类的概念，普通函数就能够充当构造函数来产生对象function Person(name, age) {
this.name = name;
this.age = age;
}
const p = new Person('ztq', 18)那么使用ES5来实现单例模式可能就和其他静态语言实现单例模式就会有很大的差异普通单例模式思路就是就变量来标志是否已经创建过变量，如果已经创建过变量，那么在下一次返回的时候直接返回之前创建的变量。ES5实现function Person(name) {
this.name = name;
this.instance = null;
}
Person.prototype.getName = function () {
return this.name;
};
Person.getInstance = function (name) {
...继续阅读
(65)
发表于
2023-09-28 16:27:44
效能工具之node在项目中的应用（三）《以给几百个el-select统一加filterable属性可搜索为例》
问题描述最近接手一个老项目，vue2+elementUI+webpack+...技术栈主要做的就是改改bug，优化一下，提升用户的使用体验nvm改一下node版本，npm装一下依赖，跑起来，然后点一点，看看长什么样子上来笔者就发现了一个可以优化的点，就是：项目中有下拉框el-select组件，可前人在写代码时，部分el-select加上了filterable属性，部分没有加上，导致部分下拉框可模糊匹配搜索，部分不可以正常来说，下拉框都要支持模糊匹配搜索的问题不大，一个个加，可是手动复制粘贴filterable属性效率太低，能不能统一批量修改，批量添加filterable属性呢？答案是可以的。解决方案一 使用vscode自带的搜索工具，统一加filterable简化一下，假设我有下面的目录结构如上图，我们需要把el-select组件，没filterable的，加上。有的不用动。我们可以直接使用vscode自带的文件搜索功能先把所有的filterable替换为空（filterable属性，只有el-select组件用到了）再匹配到所有的el-select标签，再直接替换就完成任务了如下图示操作第一步图示：（filterable关键字替换为空，只针对.vue文件操作）第二步图示：针对.vue文件的el-select标签匹配替换（即为新加属性）从而完成任务解决方案二 使用node写一个脚本
...继续阅读
(72)
发表于
2023-09-28 14:16:14
通过助记词或者私钥获取到用户的钱包地址
在以太坊中，你可以通过助记词（mnemonic）或私钥（private key）来获取用户的钱包地址。以下是使用两种方法的示例：1. 使用助记词获取钱包地址：首先，确保你的应用程序中包含了以太坊的 JavaScript 库（例如 Web3.js 或 ethers.js）。使用用户的助记词创建一个以太坊钱包：const ethers = require('ethers'); // 或者使用 Web3.js
// 用户的助记词（示例，用实际的助记词替换）
const mnemonic = 'your twelve word mnemonic phrase goes here';
// 使用助记词创建一个钱包
const wallet = ethers.Wallet.fromMnemonic(mnemonic);
// 获取钱包地址
const address = wallet.address;
console.log('钱包地址:', address);2. 使用私钥获取钱包地址：同样，确保你的应用程序中包含了以太坊的 JavaScript 库。使用用户的私钥创建一个以太坊钱包：const ethers = require('ethers'); // 或者使用 Web3.js
// 用户的私钥（示例
...继续阅读
(51)
发表于
2023-09-25 13:39:21
超级组合！NestJS + tRPC 与CSR绝佳搭档React Query，开启全新开发时代！
该渲染由 Shiro API 生成，可能存在排版问题，最佳体验请前往：https://innei.in/posts/programming/nestjs-with-trpc-and-dependency-injection最近在重写一个 NestJS 的项目，想着这么集成下 tRPC 供管理面板前端使用。原本在管理面板都是裸写的 API 接口，也没有任何响应类型。如果使用 tRPC 的话，不仅不用手写 API 还能做到 End-to-End Type-safe.tRPC 是什么RPC 是指远程过程调用 (Remote procedure call)，tRPC 的t强调了 TypeScript 的实现，利用了 TypeScript 的类型系统实现了在客户端与服务端之间的通信过程并提供高效的类型安全。tRPC 一般在全栈框架中用的比较多，比如 Next.js。况且在 Next.js 推广 App Router 之后，类似 RPC 的方式也会变得比较流行，可以省去很多麻烦。NestJS 接入 tRPCNestJS 接入 tRPC 的方式非常简单。和普通服务端接入类似。下面都以fastify作为 NestJS 应用的适配器实现。NestJS 本身是一个抽象层，我们可以获取到源服务器的实例，这里是fastify。按照 tRPC 的文档，我们对fastify实例注入插件的形式来完成 tRPC
...继续阅读
(77)