【前端性能优化】使用惰性函数减少无意义的重复判断

什么是惰性函数？

惰性函数表示函数执行的分支只会在函数第一次调用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了。

惰性函数的本质就是函数重写

场景

例如很多时候我们需要判断浏览器是否支持某一套api，如果支持的话就可以直接使用api实现相关的功能，如果不支持的话采用另一种实现方式

例子

我们需要完成一个功能是将给定的text参数复制到剪贴板,我们知道浏览器有一套api是navigator.clipboard，可以完成相关操作，假如不支持的话我们只能使用比较常规的方式实现

function copyText(text){if(navigator.clipboard){navigator.clipboard.writeText(text).then(()=>{console.log("复制成功");}).catch((err)=>{console.log("复制失败");});}else{var textarea = document.createElement("textarea");textarea.value = text;document.body.appendChild(textarea);textarea.select();document.execCommand("copy");document.body.removeChild(textarea);}
}

看起来没问题，但是我们每次复制的时候都需要先判断navigator.clipboard明显是不合理的，因为用户的浏览器环境不太可能发生突然的变更，所以重复的判断可能会造成性能浪费

所以我们采用惰性函数的方式重构这段代码，只检测一次环境，然后内部对函数本身进行重写

function copyText(text) {const useModernAPI = Boolean(navigator.clipboard);if(useModernAPI){copyText = function (text) {navigator.clipboard.writeText(text).then(() => {console.log("复制成功");}).catch((err) => {console.log("复制失败");});}}else{copyText = function (text) {var textarea = document.createElement("textarea");textarea.value = text;document.body.appendChild(textarea);textarea.select();document.execCommand("copy");document.body.removeChild(textarea);}}copyText()}