功能檢測技術 typeOf

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 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通信伺服器對象的方法

XMLHttpRequest對象是所有Ajax調用的核心。執行Ajax調用的第一步就是創建XMLHttpRequest對象，這一步非常容易，但是為了適配IE6等老版瀏覽器，我們需要進行檢測：

 1 function getHTTPObject(){
 2     "use strict";
 3     var xhr;
 4     if(window.XMLHttpRequest){
 5         xhr = new window.XMLHttpRequest();
 6     } else if(window.ActiveXObject){
 7         xhr = new window.ActiveXObject("Msxml2.XMLHTTP");
 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開發人員工具進行調試代碼，總結經驗和不足；歡迎大家相互交流！！