关于浏览器方法检测能力实现的逻辑

问题分析：例如在IE8浏览器及以下，不兼容getElementsByClassName，那么问题1是如何判断浏览器是否支持，问题2是如何实现自己的方法

• 首先拿到这个问题，一般想到的是用if判断条件，如下

if(node.getElementsByClassName){
                return node.getElementsByClassName(className);
            }else{
                //其他方法
            }

上述方法每调用一次，浏览器都会进行一次判断，随着代码和框架的增多，那么浏览器的性能会严重损耗，那么如何处理以上问题呢？

• 对于上述问题进行分析，我们试着可以在js加载开始的时候就进行能力判断，判断属性方法是否存在，存储布尔值真和假

实现逻辑：
   在全局作用域中( 最终都要变成沙箱 )提供一个 support对象，里面提供所有的与方法名相同的属性, 值均为 boolean， 那么凡是涉及到 能力检查的时候 就直接使用 support 即可

var support = {};
            support.getElementsByClassName = !!document.getElementsByClassName;
            if ( support.getElementsByClassName ) {
                // return node.getElementsByClassName( className );
                alert(‘支持该方法‘);

            } else {
                // 自己实现( className );
                alert(‘不支持该方法‘);
            }

• 拓展：以上方法实现了是否存在该方法和属性，那么现在需求是不仅判断其是否存在，还要判断是否符合要求

    var support = {};
            support.getElementsByClassName = (function () {

                var isExist = !!document.getElementsByClassName;
                //判断是否存在，并且它还是一个方法
                if ( isExist && typeof document.getElementsByClassName == ‘function‘ ) {
                    // 自己创建一些元素, 并且加上 class 属性, 看是否可以获得到加上的所有元素（假设其他方法都是存在的）
                    var div = document.createElement( ‘div‘ ),
                        divClass = document.createElement( ‘div‘ );
                    divClass.className = ‘cn‘;
                    div.appendChild( divClass );
                    var bool = div.getElementsByClassName( ‘cn‘ )[ 0 ] === divClass;            return bool;

                }

                return false;//如果不满足
            })();

判断返回的布尔值，应用上面方法

if ( support.getElementsByClassName ) {
                // return node.getElementsByClassName( className );
                alert( ‘支持该方法‘ );
            } else {
                // 自己实现( className );
                alert( ‘不支持该方法‘ );
            }
            

• 最后如何实现自己的方法呢

var nodes = document.getElementsByTagName(‘*‘);
            var arr = [],
                i;
            var getClassName = function (tag){
                for(i = 0;i < tag.length;i++){
                 if(tag[i].className){
//                     console.log(tag[i].className.split(‘ ‘))
                     arr.push(tag[i].className);//获得的类名存到数组中
                 }
            }
                return arr;
            }
                var classNames = getClassName(nodes);
                console.log(classNames);

自己在此做了小小的总结，我深知对于检测浏览器能力方法不仅仅如此，希望前辈批评指正