Win7之家（ afsion.com.cn）：論IE瀏覽器的發(fā)家史：沒(méi)有IE 就沒(méi)有Web
IE 曾是 web 創(chuàng)新的先驅(qū)，但最近幾年因?yàn)閷?duì) web 標(biāo)準(zhǔn)的支持落后于其他瀏覽器以及低版本 IE 的各種 bug 而被人詬病。雅虎的 Nicholas C. Zakas 帶我們回顧了 IE 在 web 發(fā)展過(guò)程中扮演的輝煌角色，讓我們能以一個(gè)更客觀的眼光來(lái)看待 IE。看完這篇文章，也許大家都會(huì)對(duì) IE 瀏覽器有一定的改觀，這也是我翻譯這篇文章的目的。
譯文
在 Internet Explorer 成為大家都恨之入骨的瀏覽器的很久以前，它曾是整個(gè)互聯(lián)網(wǎng)的創(chuàng)新驅(qū)動(dòng)力。有時(shí)候我們很難記得那些在 IE 6 成為全世界 web 開(kāi)發(fā)者的災(zāi)難之前 IE 所作的貢獻(xiàn)。不管你信不信，正因?yàn)橛辛?nbsp;IE 4—6，才會(huì)有我們現(xiàn)在所知的 web 開(kāi)發(fā)。IE 的一些獨(dú)特的功能過(guò)去就曾是事實(shí)標(biāo)準(zhǔn)，后來(lái)成為了官方標(biāo)準(zhǔn)最終進(jìn)入了 HTML5 規(guī)范。人們也許很難相信，對(duì)于我們現(xiàn)在認(rèn)為理所應(yīng)當(dāng)?shù)墓δ苤杏泻艽笠徊糠侄紤?yīng)該要想到 IE，但快速地回顧一下歷史可以讓我們知道的確如此。
DOM
如果 IE 是一個(gè)人人都痛恨的瀏覽器，那么「文檔對(duì)象模型」（DOM）就是人人都痛恨的 API 了。你可以說(shuō) DOM 過(guò)于繁瑣、不適合 JavaScript 甚至是有些荒謬，而且這些也都沒(méi)錯(cuò)。然而，DOM 還是給了開(kāi)發(fā)者通過(guò) JavaScript 來(lái)訪問(wèn)網(wǎng)頁(yè)的每個(gè)部分的途徑。曾經(jīng)你一度只能通過(guò) JavaScript 訪問(wèn)頁(yè)面中某些特定的元素。IE 3 和 Netscape 3 只允許程序訪問(wèn)表單元素、圖片以及鏈接。Netscape 4 改進(jìn)了這一點(diǎn)，把程序可訪問(wèn)的范圍通過(guò) document.layers 擴(kuò)展到了它特有的 layer 元素。IE 4 作了進(jìn)一步改進(jìn)，把這個(gè)范圍通過(guò) document.all 擴(kuò)展到了頁(yè)面的所有元素。
從很多方面來(lái)說(shuō)，document.all 算是 document.getElementById() 的最初版本。你還是要使用元素的 ID 來(lái)通過(guò) document.all 訪問(wèn)它，例如 document.all.myDiv 或是 document.all["myDiv"]。最主要的區(qū)別就是 IE 使用了一個(gè)集合而非方法，而這和其他當(dāng)時(shí)的訪問(wèn)方法比如 document.images 及 document.forms 是相吻合的。
IE 4 也第一個(gè)引入了用 document.all.tags() 來(lái)通過(guò)標(biāo)簽名字獲取一個(gè)元素列表的功能。無(wú)論從哪點(diǎn)來(lái)看，這都是 document.getElementsByTagName() 的最初版本，而且工作方式完全相同。如果你想獲取所有的 div 元素，你可以使用 document.all.tags("div")。甚至在 IE 9 中，這個(gè)方法仍然作為 document.getElementsByTagName() 的一個(gè)別名存在。
IE 4 同時(shí)也為我們引入了可能是有史以來(lái)最流行的私有 DOM 擴(kuò)展：innerHTML�？雌饋�(lái)微軟的那幫人是認(rèn)識(shí)到了通過(guò)編程手段來(lái)建立一個(gè) DOM 有多么痛苦，所以把這個(gè)便捷方法，連同 outerHTML 一起提供給我們。事實(shí)證明這兩個(gè)方法都非常有用，已經(jīng)在 HTML5 中被標(biāo)準(zhǔn)化了[1]。隨它們一同而來(lái)的用來(lái)處理純文本的 API——innerText 以及 outerText——同樣被證明足夠有影響力，因?yàn)?nbsp;DOM Level 3 已經(jīng)引入了與 innerText 行為相似的 textContent[2]。
按照同樣的思路，IE 4 引入了 insertAdjacentHTML()，這是又一種將 HTML 插入文檔中的方法。雖然這花了更長(zhǎng)的時(shí)間，但最終也被編入了 HTML5[3]，而且目前已被各瀏覽器廣泛支持。
事件
在開(kāi)始時(shí)，JavaScript 并沒(méi)有事件機(jī)制。網(wǎng)景和微軟都作出了嘗試，并且分別得出了不同的模型。網(wǎng)景給我們帶來(lái)了事件捕獲，其思想是一個(gè)事件先發(fā)送到窗口，然后是文檔，然后一個(gè)個(gè)直到最終到達(dá)預(yù)期的目標(biāo)。網(wǎng)景瀏覽器 6 以前的版本都僅支持事件捕獲。
微軟采取了一個(gè)相反的方法，設(shè)計(jì)出了事件冒泡。他們認(rèn)為一個(gè)事件應(yīng)該先從實(shí)際的目標(biāo)出發(fā)，然后在上層節(jié)點(diǎn)觸發(fā)直到文檔。IE 9 以前的瀏覽器僅支持事件冒泡。雖然隨著官方的 DOM 事件規(guī)范發(fā)展，同時(shí)包含了事件捕獲和事件冒泡，但大多數(shù) web 開(kāi)發(fā)者都只使用事件冒泡，而把事件捕獲僅僅留在 JavaScript 類庫(kù)中的一些解決方案和小技巧中使用。
除了創(chuàng)造了事件冒泡以外，微軟還創(chuàng)造了一系列后來(lái)也最終被標(biāo)準(zhǔn)化的額外事件：
1.contextmenu – 當(dāng)使用鼠標(biāo)副按鍵點(diǎn)擊一個(gè)元素時(shí)觸發(fā)。在 IE 5 中首次出現(xiàn)，后來(lái)被編入了 HTML5[4]。現(xiàn)在已被所有主流瀏覽器所支持。
2.beforeunload – 在 unload 事件前觸發(fā)，允許你阻斷頁(yè)面的退出。最初由 IE 4 引入，現(xiàn)在也為 HTML5 的一部分[4]。
3.mousewheel – 在鼠標(biāo)滾輪（或類似設(shè)備）被使用時(shí)觸發(fā)。首個(gè)支持此事件的瀏覽器是 IE 6。就像其他一樣，目前也是 HTML5 的一部分[4]。唯一不支持此事件的主流桌面瀏覽器是 Firefox（但其支持一個(gè)可用來(lái)替代的 DOMMouseScroll 事件）。
4.mouseenter – mouseover 的非冒泡版本，被微軟在 IE 5 中引入，用來(lái)克服 mouseover 使用時(shí)帶來(lái)的困擾。這個(gè)事件已被 DOM Level 3 事件規(guī)范正規(guī)化[5]。同樣被 Firefox 及 Opera 支持，但 Safari 和 Chrome 都（暫時(shí)？）不支持。
5.mouseleave – 與 mouseenter 對(duì)應(yīng)的 mouseout 的非冒泡版本。在 IE 5 中被引入，目前被 DOM Level 3 事件規(guī)范標(biāo)準(zhǔn)化[6]。瀏覽器支持和 mouseenter 一樣。
6.focusin – focus 事件的冒泡版本，用來(lái)幫助更好地管理頁(yè)面上的聚焦行為。最初在 IE 6 中被引入，現(xiàn)在已成為 DOM Level 3 事件規(guī)范的一部分[7]。目前沒(méi)有被很好地支持，盡管 Firefox 關(guān)于其實(shí)現(xiàn)的開(kāi)過(guò)一個(gè) bug。
7.focusout – blur 事件的冒泡版本，用來(lái)幫助更好地管理頁(yè)面上的聚焦行為。最初在 IE 6 中被引入，現(xiàn)在已成為 DOM Level 3 事件規(guī)范的一部分[8]。和 focusin 一樣，沒(méi)有良好支持但 Firefox 接近了。
XML 與 Ajax
盡管 XML 已經(jīng)像很多人所料的那樣在現(xiàn)今的 web 上被大量使用，但是對(duì) XML 進(jìn)行支持的領(lǐng)路人仍然是 IE。它是第一個(gè)支持在客戶端通過(guò) JavaScript 進(jìn)行 XML 解析以及 XSLT 變換的瀏覽器。不幸的是，它是通過(guò) ActiveX 對(duì)象來(lái)表示 XML 文檔以及 XSLT 處理器的。但 Mozilla 的人顯然認(rèn)識(shí)到了其中的可取之處，因?yàn)樗麄兒髞?lái)用 DOMParser、XMLSerializer 和 XSLTProcessor 創(chuàng)造了類似的功能。其中前兩個(gè)已經(jīng)成為了 HTML5 的一部分[9]。雖然基于標(biāo)準(zhǔn)的 JavaScript XML 處理方式和 IE 提供的版本差異較大，但它無(wú)疑是深受 IE 影響的。
客戶端的 XML 處理都都是 IE 對(duì) XMLHttpRequest 的實(shí)現(xiàn)的一部分，最開(kāi)始由 IE 5 以 ActiveX 對(duì)象的形式引入。其中的想法是希望可以在一個(gè)網(wǎng)頁(yè)中從服務(wù)器獲取一個(gè) XML 文檔并且允許用 JavaScript 把這個(gè) XML 當(dāng)做 DOM 來(lái)進(jìn)行處理。IE 的版本需要你使用 new ActiveXObject("MSXML2.XMLHttp")，這也使得它依賴于版本字符串，而且讓開(kāi)發(fā)者要費(fèi)盡功夫去測(cè)試、使用最新版本。再一次，F(xiàn)irefox 站出來(lái)，通過(guò)創(chuàng)建一個(gè)當(dāng)時(shí)還是私有的、與 IE 版本接口完全同名的 XMLHttpRequest 對(duì)象來(lái)清理這一片混亂。此后其他瀏覽器復(fù)制了 Firefox 的實(shí)現(xiàn)，最終使得 IE 7 也增加了一個(gè)不需要使用 ActiveX 的版本。當(dāng)然，使得每個(gè)人為 JavaScript 感到振奮的 Ajax 革命背后的驅(qū)動(dòng)力正是 XMLHttpRequest。
CSS
當(dāng)想到 CSS 的時(shí)候，你可能不會(huì)過(guò)多地想到 IE——畢竟它對(duì)于 CSS 的支持往往是滯后的（至少直到 IE 10 都是如此）。然而，IE 3 卻是第一個(gè)實(shí)現(xiàn)了 CSS 支持的瀏覽器。當(dāng)時(shí)，網(wǎng)景正在力推另一個(gè)類似的提案：JavaScript 樣式表（JSSS）[10]。從名稱就可以看出，這個(gè)提案用 JavaScript 來(lái)定義關(guān)于頁(yè)面的樣式信息。Netscape 4 引入了 JSSS 和 CSS，整整比 IE 落后了一個(gè)版本。其中對(duì) CSS 的支持并不盡如人意，常常需要將樣式翻譯為 JSSS 以便應(yīng)用[11]。這也意味著在 Netscape 4 下，如果 JavaScript 被禁止了，CSS 也無(wú)法正常工作。
而那時(shí) IE 對(duì) CSS 的實(shí)現(xiàn)僅限于字體族、字號(hào)、顏色以及背景，但這個(gè)實(shí)現(xiàn)卻是優(yōu)質(zhì)且可用的。與此同時(shí)，Netscape 4 的實(shí)現(xiàn)卻很容易出問(wèn)題、難以使用。是的，在很小的程度上，IE 導(dǎo)致了 CSS 的成功。
IE 還給我們帶來(lái)了其他最終被標(biāo)準(zhǔn)化的對(duì) CSS 作的創(chuàng)新：
1.text-overflow – 用來(lái)在文字超出容器大小時(shí)顯示省略號(hào)。在 IE 6 中首次出現(xiàn)并已在 CSS3 中被標(biāo)準(zhǔn)化[12]。目前已被各主流瀏覽器支持。
2.overflow-x 與 overflow-y – 允許你在兩個(gè)獨(dú)立的方向上對(duì)內(nèi)容溢出進(jìn)行控制。這個(gè)屬性在 IE 5 中首次出現(xiàn)，后在 CSS3 中規(guī)范化了[13]。目前已被各主流瀏覽器支持。
3.word-break – 用來(lái)指定詞語(yǔ)之間的換行規(guī)則。最初在 IE 5.5 中出現(xiàn)，現(xiàn)已被 CSS3 規(guī)范化[14]。除 Opera 外的所有主流瀏覽器均支持。
4.word-wrap – 指定了瀏覽器是否應(yīng)該在詞語(yǔ)中間換行。在 IE 5.5 中被創(chuàng)造出來(lái)，現(xiàn)已被 CSS3 標(biāo)準(zhǔn)化為了 overflow-wrap[15]，盡管所有主流瀏覽器都以 word-wrap 的形式支持它。
另外，許多 CSS3 中新的視覺(jué)效果都應(yīng)該感謝 IE 所奠定的基礎(chǔ)。IE 4 引入了私有的 filter 屬性，從成為了第一個(gè)可以做下面這些事的瀏覽器：
1.根據(jù) CSS 的指示來(lái)生成漸變（CSS3：漸變）
2.用 alpha 濾鏡來(lái)創(chuàng)建半透明元素（CSS3：opacity 以及 RGBA）
3.將一個(gè)元素旋轉(zhuǎn)任意的角度（CSS3：用 transform 配合 rotate()）
4.為一個(gè)元素應(yīng)用陰影（CSS3：box-shadow）
5.為一個(gè)元素應(yīng)用一個(gè)矩陣變換（CSS3：用 transform 配合 matrix()）
除此之外，IE 4 有一個(gè)被稱為「過(guò)渡」的功能，它允許你用濾鏡創(chuàng)建一些基本的動(dòng)畫(huà)。這個(gè)功能主要是基于通常在 PowerPoint 中可用的過(guò)渡功能，例如淡入或淡出、棋盤(pán)變換等等[16]。
所有這些功能都以某種方式成為了 CSS3 的主要功能。在 1997 年發(fā)布的 IE 4 就有了這些功能，而我們現(xiàn)在才開(kāi)始在其他瀏覽器中享受到這些功能，實(shí)在是很驚人的。
其他對(duì) HTML5 的貢獻(xiàn)
HTML5 中很大一部分都來(lái)自 IE 及其引入的 API。這里有一些本文之前還沒(méi)提到過(guò)的內(nèi)容：
拖放 – HTML5 中最酷的部分之一就是原生的拖放功能[17]。這個(gè) API 源自 IE 5，而且在 HTML5 中已有描述，且變化非常小。主要的區(qū)別是增加了 draggable 屬性來(lái)把任意元素標(biāo)記為可拖放的（IE 用了一個(gè) JavaScript 調(diào)用——element.dragDrop() 來(lái)做這件事）。除此之外，這個(gè) API 與原始版本近乎相同，目前已被各主流桌面瀏覽器所支持。
剪貼板的訪問(wèn) – 現(xiàn)在已從 HTML5 中分離出了自己的規(guī)范[18]，賦予了瀏覽器在某些情況下訪問(wèn)剪貼板的能力。這個(gè) API 最初出現(xiàn)在 IE 6 中，隨后被 Safari 模仿，它將 clipboardData 從 window 對(duì)象中取了出來(lái)，放到了剪貼板事件的 event 對(duì)象中。Safari 的改動(dòng)被保留為 HTML5 版本的一部分，而且剪貼板的訪問(wèn)在所有除 Opera 以外的主流瀏覽器中也都已被支持。
富文本編輯 – 用 designMode 進(jìn)行富文本編輯是在 IE 4 中被引入的，因?yàn)槲④浵Ｍo Hotmail 用戶們一個(gè)更好的文本編輯體驗(yàn)。后來(lái)，在 IE 5.5 引入了 contentEditable，以用作一個(gè)更輕量級(jí)的進(jìn)行富文本編輯的方法。隨之而來(lái)的是可怕的 execCommand() 方法以及它的一些附屬方法。不論好壞，這個(gè)富文本編輯的 API 已在 HTML5 中被標(biāo)準(zhǔn)化[19]，而且目前已經(jīng)被所有主流桌面瀏覽器以及移動(dòng) Safari 和 Android 瀏覽器所支持。
結(jié)論
盡管嘲笑 IE 很簡(jiǎn)單也很流行，但事實(shí)上，如果不是它所作的貢獻(xiàn)，我們不會(huì)擁有我們目前所知的 web。如果沒(méi)有 XMLHttpRequest 和 innerHTML web 會(huì)怎樣？它們正是 web 應(yīng)用的 Ajax 革命的催化劑，許多新的功能都是基于它們構(gòu)建的。可笑的是當(dāng)我們回望這個(gè)已經(jīng)成為互聯(lián)網(wǎng)上的「壞小子」的瀏覽器的歷史，會(huì)發(fā)現(xiàn)沒(méi)有它，我們不會(huì)處在今天所在的位置。
是的，IE 自身有瑕疵，但對(duì)于互聯(lián)網(wǎng)的歷史的絕大部分時(shí)間，它都是推動(dòng)技術(shù)進(jìn)步的瀏覽器�，F(xiàn)在我們處在一個(gè)大規(guī)模瀏覽器競(jìng)爭(zhēng)以及創(chuàng)新的時(shí)代，卻很容易忘記我們從哪里一路走來(lái)。所以當(dāng)你下次遇見(jiàn)正在做 IE 相關(guān)工作的人時(shí)，請(qǐng)別投去羞辱和番茄。相反，要謝謝他們幫助 IE 一路走到今天，也使 web 開(kāi)發(fā)者成為世界上最重要的工作之一。
參考文檔
innerHTML in HTML5
textContent in DOM Level 3
insertAdjacentHTML() in HTML5
Event Handlers on Elements (HTML5)
mouseenter (DOM Level 3 Events)
mouseleave (DOM Level 3 Events)
focusin (DOM Level 3 Events)
focusout (DOM Level 3 Events)
DOMParser interface (HTML5)
JavaScript Style Sheets (Wikipedia)
The CSS Saga by Håkon Wium Lie and Bert Bos
text-overflow property (CSS3 UI)
overflow-x and overflow-y (CSS3 Box)
word-break (CSS3 Text)
overflow-wrap/word-wrap (CSS3 Text)
Introduction to Filters and Transitions (MSDN)
Drag and Drop (HTML5)
Clipboard API and Events (HTML5)
User Interaction – Editing (HTML5)
評(píng)論列表
查看所有 條評(píng)論