你的位置:首页 > Java教程

[Java教程]功能检测技术 typeOf


Javascript与很多编程语言不同,它不能够控制其运行环境。再写php代码时,只要在服务器端部署了正确的版本,那么程序就绝对能够运行,对于其他python或ruby后端语言来说,也不存在什么灰色区域。Javascript就不同了,它与所有的前端语言一样,都需要各大浏览器的支持。

前端语言必须通过浏览器渲染页面时才能被运行和执行,服务器与客户端的浏览器通过HTTP请求进行通信,接受资源后的浏览器再进行渲染。有很多因素,诸如浏览器对各项功能的支持程度、网络连接速度、屏幕大小、渲染效率等,都是完全不受开发者的控制。

所以,我们通过功能检测技术对那些不确定因素进行逐一排除,为了避免让浏览器报错和性能原因。在原生中这是一种非常重要的开发方式。

 

1.    判断是否开启javascript功能

检测用户浏览器是否开启了javascript功能,给予用户友好的提示,以免于用户对网站的抱怨。

1 <noscript>为了您的浏览体验,请在浏览器设置中开启javascript功能!</noscript>

 

如果检测浏览器为IE及之前的旧版本,则给予不同的提示(HTML5 boilerplate):

1 <pclass="chromeframe">您正在使用<strong>过时的</strong>浏览器。请<a2 href="http://browsehappy.com/">升级您的浏览器</a>或者<a3 href="http://www.google.com/chromeframe/?redirect=true">开启并更新GoogleChromeFrame插件</a>以改善您的浏览体验!</p>

 

2.    在使用for循环操作时,有必要检测循环的值

For()运算会占用大量的运算性能,所以开始前有必要检测一下:

 

 1         count = fruit.length, 2           i; 3         //阻止默认行为 4         event.preventDefault(); 5  6         target.innerHTML = ""; 7         if(count > 0 || searchValue !==""){ 8           for(i = 0;i < count;i++){ 9             var obj = fruit[i],10               //将name与searchvalue值相匹配,如果值不等于 -1,那么就与之相匹配11               inItfount = obj.name.indexOf(searchValue);12 13             //将JSON中匹配的数据写入到DOM14             if(isItfount != -1){15               target.innerHTML += '<p>'+obj.name+'<a href="mailto:" '+obj.color+'>'+obj.color+'</a></p>'16             }17           }18         }

 

3.    判断HTML5版本本地存储API 

Cookies是一种即难处理,又不安全的一种技术,它总是和隐私追踪程序、恶意软件等东西绑在一起。所以,W3C在HTML5新版本中定义了localStorage和sessionStorage网络存储方案。对于此类HTML5新API,你得考虑浏览器对该功能的支持情况。如果只关注高端设备及浏览器,那也许这就不是问题,但对于剩下的浏览器来说,可就要小心了(http://www.w3school.com.cn/html5/html_5_webstorage.asp):

 1 //判断HTML5版本本地存储API 2 if(typeof (localStorage) === "undefined"){ 3   //新版API不支持,需要考虑cookies方案 4 } else{ 5   //使用JSON.stringObject保存字符串数据 6   var stringObject = JSON.stringify(favoriteSandwiches); 7   var localStorage = setItem("favoriteSandwiches",stringObject); 8   //使用JSON.parse提取为JSON数据 9   var storedItem = localStorage.getItem("favoriteSandwiches");10   var convertObject = JSON.parse(storedItem);11 }

 

4.    在IE浏览器中添加事件监听器的所需备用代码

在使用addEventListener()方法时要稍微留心一下浏览器是否支持它。IE 8及更早的版本都不支持addEventListener()方法,但它支持功能相似的attachEvent()方法;这两种方法的支持情况不存在交叠:

 1 // IE浏览器中添加事件监听器的备用代码 2 var btn = document.getElementById("btn"); 3  4 if(btn.addEventListener){ 5   btn.addEventListener("click",function(){ 6     alert("click the button"); 7   },false) 8 }else { 9   btn.attachEvent("click", function () {10     alert("for IE8 AND below");11   });12 }

 

5.    选取定位DOM节点的方法

随着HTML5标准的发布,javascript根据需求随即进行标准化,将getElementByClassName()、querySelector()、querySelectorAll()方法加入其中。针对新旧浏览器,需要进行支持度检测。如果你嫌麻烦,可以损失一丁点性能选用程序库的"$()"选择器:

 1 //选取定位DOM节点的方法 2 if(document.querySelector){ 3   document.querySelector(".btn"); 4  5 } else if(document.getElementsByClassName()){ 6   document.getElementsByClassName("btn"); 7  8 } else{ 9   document.getElementById("subtn");10 }

 

6.    创建Ajax通信服务器对象的方法

Ajax调用的核心。执行Ajax调用的第一步就是创建IE6等老版浏览器,我们需要进行检测:

 1 function getHTTPObject(){ 2   "use strict"; 3   var xhr; 4   if(window. 5     xhr = new window. 6   } else if(window.ActiveXObject){ 7     xhr = new window.ActiveXObject("Ms); 8   } 9   //将通信服务器对象返回10   return xhr;11 }

 

7.    在获取DOM属性时有必要看看它存不存在

1 if(document.getElementsByTagName("a").length > 0){2   //可以执行for()循环代码3 }4 5 if(document.getElementById("btn").hasAttribute){6   document.getElementById("btn").setAttribute("class","subtn");7 }

 

合理的使用功能检测技术能够让我们避开那些本不该踩到的雷区,当然还有更多的功能检测等着我们在实操中去发现。另外,我推荐使用火狐浏览器的firebug开发人员工具进行调试代码,总结经验和不足;欢迎大家相互交流!!