JS學習筆記之客戶端檢測

     一、解決遊覽器兼容性問題:客戶端檢測。

     最常用的方法是“能力檢測”,其目標不是識別特定的遊覽器,而是識別遊覽器的能力。採用這種方式不必估計特定的遊覽器如何如何,只要確定遊覽器支持特定的能力即可。

     EG:
     function getElement(id){
     if(document.getElementById){
     return document.getElementById(id);
     }else if(document.all){
     return document.all[id];
     }else{
     throw new Error ("沒有獲取element的方法!");
     }
     }
 
     原則:注意檢測條件要先使用能達成目標的最常用條件進行判斷,保證代碼的最優化效率,避免條件的缺陷。(邏輯判斷要充分條件)
     能力檢測是不僅要檢測某個特性是否存在,而是要檢測其是否可以達成具體功能的實現,例如:通過判斷object.sort是否存在來判斷對象是否支持排序時不合理的,必須檢測sort是否是函數。
     EG:
     function isSortable(o){
         return typeof object.sort == "function";
     }
     (其實就是保證判斷條件的充分性,包含.sort屬性的對象不一定支持排序)
     再例如,IE9之前的版本 document.createElement 的類型爲object.而IE9之後所有DOM方法統一返回“function”。(原因是IE之前的宿主對象是通過COM而非JScript實現的)


      綜合目前遊覽器環境,測試任何對象的某個特性是否存在,要使用下面的函數:
    
     MD:
     //au :Peter Michaux
     function isHostMethod(Object,property){
     var t = typeof object[property];
     return t =='function' || (!!(t=='object'&&object[property])) ||
     t=='unknow';
     }

     注:此方法隨着時間的推移,可能會出現不合理或不完全的地方,應用時要進行合理的測試。
     參考:Peter Michaux的文章《Feature Detection:State of the Art Browser Scripting》
     http://peter.michaux.ca/

     二、能力檢測>>遊覽器檢測

     實際開發中,遊覽器檢測被竟然應用,如:
     var isFirefox = !!(navigator.vendor && navigator.vendorSub);
     var isIE = !!(document.all && document.uniqueID);

     這是典型的遊覽器檢測,曾經.vendor和vendorSub確實可以確定Firefox,因爲只有其具備此屬性,但Safari實現了相同屬性後此方法就會帶來誤判。
     所以,通過檢測遊覽器來確定某些方法、屬性的可行性是十分被動的,在遊覽器做出更改後必須修改判斷邏輯。。
   
     合理的解決方案是將能力檢測作爲確定下一步解決方案的一句,而不是用它來判斷用戶使用的是什麼遊覽器,即如果使用某方法,檢測其是否可用後執行,而不是通過判斷遊覽器來分別執行某些方法。
 
     簡言之,遊覽器不具有相對穩定、邏輯嚴謹的卻分性質。

     當然,某些特定的需求要展示用戶所用遊覽器的話,,另當別論。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章