夢遊前端，JavaScript兼容性

 

 

前端兼容問題出現的緣由

 

 

何爲操做系統？操做系統（Operating System）是管理和控制計算機硬件與軟件資源的計算機程序。是的，任何的應用軟件必須在操做系統的支持下運行。

你們會疑問？爲何我要講操做系統？你猜！

其實，我只想表述我本身的一個觀點，「Web瀏覽器是Web應用的操做系統」。這句話來源於JavaScript權威指南。

正由於Web瀏覽器（IE、Mozilla、Apple、Google、360瀏覽器、QQ瀏覽器）的多樣性，纔出現了所謂的兼容性問題。

編寫一個JavaScript程序並能正確運行在這麼多平臺之上，的確是一種挑戰。

 

前端兼容性主要有哪些問題

 

軟件更新；在web平臺的發展中，一個標準規範會倡導一個新的特性或API。是的，瀏覽器開發商以爲某個特性很不錯，那他可能在瀏覽器中實現它。若是某個特性有很是多的開發商實現，那麼這個特性或API就會普遍使用，可是某個特性的實現會有一個前後的過程，致使一個結果「舊的瀏覽器不支持這個特性」。

設計差別；瀏覽器開發商們一樣實現一個特性或API，但他們的觀點和編碼風格差別，一樣的一個功能在同的瀏覽器中也會有很大的差異。

軟件BUG；任何的軟件都存在BUG，Web瀏覽器也是一個軟件。而且沒有按照規範準確實現客戶端的JavaScriptAPI

如何處理兼容性問題

若是你去面試一個前端工程師，面試官最常問的一個問題：如何解決瀏覽器的兼容性問題？

• 功能測試（capability testing）是解決不兼容問題的一種強大技術。

 1 if(element.addEventListener){
 2     //W3C方法
 3     element.addEventListener("keydown",handler,false);
 4     element.addEventListener("keypress",handler,false);
 5 }else if(element.attachEvent){
 6     //IE方法
 7     element.attachEvent("onkeydown",handler);
 8     element.attachEvent("onkeypress",handler);
 9 }else{
10     //選擇普遍使用方式
11     element.onkeydown = element.onkeypress = handler;
12 }

• 處理兼容性問題其中最簡單的方法就是使用類庫（JQuery、Zepto、Excanvas），前二者定義了新的客戶端API併兼容全部瀏覽器。例如，JQuery處理事件程序註冊經過Bind進行完成。

可是，有時候爲了實現一個很是簡單的功能，透明地實現整個標準並不是真正可行。

例如，個人一個應用：只在頁面實現一個Ajax請求！

使用兼容性類庫：

 1 <script src="./core/zepto.min.js"></script> 24k
 2 <script>
 3     $.ajax({
 4             type: 'GET',
 5             url: './index.html',
 6             data: {}, //參數
 7             dataType: 'html', //返回類型
 8             success: function(data){
 9                 //成功回調
10             },
11             error: function(xhr, type){
12                 alert('Ajax error!')
13             }
14       });
15 </script>

　　使用原生JavaScript:

 1 var xml_http;
 2 if (window.ActiveXObject) {
 3     xml_http = new ActiveXObject("Microsoft.XMLHTTP");
 4 } else if (window.XMLHttpRequest) {
 5     xml_http = new XMLHttpRequest();
 6 }
 7 xml_http.open("GET", "./index");
 8 xml_http.send(null);
 9 xml_http.onreadystatechange = function () {
10     if ((xml_http.readyState == 4) && (xml_http.status == 200)) {
11         alert('success');
12     } else {
13         alert('fail');
14     }
15 }

　　考慮兼容性問題時，要考慮適中的方法引用。

• 分級瀏覽器支持（graded browser support）是由Yahoo率先提出的一種測試技術。

 

　　從某種維度將瀏覽器版本/操做系統變體進行分級，使用不一樣的測試用例，從而解決兼容性問題。

• Internet Explorer是的條件註釋

其實咱們不難發現，客戶端JavaScript編程中的不少不兼容性問題都是針對IE的，也就是說必須按照某種方式爲IE編寫代碼，而按照另外一種方式爲其餘瀏覽器編寫代碼。IE支持條件註釋。

 1 <!–[if lt IE 8]>
 2 <script src=」http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js」 type=」text/javascript」></script>
 3 <![endif]–>
 4 <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
 5 <!--[if lt IE 9]>
 6 <script src="__STATIC__/bootstrap/js/html5shiv.js?v={:SITE_VERSION}"></script>
 7 <![endif]-->
 8 <block name="style"></block>
 9 <!--[if lt IE 9]>
10 <script type="text/javascript" src="__STATIC__/jquery-1.10.2.min.js"></script>
11 <![endif]-->
12 <!--[if gte IE 9]><!-->
13 <script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
14 <!--<![endif]-->

　　本文只是簡單講解了前端JavaScript腳本的兼容性問題緣由及解決辦法，固然，這些都只是一個基礎的篇章。

　　要想徹底解決前端兼容性問題，路還很長......