前端最佳实践(二)——能力检测
Opened this issue · 1 comments
wengjq commented
概念
能力检测,又可以称为特性检测,它的目标是识别浏览器的能力,它的基本模式如下:
if (object.property) {
// 使用 object.property
}
例子
在浏览器中可以采用 JavaScript 检测是否支持 WebP ,对支持 WebP 的用户输出 WebP 图片,否则输出其他格式的图片。
// 简化写法
function isSupportWebp() {
var isSupportWebp = false;
try {
isSupportWebp = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
} catch(err) {
console.log(err);
}
return isSupportWebp;
}
上面代码的问题在于我们每当使用一次 isSupportWebp 时都会进行一次判断。
为了防止每次调用都判断的问题,我们可以用一个变量来作缓存。
function isSupportWebp() {
var isSupportWebp = false;
try {
isSupportWebp = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
} catch(err) {
console.log(err);
}
return isSupportWebp;
}
var isSupportWebpTmp = isSupportWebp();
这样我们可以使用 isSupportWebpTmp 来判定浏览器是否支持 WebP 格式的图片,但缺点是多了一个变量来做缓存,代码有点冗余。
我们也可以使用立即执行的匿名函数的形式来进行判断。
var isSupportWebp = (function () {
var isSupportWebp = false;
try {
isSupportWebp = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
} catch(err) {
console.log(err);
}
return isSupportWebp;
})();
以上代码缺点是多了一个立即执行的匿名函数,当我在声明的时候,这个函数已经执行过一遍了。那有没有一种方法是在运行时才执行呢?
答案是肯定的。这时候可以利用惰性函数,代码如下:
// 惰性函数
function isSupportWebp() {
var isSupportWebpTmp = false;
try {
isSupportWebpTmp = document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
} catch(err) {
console.log(err);
}
isSupportWebp = function () {
return isSupportWebpTmp;
}
return isSupportWebp();
};
当我们每次都需要进行条件判断,其实只需要判断一次,接下来的使用方式都不会发生改变的时候,想想是否可以考虑使用惰性函数,能力检测只是其中一种类型。
wpfalive commented
函数内部了重写方法名会报错,"isSupportWebp" is read-only