引言
在现代 Web 应用中，复制功能是一个常见的需求，无论是用户分享信息、复制链接，还是在表单中快速复制数据。虽然实现一个简单的复制功能看似容易，但在实际开发中，我们需要考虑兼容性、性能、安全以及用户体验等多个方面。本文将探讨如何优化 Web 应用中的复制功能，确保在不同浏览器环境下高效运行，同时避免不必要的性能开销。
复制功能FAQ
兼容性问题：不同浏览器对剪贴板的支持有所不同。现代浏览器的安全上下文是支持 navigator.clipboard API,它提供了强大且安全的剪贴板操作能力，允许开发者在用户交互的上下文中轻松地读取和写入剪贴板内容，而旧版浏览器则依赖于 document.execCommand 方法,由于它已被标记为废弃，其在部分浏览器中的支持情况逐渐变得不稳定。如果在每次调用复制功能时都进行兼容性判断，不仅会增加代码的复杂度，还会带来不必要的性能开销
A: 使用立即执行函数（IIFE）在项目初始化时确定并返回一个合适的复制函数。这样可以避免在每次调用时重复进行兼容性判断，从而提高性能。
开发体验问题：navigator.clipboard API 返回的是一个 Promise，允许开发者在复制操作成功或失败后执行相应的逻辑，从而可以为用户提供明确的反馈。然而，document.execCommand 返回的是一个布尔值，仅表示复制操作是否成功，这使得开发者难以在两种实现方式之间统一处理逻辑。
A: 使用 Promise 将 document.execCommand 实现的复制功能包装一层，根据成功或失败进行返回，从而统一处理逻辑
代码实现
/**
* 创建一个伪造元素（input 或 textarea），用于在不支持 navigator.clipboard 的浏览器中实现复制功能。
* 伪造元素会被隐藏在页面中，不会影响页面布局。
* @param value - 需要复制的文本内容
* @returns 返回创建好的伪造元素
*/
function createFakeElement(value: string): HTMLInputElement {
const fakeElement = document.createElement('input');
fakeElement.setAttribute('readonly', ''); // 设置为只读，防止用户编辑
fakeElement.style.position = 'absolute'; // 设置为绝对定位
fakeElement.style.left = '-9999px'; // 将元素隐藏在页面外
fakeElement.value = value; // 设置元素的值为需要复制的文本
return fakeElement;
}
/**
* 复制功能
* 根据浏览器是否支持 navigator.clipboard API，选择合适的复制方法。
* 如果支持 navigator.clipboard，则使用现代剪贴板 API 实现复制。
* 如果不支持，则使用传统的 document.execCommand 方法实现复制。
* @returns 返回一个复制函数，接受需要复制的文本作为参数
*/
export const clipboard = ((): ((text: string) => Promise<string>) => {
if (navigator.clipboard) {
// 如果浏览器支持 navigator.clipboard，使用现代剪贴板 API
return async (text: string)=> {
// 使用 navigator.clipboard.writeText 将文本写入剪贴板
return await navigator.clipboard.writeText(text).then(res=>{
console.log('Text copied to clipboard successfully');
return text; // 返回复制的文本
});
};
} else {
// 如果浏览器不支持 navigator.clipboard，使用传统的 document.execCommand 方法
return (text: string)=> {
return new Promise((resolve, reject) => {
const fakeElement = createFakeElement(text); // 创建伪造元素
document.body.appendChild(fakeElement); // 将伪造元素添加到页面中
fakeElement.select(); // 选中伪造元素的内容
try {
const result = document.execCommand('copy'); // 执行复制操作
if (result) {
resolve(text); // 复制成功时返回复制的文本
} else {
reject(new Error('Failed to copy text'));
}
} catch (error) {
reject(error); // 复制失败时抛出错误
} finally {
fakeElement.remove(); // 移除伪造元素
}
});
};
}
})();
后记
感谢阅读,敬请斧正!
