Javascript 在没有'；我不支持

假设我们有一个增强网站的功能/模块。所以它不是真的需要，它使用了

requestAnimationFrame

，类似于IE8/9。我可以使用polyfill

requestAnimationFrame

，但由于它只是一个增强功能，较旧的浏览器应该忽略它。此模块的代码大致如下所示：

;(function( window, document, undefined ) {
    'use strict';

    // Example Module
    // @constructor
    function Module( el, options ) {            
        // ...
    }

    Module.prototype = {
        init: function() {
            // If requestAnimationFrame is not supported, no alert should pop up        
            alert("init");
        },

        method: function() {
            // If requestAnimationFrame is not supported, no alert should pop up
            alert("start");
        }
    };

    window.Module = Module;

})( window, document );

然后我可以创建一个新实例

var instance = new Module(document.getElementById('test'));

并与之“互动”

这段代码的问题是，在IE9中会弹出一个错误，因为IE9不知道“较新”的函数，如

requestAnimationFrame

。我可以只添加一个

if

语句到

if ( window.requestAnimationFrame ) {
    var instance = new Module(document.getElementById('test'));
}

无论我在哪里使用它。不过，在模块中的某个地方检查一下

requestAnimationFrame

支持会容易得多。如果它不受支持，什么都不应该发生，旧的浏览器应该忽略它。所以我试着做一些类似的事情

// @constructor
function Module( el, options ) {            
    if ( !window.requestAnimationFrame ) {
        return false;
    }
    //...
}

---

但这并不能阻止旧浏览器执行所有方法，如“.init（）”或“.method（）”（在本例中）。我真的必须在每个方法中都使用这个

if

语句吗？或者我还可以做些什么吗？

不确定，但这是否有效：

if ( window.requestAnimationFrame ){
     Module.prototype = {
        init: function() {
            // If requestAnimationFrame is not supported, no alert should pop up        
            alert("init");
        },

        method: function() {
            // If requestAnimationFrame is not supported, no alert should pop up
            alert("start");
        }
    };
}
else{
  Module.prototype = {
    init: function() {
    },

    method: function() {
    }
   };
}

---

然后所有浏览器调用init和method，但如果不支持，方法将不会执行任何操作。因此，您只需在模块中进行更改。

不确定，但这是否可行：

if ( window.requestAnimationFrame ){
     Module.prototype = {
        init: function() {
            // If requestAnimationFrame is not supported, no alert should pop up        
            alert("init");
        },

        method: function() {
            // If requestAnimationFrame is not supported, no alert should pop up
            alert("start");
        }
    };
}
else{
  Module.prototype = {
    init: function() {
    },

    method: function() {
    }
   };
}

---

然后所有浏览器调用init和method，但如果不支持，方法将不会执行任何操作。因此，您只需在模块中进行更改。

您绝对应该填充它！它将使您的代码更加简洁，它不仅是对浏览器的“增强”，而且在本例中也是对您编写和构造自己代码的方式的增强。你肯定不想走那种用if块写两次方法的路线。 Paul Irish为RequestAnimationFrame制作了一个很棒的多边形填充：

---

此建议也适用于其他浏览器功能，不仅仅是RequestAnimationFrame，对于任何功能都有很好的多边形填充，例如github.com/es-shims/es5-shim

您绝对应该对其进行多边形填充！它将使您的代码更加简洁，它不仅是对浏览器的“增强”，而且在本例中也是对您编写和构造自己代码的方式的增强。你肯定不想走那种用if块写两次方法的路线。 Paul Irish为RequestAnimationFrame制作了一个很棒的多边形填充：

这一建议也适用于其他浏览器功能，不仅仅是RequestAnimationFrame，任何功能都有很好的多边形填充，例如github.com/es-shims/es5-shim

RAF的“多边形填充”只是

设置超时。你可以在网上找到几十个例子，通常是按照

window.requestAnimationFrame = window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame ||
    ... || 
    function (callback) {
        setTimeout(callback, 1000 / 60);
    };

setTimeout
与RAF做了相同的事情，只是分辨率较低，并且没有对引擎的渲染过程进行优化。（RAF还将hirez时间戳传递给回调。）

底线是，没有理由担心英国皇家空军不可用，如果不可用，如何撤退。只需回到
setTimeout

如果你真的不想使用它，如果它不可用，那么只需在模块的顶部放置以下行

var RAF = window.requestAnimationFrame || ... || function() { };

换句话说，将其定义为null（无op）函数。然后在方法中使用
RAF
变量。
RAF的“polyfill”只是
setTimeout
。你可以在网上找到几十个例子，通常是按照

window.requestAnimationFrame = window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame ||
    ... || 
    function (callback) {
        setTimeout(callback, 1000 / 60);
    };

setTimeout
与RAF做了相同的事情，只是分辨率较低，并且没有对引擎的渲染过程进行优化。（RAF还将hirez时间戳传递给回调。）

底线是，没有理由担心英国皇家空军不可用，如果不可用，如何撤退。只需回到
setTimeout

如果你真的不想使用它，如果它不可用，那么只需在模块的顶部放置以下行

var RAF = window.requestAnimationFrame || ... || function() { };

换句话说，将其定义为null（无op）函数。然后在方法中使用
RAF
变量。
我不知道为什么，当您已经理解了逻辑之后，您选择将其作为注释来实现。只需将注释替换为代码即可：

Module.prototype = {
    init: function() {
        if(typeof requestAnimationFrame === 'undefined') return;        
        alert("init");
    }
};

或者，如果愿意，您也可以检查
window.requestAnimationFrame


补充答复：
如何避免编写大量的
ifs
您可以将
if
语句封装在自己的控制结构中。在javascript中，我们通常使用函数来实现新的“语法”：

function restricted (f) {
    return function () {
        if(typeof requestAnimationFrame === 'undefined') return;
        return f.apply(this,arguments);
    }
}

现在，您可以使用
restricted（function…
而不是
function
定义方法：

Module.prototype = {
    init: restricted(function() {
        alert("init");
    }),

    method: restricted(function() {
        alert("start");
    })
};

我不知道为什么，当您已经理解了逻辑之后，您选择将其作为注释来实现。只需将注释替换为代码即可：

Module.prototype = {
    init: function() {
        if(typeof requestAnimationFrame === 'undefined') return;        
        alert("init");
    }
};

或者，如果愿意，您也可以检查
window.requestAnimationFrame


补充答复：
如何避免编写大量的
ifs
您可以将
if
语句封装在自己的控制结构中。与javascript中的常见情况一样，我们使用函数实现新的“语法”：

function restricted (f) {
    return function () {
        if(typeof requestAnimationFrame === 'undefined') return;
        return f.apply(this,arguments);
    }
}

现在，您可以使用
restricted（function…
而不是
function
定义方法：

Module.prototype = {
    init: restricted(function() {
        alert("init");
    }),

    method: restricted(function() {
        alert("start");
    })
};

我认为它应该可以工作，但是每个方法我必须写两次。@demrks是的，你必须写。另一个选项是放置
if（window.requestAnimationFrame）
在每个函数、init和方法的乞讨中。您已经提到了这一点。我认为它应该可以工作，但我必须将每个方法编写两次。@demrks是的，您必须这样做。另一个选项是放置
if（window.requestAnimationFrame）
在每个函数、init和方法的乞讨中。您已经提到了这一点。您可能是对的，但为IE10+编写要比仍然支持IE8容易得多，也快得多。这不仅仅是requestAnimationFrame，而是所有这些小工作