javascript - js的html5方法有些有前缀，如何写兼容的代码？

Question

比如animationend就有几种：webkitAnimationEnd/oAnimationEnd/MSAnimationEnd/animationend，这样应该怎么写兼容的代码？或者是优雅降级的代码

比如requestAnimationFrame和cancelRequestAnimFrame可以这样写，但是animationend这样写不行...

window.requestAnimationFrame = (function(){
    return  window.requestAnimationFrame   ||  //Chromium
        window.webkitRequestAnimationFrame ||  //Webkit
        window.mozRequestAnimationFrame    || //Mozilla Geko
        window.oRequestAnimationFrame      || //Opera Presto
        window.msRequestAnimationFrame     || //IE Trident?
        function(callback, element){ //Fallback function
            console.log("Fallback");
            return window.setTimeout(callback, 1000/30);
        }

})();

window.cancelRequestAnimFrame = ( function() {
    return window.cancelAnimationFrame          ||
        window.webkitCancelRequestAnimationFrame||
        window.mozCancelRequestAnimationFrame   ||
        window.oCancelRequestAnimationFrame     ||
        window.msCancelRequestAnimationFrame    ||
        clearTimeout
} )();

根据 dolymood 的方法，加上我wiki了一下，整理出一个可以判断浏览器前缀的方法，当然，使用limichange提到的Modernizr.prefixed也很方便。

var animEndEventNames = {
        'webkit' : 'webkitAnimationEnd',
        'o' : 'oAnimationEnd',
        'ms' : 'MSAnimationEnd',
        'animation' : 'animationend'
    },
    animEndEventName = animEndEventNames[prefix().lowercase]||animEndEventNames['animation'];

function prefix(){
    var styles = getCompStyle(document.documentElement),
        pre = (Array.prototype.slice.call(styles).join('')
            .match(/-(moz|webkit|ms)-/) || ['', 'o']
        )[1],
        dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
    return {
        dom: dom,
        lowercase: pre,
        css: '-' + pre + '-',
        js: pre[0].toUpperCase() + pre.substr(1)
    };
};

function getCompStyle(elem,classes){
    return (window.getComputedStyle?window.getComputedStyle(elem,classes||null):elem.currentStyle) || null;
}

Answer 1

写个循环 简单判断下就好

js    // 动画结束事件名
    var aniEndName = (function() {
        var eleStyle = document.createElement('p').style;
        var verdors = ['a', 'webkitA', 'MozA', 'OA', 'msA'];
        var endEvents = ['animationend', 'webkitAnimationEnd', 'animationend', 'oAnimationEnd', 'MSAnimationEnd'];
        var animation;
        for (var i = 0, len = verdors.length; i < len; i++) {
            animation = verdors[i] + 'nimation';
            if (animation in eleStyle) {
                return endEvents[i];
            }
        }
        return 'animationend';
    }());

Answer 2

这个库是专门用来检查特性的，说白了就是帮你检查前缀的和添加前缀的。HTML5和CSS3的前缀都可以检查，这样就可以做降级或者是其他的操作。

http://modernizr.com/docs/

可以看看这个代码。

http://codepen.io/limichange/pen/rVNYVw

你就定制一个Modernizr.prefixed()，然后

var animationEndName = (Modernizr.prefixed('animation') + "End").replace(/^ms/, "MS").replace(/^Webkit/, "webkit").replace(/^Moz.*/, "animationend");

就能得到结果了。