框架设计续集（三）
==对浏览器能力的检测==
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低版本也会弹出支持getElementsByClassName3.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都能背景变红-->本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017.11.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
