码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-04-10 17:38:02      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

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

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

技术分享
if(node.getElementsByClassName){
                return node.getElementsByClassName(className);
            }else{
                //其他方法
            }
View Code

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

  • 对于上述问题进行分析,我们试着可以在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);

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

 

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

标签:

原文地址:http://www.cnblogs.com/goweb/p/5374434.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!