通过使用惰性函数性能提升
大约 1 分钟
惰性函数
惰性函数(Lazy Function)的核心思想是, 在第一次调用函数时才进行初始化(例如赋值、复杂的计算或资源分配等), 之后的调用则直接使用已经初始化的函数。 通过闭包和条件语句来实现。
函数内容
比如说我们有一个复制文本的函数
缺点:每次调用,内部都会进行一次判断
function copyText(text) {
if (navigator.clipboard) {
navigator.clipboard.writeText(text);
} else {
const input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
}
}
通过立即执行函数优化后
浏览器支不支持某种 API 在页面打开后就能确定,不需要每次都去判断。
所以我们改成:确定支持某种 API 后,就固定下来。
const copyText = (function() {
if (navigator.clipboard) {
return (text) => {
navigator.clipboard.writeText(text);
}
} else {
return (text) => {
const input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
}
}
}());
通过AI优化后的代码
// 定义一个函数,用于处理旧浏览器的复制逻辑
function copyTextUsingExecCommand(text) {
return new Promise((resolve, reject) => {
const input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
document.execCommand('copy', (result) => {
document.body.removeChild(input);
if (result === true) {
resolve('复制成功');
} else {
reject('复制失败');
}
});
});
}
// 定义一个函数,用于处理现代浏览器的复制逻辑
async function copyTextUsingClipboardAPI(text) {
try {
await navigator.clipboard.writeText(text);
return '复制成功';
} catch (err) {
return `复制失败: ${err}`;
}
}
// 主函数,根据浏览器支持选择合适的复制方法
const copyText = (function() {
if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
// 使用现代浏览器的Clipboard API
return copyTextUsingClipboardAPI;
} else {
// 使用旧方法
return copyTextUsingExecCommand;
}
})();
// 使用示例
copyText('Sample text to copy')
.then((message) => console.log(message))
.catch((error) => console.error(error));