如何忽略瀏覽器requestAnimationFrame不支持它

Question

比方說，我們有一個功能/模塊，增強網站。因此，它是不是真的有必要，它使用​​，這是not supported in older browsers像IE8/9。我可以填充​​，但由於它只是一個增強功能，所以舊版瀏覽器應該忽略它。此模塊的代碼看起來或多或少是這樣的：

;(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')); 

和「互動」與它

instance.init(); 
instance.method(); 

與此問題代碼是在IE9中彈出一個錯誤，因爲IE9不知道「更新」的功能，如​​。我可以添加一個if聲明到

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

和無處不在我使用它。儘管在模塊的某處檢查​​支持會容易得多。如果不支持，則什麼都不應該發生，舊的瀏覽器應該忽略它。於是，我就做這樣的事情

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

但是，這並不妨礙舊的瀏覽器無法執行像「的.init（）」或「方法（）」（在這種情況下）的所有方法。我是否真的必須在每種方法中使用這個if聲明還是還有其他事情可以做？

Answer 1

我不知道爲什麼，當你已經想出了邏輯，你選擇實現它作爲一個評論，而不是。只需更換與代碼中的註釋，你是好去：

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"); 
    }) 
}; 

Answer 2

不知道，但將這項工作：？

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() { 
    } 
    }; 
} 

然後所有的瀏覽器CAL調用init和方法，但方法，如果它不支載將不會執行任何東西。所以你只需要在模塊中進行更改。

Answer 3

你一定要填充工具吧！它會讓你的代碼更加簡潔，它不僅僅是瀏覽器的增強，在這種情況下，你也可以增強你編寫和構建你自己的代碼的方式。你絕對不想走那條你用if方法寫兩次方法的路線。 保羅愛爾蘭取得了RequestAnimationFrame一個偉大的填充工具：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

這個建議也適用於其他瀏覽器的功能，而不僅僅是RequestAnimationFrame，對於任何功能，例如大polyfills github.com/es-shims/es5-shim

Answer 4

的 「填充工具」 爲RAF只是setTimeout。你可以找到幾十個例子在網絡上，通常沿

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

setTimeout做同樣的事情作爲英國皇家空軍的線條，只是在較低的分辨率和不與引擎的渲染過程中被如此優化。 （RAF也通過一個hirez時間戳回調。）

底線是沒有理由擔心不被英國皇家空軍使用，以及如何退回，如果它不是。只需回落到setTimeout。

如果你真的想要去的，沒有它，如果它是無效的，那麼只要把下面一行在你的模塊

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

換句話說頂部，將其定義爲空（無操作）功能。然後在你的方法中使用RAF變量。