前言
因为要实现剪贴板历史记录性能，通过查阅electron剪贴板文档。没有发现有剪贴板变动的钩子事件，于是决定本人实现一个。
electron 中有读取剪贴板内容API，能够借助此API封装监听定时器办法。具体逻辑如下：
应用定时器一直判断内容是否雷同，如不雷同。执行剪贴板扭转回调
编写一剪贴板观察者类，实例化时传入监听的音讯/图片变动回调、因为频繁获取剪贴板内容可能会带来性能累赘，所以还须要反对传入自定义监听间隔时间。
返回的实例应该反对暂停和持续监听的办法。
编写剪贴板观察者类
首先定义结构函数参数的接口
import { clipboard, NativeImage } from 'electron';interface Options { // 定时器获取内容判断的距离 duration?: number; // 文本变动回调 textChange?: (text: string, beforeText: string) => void; // 图片变动回调 imageChange?: (image: NativeImage, beforeImage: NativeImage) => void;}接着定义类，编写结构器中解决传参的逻辑与裸露的api
class ClipboardObserver { // 定时器 timer: NodeJS.Timeout; // 变动前的文本（用于比照新获取的剪贴板文本） beforeText: string; // 变动去的图片（用于比照新获取的剪贴板图片） beforeImage: NativeImage; duration = 500; textChange: (text: string, beforeText: string) => void; imageChange: (image: NativeImage, beforeImage: NativeImage) => void; constructor(options: Options) { // 获取传入配置并保留到属性中 const { duration, textChange, imageChange } = options; this.duration = duration; this.textChange = textChange; this.imageChange = imageChange; // 判断传入回调，默认开始执行定时器 if (this.textChange || this.imageChange) { this.start(); } } /** * 开始 */ start(): void { // 记录剪贴板目前的内容 this.setClipboardDefaultValue(); // 设置定时器 this.setTimer(); } /** * 暂停 */ stop(): void { // 革除定时器 this.setTimer(); }}clearTimer负责调用clearInterval来革除定时器，setClipboardDefaultValue负责设置实例中记录上一次变动的内容。
class ClipboardObserver { ... /** * 革除定时器 */ clearTimer(): void { clearInterval(this.timer); } /** * 设置剪贴板默认内容 */ setClipboardDefaultValue(): void { if (this.textChange) { // electron剪贴板读取文本办法 this.beforeText = clipboard.readText(); } if (this.imageChange) { // electron剪贴板读取图片办法 this.beforeImage = clipboard.readImage(); } }}setTimer 负责比拟外围的逻辑，设置定时器，并在每一轮定时器回调中判断内容是否存在变动。如内容变动，执行内容变动回调。
class ClipboardObserver { ... /** * 设置定时器 */ setTimer(): void { // 设置定时器 this.timer = setInterval(() => { if (this.textChange) { const text = clipboard.readText(); // 判断内容是否与上次读取的内容不同 if (this.isDiffText(this.beforeText, text)) { // 执行变动回调 this.textChange(text, this.beforeText); // 记录此次内容 this.beforeText = text; } } if (this.imageChange) { const image = clipboard.readImage(); // 判断内容是否与上次读取的内容不同 if (this.isDiffImage(this.beforeImage, image)) { // 执行变动回调 this.imageChange(image, this.beforeImage); // 记录此次内容 this.beforeImage = image; } } }, this.duration); } /** * 判断内容是否不统一 * @param beforeText * @param afterText * @returns */ isDiffText(beforeText: string, afterText: string): boolean { return afterText && beforeText !== afterText; } /** * 判断图片是否不统一 * @param beforeImage * @param afterImage * @returns */ isDiffImage(beforeImage: NativeImage, afterImage: NativeImage): boolean { return afterImage && !afterImage.isEmpty() && beforeImage.toDataURL() !== afterImage.toDataURL(); }}打完出工
至此，剪贴板观察者类的逻辑曾经实现了。咱们在代码中能够这样食用
const clipboardObserver = new ClipboardObserver({ textChange: (text: string, beforeText: string) => { // 解决文本变动的逻辑 }, imageChange: (image: Electron.NativeImage, beforeText: Electron.NativeImage) => { // 解决图片变动的逻辑 }});// 也能够暂停clipboardObserver.stop();// 也能够再开始clipboardObserver.start();我的项目已开源到 electron-clipboard-observer 中。能够将代码拷到我的项目中应用
也能够在我的项目中装置依赖 electron-clipboard-observer 装置后在我的项目内可间接援用应用。
npm install electron-clipboard-observer或者yarn add electron-clipboard-observer应用
import ClipboardObserver from "electron-clipboard-observer"const clipboardObserver = new ClipboardObserver({ textChange() {}, imageChange() {}})我的项目地址
代码仓库
npm