框架设计续集(三)

==对浏览器能力的检测==

1.传统方法
//-------------------------------------------
    //对浏览器的getElementsByClassName的检测;
    //传统的方法

    function fn(){
       //在此处检测是否存在该方法,但是检测的简单,会有bug,
       //下个例子讲解
        if(document.getElementsByClassName){
            ....
        }
    }

    
        function fn1(obj){
        if(document.getElementsByClassName){
//            ....
        }else{
//    .....
        }
    }
    
    
    .......
        //在此处检测是否存在该方法,但是对于性能来说不好,
        //要是检测的是否存在getElementsByClassName的次数太多,性能不好,
        //可以考虑在加载脚本的最开始对这些需要检测的都进行检测,把结果存起来,
        //后续再需要检测时,直接从结果里找
        //可以优化
2.检测的过于简单的bug
//-----------------------------------
    function dost(){
        if(document.getElementsByClassName){
            alert("支持getElementsByClassName")
        }else{
            alert("不支持getElementsByClassName")
        }
    }

    //假如人为的给document.getElementsByClassName =“hello”
     document.getElementsByClassName ="hello";
    dost();
    //上述检测还是不行
    //在IE低版本也会弹出支持getElementsByClassName
3.jquery性能检测的借鉴
//----------------------------
     var support ={};
    support.getElementsByClassName = (function(){
        var isExist = !!document.getElementsByClassName;
        console.log(document.getElementsByClassName);
        if(isExist && typeof document.getElementsByClassName == "function" ){
              var  oDivParent = document.createElement("div"),
                   oDivChild = document.createElement("div");
            oDivChild.className = "cc";
            oDivParent.appendChild(oDivChild);
            return  oDivParent.getElementsByClassName("cc")[0] ===oDivChild;
        }
            return false

    })();

    function dosomething(){
        console.log(support.getElementsByClassName);
        if(support.getElementsByClassName){
            alert("支持getElementsByClassName")
        }else{
            alert("不支持getElementsByClassName")
        }
    }
    
    //加入人为的给document.getElementsByClassName =“hello”
    document.getElementsByClassName ="hello";
    dosomething();
    //在IE低版本也会弹出 不 支持getElementsByClassName
    
    
    //在后续的使用需要检测getElementsByClassName时直接看support对应的结果
    
    //同理可以将其他函数或者方法的检测也挂在support上,这样使用只用检测一次,提高性能
4.getClass的实现
//--------------------------------
//首先对浏览器进行能力检测
 <body>
<div class="box box1">123</div>
<p class="box box1">pppppppppppppppp</p>
<script>
    
    function each(arr,fn){
        for(var i=0;i<arr.length;i++){
            if(fn.call(arr[i],i,arr[i])===false){
                break
            }
        }
    }

    //对浏览器的getElementsByClassName的检测;
    //传统的方法

    var support ={};
    support.getElementsByClassName = (function(){
        var isExist = !!document.getElementsByClassName;
        if(isExist && typeof document.getElementsByClassName == "function" ){
            var  oDivParent = document.createElement("div"),
                    oDivChild = document.createElement("div");
            oDivChild.className = "cc";
            oDivParent.appendChild(oDivChild);
            return  oDivParent.getElementsByClassName("cc")[0] ===oDivChild;
        }
        return false
    })();

    function getClass(classname,results){
        results = results || [];
        var arr, i,reg;
        if(support.getElementsByClassName){
            results.push.apply(results,document.getElementsByClassName(classname));
        }else{
            arr = document.getElementsByTagName("*");
            for( i= 0;i<arr.length;i++){
                //1.
                //arr[i].className ===classname判断有问题,对于一个标签多个类的话有问题,
                // eg:<div class="c c1 c2">123</div>
                //2.
                //假如是arr[i].className.indexOf(classname)!= -1
                //eg:<div class="c1 c2">123</div>,在匹配“c”时也会匹配到,所以都在前后加上空格
                //3.1方法一
                reg = new  RegExp("\\b"+classname+"\\b");
                if(reg.test(arr[i].className)){
                    results.push(arr[i])
                }
                //3.2方法二
               // if((" "+arr[i].className+" ").indexOf(" "+classname+" ")!= -1){
                //      results.push(arr[i])
                //  }
            }
        }
        return results
    }

    each(getClass("box"),function(){
        this.style.backgroundColor = "pink";
    })


<!--结果是在chrome和ie7都能背景变红-->

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏封碎

Android画图之Matrix(一) 博客分类: Android AndroidBlog

Matrix ,中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放、平移、旋转等操作。

952
来自专栏进击的君君的前端之路

CSS理解之border

1703
来自专栏知道一点点

CSS3 基础知识[转载minsong的博客]

CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px...

2526
来自专栏向治洪

android绘制虚线

有的时候我们需要一种虚线效果,比如图片的边框,愤怒的小鸟的飞翔路径,那么怎么绘制这些虚线呢?方法很多,目前我觉得好的有两种: 一、自己创建模式,一个点一个点的绘...

2586
来自专栏Android开发经验

Android自定义View-记录一个简单却又常见的效果实现

代码 简单列下主要代码,完整代码地址放在了文字末尾。 1.为了更加灵活,我这里提供了很多属性用于用户自己来设置:

742
来自专栏王金龙的专栏

svg.js教程及使用手册详解(二)

上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。

3194
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

Painter采用单例模式 优化原型模式,各Shape采用深拷贝来解决构造较长、繁琐的情况 比较new 对象和拷贝的效率问题,拷贝一点。具体见文:来谈谈Ja...

1523
来自专栏小灰灰

cocos2dx-v3.4 2048(四):单元格的设计与实现

前言 ---- 单元格即显示2、4、8等数字的不同颜色的方格,如下图。本项目中Grid类实现单元格的相关内容,包括数字、背景更新,移动、新增、消除特效 ? ...

2046
来自专栏IMWeb前端团队

网格系统 CSS Grid Layout

听闻w3cplus大漠在第三届CSS Conf上的演讲主题是CSS Grid Layout,吓得我赶紧抛下红尘俗事闭门谢客苦心钻研,唯恐脚步太慢,遥望大漠一骑绝...

2188
来自专栏Google Dart

Flutte部件目录-基本部件(二) 顶

支持以下图像格式:JPEG,PNG,GIF,GIF动画,WebP,WebP动画,BMP和WBMP

1702

扫码关注云+社区

领取腾讯云代金券