國外大牛IE版本檢測!現在IE都到9了,IE檢測代碼

來源:互聯網
上載者:User

其實學習大牛原始碼是一種很好的進步,可以給你一種新的視野。
看到這篇大牛的IE版本檢測,只能是驚歎加驚歎。短短的代碼中所包含的內容實在是太多了。
所以在這裡決定來解讀大牛的原始碼,讓準備向大牛靠近並還在努力的IT同人們從中學習到更多的知識。

我們先來看看一個世界最短ie檢測代碼: 複製代碼 代碼如下:var isIE = !-[1,];

是不是很熟悉,但是有bug,就是不能檢測ie9,為什麼呢?那是因為這是國外大牛在ie9出來之前利用ie對數群組轉換的特性來完成的。ie9中已經進行了修複,所以在ie9中失效了,但是作為當時的我,還是感歎+感歎,大牛們對細節的研究和如此的深入(當時我也沉迷在如何用最短的代碼來實現一個功能和方法,不斷的修改+修改,可還是....這就是差距,差距)。
這段世界最短ie檢測的代碼我就不解讀和分析了,畢竟對於現在有bug了,不能向後相容,我的重點是下面的ie完美檢測,理論上是向後相容的,例如出來IE10,ok,用它,沒問題,再一次提現差距。

下面來看看原始碼先(我會在後面解讀大牛思想和代碼中的痛點講解) 複製代碼 代碼如下:// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// ie === undefined
// If you're in IE (>=5) then you can determine which version:
// ie === 7; // IE7
// Thus, to detect IE:
// if (ie) {}
// And to detect the version:
// ie === 6 // IE6
// ie > 7 // IE8, IE9 ...
// ie < 9 // Anything less than IE9
// ----------------------------------------------------------
// UPDATE: Now using Live NodeList idea from @jdalton
var ie = (function(){
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}());

一個很精闢的代碼,但可以完美檢測出ie的各個版,還可以一次按範圍檢測,在源碼的注釋中教練你怎麼使用。
原理:
動態建立一個div,利用ie條件注釋來往裡面插入一個i標籤,在來檢測i標籤是否添加來判斷是否是ie瀏覽器。在while中不斷迴圈來比對ie的版本。
下面我們來理解這段代碼: 複製代碼 代碼如下:var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
//這段好理解,聲明變數和建立一個div,擷取div中的i
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
//這個就是核心,利用的ie條件注釋來完成,ie的條件注釋是向後相容的,所以可以用這檢測以後出的ie10,如果下一個版本叫ie10的話。

關於ie條件注釋,大家可以自己在網上尋找,很容易找到的。[if IE 7][if gt IE 7]有很多模式的,我這裡就不講解這個條件注釋,做過web前端相容的應該對這還是比較瞭解的。

痛點: 複製代碼 代碼如下:while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);

what?while(運算式1,運算式2) 這是what?和我們學的while(運算式)不一樣?
小技巧,while中如果有多個運算式,以最後一個運算式作為跳出的判斷,前面的運算式,不管有多少個,都不會作為跳出的判斷,而是執行裡面的代碼。
例如:while(表達是1,表達是2,運算式3,運算式4) 只以運算式4的true或者false作為跳出判斷。
額滴神,還可以這樣,長見識了吧,趕快去試試,這就是大牛的代碼,只能驚歎+驚歎!
到這裡就完了,短短几行的代碼,是多麼的優雅。希望大家能從中學習到想要的知識和開闊你的視野。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.