html5 api方法 的兼容处理(前缀处理)

HTML5 API方法的前缀兼容处理

Web API的前缀兼容处理

/*html5 前缀兼容处理*/

var runPrefixMethod = function(element, method) {
    /*
     参数：
     element：元素
     method: 方法名(Requestscreen/RequestAnimationFrame)
     */
    var usablePrefixMethod; /*定义变量 ---- 方法名称*/
    ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
        /*
         forEach(function(curVal, index, arr){
         //curVal: 必需。当前元素的值
         //index: 可选。当前元素的索引值
         //arr: 可选。当前元素所在的数组
         })
         prefix为当前元素的值，并作为第一个参数传递给回调函数
         */
        /*对后缀进行遍历*/
        if (usablePrefixMethod) return; /*判断后缀是否存在，存在则跳出循环遍历*/
        if (prefix === "") {
            // 无前缀，方法首字母小写
            method = method.slice(0,1).toLowerCase() + method.slice(1);
        }
        /*
         利用typeof 返回操作数的类型（返回值为字符串）
         返回的值如下：
         "number"
         "undefined"
         "boolean"
         "object"
         "function"
         "string"
         */
        var typePrefixMethod = typeof element[prefix + method];

        if (typePrefixMethod + "" !== "undefined") {
            /*typeof 返回的值不是undefined*/
            if (typePrefixMethod === "function") {
                usablePrefixMethod = element[prefix + method]();
            } else {
                usablePrefixMethod = element[prefix + method];
            }
        }else{
            /*typeof 返回的值是undefined ,说明该方法不存在*/
            console.log(typePrefixMethod);
        }
    });
    return usablePrefixMethod; /*返回 后缀处理完成的 方法的名称*/
};

/*
 方法的使用：
 通过调用 runPrefixMethod 是否有返回值
 runPrefixMethod(ele, method);
 ele: 获取的DOM元素(如document)
 method: 需要进行前缀兼容处理的方法名(如 Requestscreen)
 注意: 如果全屏API，需进行判断是否处于全屏状态


 */