JavaScript功能检测技术和函数构造
Javascript与很多编程语言不同，它不能够控制其运行环境。再写php代码时，只要在服务器端部署了正确的版本，那么程序就绝对能够运行，对于其他python或ruby后端语言来说，也不存在什么灰色区域。Javascript就不同了，它与所有的前端语言一样，都需要各大浏览器的支持。
前端语言必须通过浏览器渲染页面时才能被运行和执行，服务器与客户端的浏览器通过HTTP请求进行通信，接受资源后的浏览器再进行渲染。有很多因素，诸如浏览器对各项功能的支持程度、网络连接速度、屏幕大小、渲染效率等，都是完全不受开发者的控制。
所以，我们通过功能检测技术对那些不确定因素进行逐一排除，为了避免让浏览器报错和性能原因。在原生中这是一种非常重要的开发方式。
1. 判断是否开启javascript功能
检测用户浏览器是否开启了javascript功能，给予用户友好的提示，以免于用户对网站的抱怨。
1 <noscript>为了您的浏览体验，请在浏览器设置中开启javascript功能！</noscript>
如果检测浏览器为IE及之前的旧版本，则给予不同的提示（HTML5 boilerplate）：
1 <pclass="chromeframe">您正在使用<strong>过时的</strong>浏览器。请<a 2 href="http://browsehappy.com/">升级您的浏览器</a>或者<a 3 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中匹配的数据写入到DOM 14 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 3 var btn = document.getElementById("btn"); 4 //使用最流行的事件监听器，支持世界主流的浏览器 5 6 if(btn.addEventListener){ 7 8 btn.addEventListener("click",function(){ 9 10 alert("click the button"); 11 },false); 12 13 //使用第二种事件监听器（ie老版本支持的） 14 }else { 15 btn.attachEvent("click", function () { 16 17 alert("for IE8 AND below"); 18 }); 19 }
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通信服务器对象的方法
XMLHttpRequest对象是所有Ajax调用的核心。执行Ajax调用的第一步就是创建XMLHttpRequest对象，这一步非常容易，但是为了适配IE6等老版浏览器，我们需要进行检测：
1 //创建ajax通信服务器对象 2 3 function getHTTPObject(){ 4 "use strict"; 5 var xhr; 6 7 //使用主流的XMLHttpRequest通信服务器对象 8 if(window.XMLHttpRequest){ 9 10 xhr = new window.XMLHttpRequest(); 11 12 //如果是老版本ie，则只支持Active对象 13 } else if(window.ActiveXObject){ 14 15 xhr = new window.ActiveXObject("Msxml2.XMLHTTP"); 16 } 17 18 //将通信服务器对象返回 19 return xhr; 20 }
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 }
Typeof方法操作符显而易见，这个工具提供了一个字符串名称，用于表达变量内容的数据类型。这个方法简单、精湛，但是对于数组（array）和对象（object）类型，它就显得无能为力，比如对于一个自定义对象 user，使用Typeof语句返回的结果是object。那么，我们需要一种更加精准的类型检测机制来判断我们变量，这就是 变量.构造函数，这一属性引用的是原本用来构造该对象的那个函数
使用typeof和构造函数属性来判断对象的类型：
1 //函数重载和类型检查 2 if(typeof num == "string"){ //如果num 变量是一个字符串类型 3 4 num = parseInt( num); //对num变量取整数操作 5 } 6 if(typeof arr == "string"){ //如果arr 是一个字符串类型 7 8 arr = arr.split(","); //若是，将字符串切分成数组保存 9 } 10 11 if(str.constructor == Array){ //用构造函数检查str变量是否是数组类型 12 13 str == str.join(","); //将数组归并到字符串中 14 }
合理的使用功能检测技术能够让我们避开那些本不该踩到的雷区，当然还有更多的功能检测等着我们在实操中去发现。这是一些比较常用的功能检测。另外，我推荐使用火狐浏览器的firebug开发人员工具进行调试代码，总结经验和不足；欢迎大家相互交流！！
