技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 转变代码思路:js浏览器判断方法

转变代码思路:js浏览器判断方法

浏览:2242次  出处信息

“变则通,通则达”,在coding的时候也要做到,有时候思路往往太过于局限性,拿今天写自己的js框架(暂定名为YQ吧,以后文章通用)对浏览器判断方法的实例,来说说代码思路的转变。

navigator.userAgent分析

关于javascript对浏览器的判断,很早之前我写过一篇文章《js判断浏览器的函数,可区分chrome,safari》。YQ框架中也是采用的这个方法,可是后来想到了有位网友说判断火狐的版本号会错误,这是因为火狐的version的判断走了正则,而没有考虑到firefox的,其实不止firefox有这个bug。首先来看看火狐的navigator.userAgent:
这个是我的firefox(3.6.15,却显示3.6.8,不知何解,查看关于也是这个问题:版本不统一)

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 QQDownload/1.7

根据正则的写法,火狐的版本号应该这样写/Firefox[/]([w.]+)/
而safari的确是类似的:

……Version/3.1 Safari/525.13

其中Version为实际的版本号,也是我们常称呼的版本号。

琢磨

开始写js判断浏览器的,跟jQuery$.browser一样,可是版本号会出现问题,只不过是加了个chrome判断而已。开始想解决方法,初步想得是通过一个正则对象把浏览器的名称和版本号统一匹配出来,正则对象设置如下:

var browserRegExp = {
			ie:/(msie)[ ]([\w.]+)/,
			firefox:/(firefox)[ |\/]([\w.]+)/,
			chrome:/(chrome)[ |\/]([\w.]+)/,
			safari:/version[ |\/]([\w.]+)[ ](safari)/,
			opera:/(opera)[ |\/]([\w.]+)/
		}

这个对象的设计还是有一定技巧的(后面提到),因为我后面要使用一个遍历,把全部的正则匹配一遍,生成一个类似$.browser的对象。但是仔细想想,我们在使用判断的时候怎么使用呢?无非是下面的使用:

$.browser.msie&&$.browser.version==='6.0'

第一次转变,使用方法的转变

上面的使用方法,可是转变为下面的使用方法:

$.browser==='msie'&&$.browserVersion==='6.0'

$.browser为浏览器的名称,$.browserVersion为版本号,这样就不用使用的时候每次都走正则判断,提高了效率。

第二次转变,函数写法的转变

根据上面的分析,我们需要先判断出来浏览器名称和版本号,然后分别给$.browser、$.browserVersion赋值,于是有了下的YQ代码:

for(var i in browserRegExp){
		var match = browserRegExp[i].exec(ua);
		if(match){
			YQ.browser = match[1];
			YQ.browserVersion = match[2];
			break;	
		}
	}

前面提到了小技巧,就是把用户群体大浏览器放在前面,减少循环次数,IE在国内肯定是第一啦,其次FF,chrome……依次下来。

第三次转变:不知道咋说了

细心的童鞋应该看到了safari判断出来YQ.browser和YQ.browserVersion是相反的,要解决这个问题,就来了第三次转变!语文不好,不知道咋说这次转变了,直接上代码:

var ua = navigator.userAgent.toLowerCase(),
	browserRegExp = {
		ie:/msie[ ]([\w.]+)/,
		firefox:/firefox[ |\/]([\w.]+)/,
		chrome:/chrome[ |\/]([\w.]+)/,
		safari:/version[ |\/]([\w.]+)[ ]safari/,
		opera:/opera[ |\/]([\w.]+)/
	};
YQ.browser = 'unknow';
YQ.browserVersion = '0';
for(var i in browserRegExp){
	var match = browserRegExp[i].exec(ua);
	if(match){
		YQ.browser = i;
		YQ.browserVersion = match[1];
		break;	
	}
}
alert(YQ.browser);
alert(YQ.browserVersion);
  1. 修改了正则,判断是version
  2. 2、判断出来是把i赋值给YQ.browser

这样,我们获得的YQ.browser 就是对象的key,如果IE则YQ.browser 为ie,而不是msie,实际上更加方便记忆了,而且不用多余的判断来处理safari版本号和名称倒置的问题了。

总结

仔细观察多想多看会有不少发现的,我有代码洁癖,能少写判断就少写,能少用循环就少用!呵呵。
继续coding YQ……(状态:爱墙写完了,YQ正在检查ing)

建议继续学习:

  1. 浏览器的工作原理:新式网络浏览器幕后揭秘    (阅读:19551)
  2. 浅析http协议、cookies和session机制、浏览器缓存    (阅读:15800)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情?    (阅读:14502)
  4. 程序员眼里IE浏览器是什么样的    (阅读:6852)
  5. 浏览器的渲染原理简介    (阅读:6389)
  6. 各种浏览器审查、监听http头工具介绍    (阅读:6250)
  7. 图说浏览器战争:火狐、微软、谷歌那些事    (阅读:6080)
  8. 浏览器缓存机制    (阅读:5775)
  9. [译]Google Chrome中的高性能网络    (阅读:5128)
  10. 12款很棒的浏览器兼容性测试工具推荐    (阅读:4863)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1