[譯]HTML組件介紹（Introduction to HTML Components)

02-03

原文鏈接：Introduction to HTML Components

HTML組件（HTC）在IE5.5 版本中被初次提出，為互動式網頁的構建提供強大的新方式。使用標準的DHTML，JScript 和CSS 知識，你能在擁有behavior屬性的節點上自定義行為。讓我們一起創建一個簡單的圖片滾動效果。然後把它保存為roll.htc文件。

<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="rollon()" />n<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="rollout()" />n<SCRIPT LANGUAGE="JScript">ntmpsrc = element.src;nfunction rollon() {n element.src = tmpsrc + "_rollon.gif"n}nfunction rollout() {n element.src = tmpsrc + ".gif";n}nrollout();n</SCRIPT>n

這段代碼創建了一個簡單的用戶滑鼠移入移出圖片的HTML組件Behavior。你可以通過css 屬性「behavior」為任意節點附上這樣的行為。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">n<HTML>n<BODY>n<IMG STYLE="behavior: url(roll.htc)" SRC="logo">n</BODY>n</HTML>n

（實現的效果示例）

HTML組件的優點是我們可以通過簡單的css選擇器來將它們應用在任意節點上。例如，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">n<HTML>n<HEAD>n<STYLE>n.RollImg {n behavior: url(roll.htc);n}n</STYLE>n</HEAD>n<BODY>n<IMG CLASS="RollImg" SRC="logo">n<IMG CLASS="RollImg" SRC="home">n<IMG CLASS="RollImg" SRC="about">n<IMG CLASS="RollImg" SRC="contact">n</BODY>n</HTML>n

這樣我們可以不需要拷貝粘貼代碼就可以直接復用組件。多好！因為它直接附加到元素上，這被稱為可附加行為（Attached Behavior）。一旦你掌握了這些基本的可附加行為，我們就可以接觸一些更有趣的東西，節點行為（Element Behaviors）。你可以用節點行為創建自定義節點類型和自定義可編程介面，允許我們構建自定義組件庫，在頁面和項目中復用。像以前一樣，節點行為由一個HTML組件組成，但是現在我們必須在<PUBLIC：COMPONENT>中指定我們的組件。

<PUBLIC:COMPONENT TAGNAME="ROLLIMG">n<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="rollon()" />n<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="rollout()" />n<PUBLIC:PROPERTY NAME="basesrc" />n</PUBLIC:COMPONENT>n<img id="imgtag" />n<SCRIPT>nimg = document.all[imgtag];nelement.appendChild(img);nfunction rollon() {n img.src = element.basesrc + "_rollon.gif";n}nfunction rollout() {n img.src = element.basesrc + ".gif";n}nrollout();n</SCRIPT>n

我等會兒再來實現ROLLIMG。但是首先，我們使用特殊的<?IMPORT>標籤，在XML命名空間中引入一個自定義節點。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">n<HTML XMLNS:CUSTOM>n<HEAD>n<?IMPORT NAMESPACE="CUSTOM" IMPLEMENTATION="RollImgComponent.htc">n</HEAD>n<BODY>n<CUSTOM:ROLLIMG BASESRC="logo">n<CUSTOM:ROLLIMG BASESRC="home">n<CUSTOM:ROLLIMG BASESRC="about">n<CUSTOM:ROLLIMG BASESRC="contact">n</BODY>n</HTML>n

ROLLIMG完全封裝行為，不需要用戶去「知道」哪些節點使用了 可綁定行為。自定義節點行為的實現十分簡單，沒有看起來有那麼複雜。 IE解析一個自定義節點時，會同步從這個「模板」創建一個新的HTML 組件並將其綁定到實例。我們有兩個 神奇的全局變數：element和 document。該HTML 組件的每一個實例都有自己document ，它被映射到自定義節點中。 element 指在外部文檔嵌入自定義節點的自定義節點標籤。此外，因為每一個自定義節點都有自己的文檔根節點，這意味著，它有自己的腳本環境和全局變數集。

我們還可以設置屬性作為API，供文檔作者用使用自定義節點時使用。

在這裡，我們使用一個img 標籤作為各種template，將它放到我們自定義元素的文檔根節點。IE將它們放在一起後，組合DOM就像這樣：

<CUSTOM:ROLLIMG BASESRC="logo">n <IMG ID="imgtag" SRC="logo.gif">n</CUSTOM:ROLLIMG>n n<CUSTOM:ROLLIMG BASESRC="home">n <IMG ID="imgtag" SRC="home.gif">n</CUSTOM:ROLLIMG>n n...n

不幸的是，代碼還有一點小瑕疵。因 css 樣式表的自然級聯特性，將會泄漏一些『實現細節』。舉個例子，如果有人加上了IMG { background-color: red; }就會影響我們的內容。雖然這有時是件好事，但當你想要創建樣式化的組件時，這麼做通常會導致不良的影響。幸運的是，IE5.5 新增了『Viewlink』屬性，它不僅封裝了HTML組件的實現，還封裝了文檔。「Viewlink」不同於常規組件，不是添加節點的子節點，相反，我們可以提供一個文檔片段，瀏覽器將以私有的、封裝的方式「附加」到我們的自定義節點。最簡單的辦法就是使用HTLML組件文檔根節點。

使用 defaults.viewLink 屬性，可以設置HTML 組件的私有文檔片作為視圖鏈接，渲染子節點但不添加它們作為子節點。很好的封裝。

好吧，顯然 2017年IE 5.5 已經不再重要了。但如果你是一個web工程師，這應該會讓你停下來思考一下，現代web 組件的支柱：組件，自定義節點，影子DOM和 Imports，都是1999年發布的IE5.5中的所有特性。

現在，它看起來過時了，大寫的替代小寫的標籤，事件名帶著『on』，但這實際上只是語言上細微的變化。放下最初對它最初的不好印象，真正的基礎的部分都在這裡，而且基本上是一樣的。當然，這裡有神奇的XML標籤，而不是JavaScript API，有神奇的全局變數，而不是回調函數。但這不過是語言的細微改變。IE和chrome 只是表達方式不一樣而已。

現在，你可能從未聽說過HTML 組件，也許會令人震驚的是，一個快速搜索顯示在這篇文章發表的時候沒有人做過這件事。

為什麼IE5 的HTML組件從未流行過？不管你怎麼想，但這並非因為它缺乏開放的標準，現在相當數量的web API都是從IE的DHTML開始的。 Contenteditable，XMLHttpRequest，innerHTML屬性都是由IE精心設計的。IE 曾是網站的主要平台，幾乎沒有人使用Opera和Natscape設計和測試網站。我還記得設計的網站使用IE特性DirectX filters 水平翻轉圖片或者VML 。

這不是因為缺少佈道者或開發文檔。微軟曾努力的推廣DHTML和 HTML組件。儘管內容已經近20年了，但HTML組件和 viewLink 的開發文檔還保存得出奇地好，有圖表和圖片，示例鏈接等，沒有任何死鏈。微軟的文檔管理員值得稱讚。

對於任何瀏覽器或者web開發者，請閱讀 DHTML Dude欄目，看看API的廣度，並查看看一些顯示的示例組件。看下持久化API，動態表達屬性除了被大肆炒作的XML數據綁定技術，這一切似乎都比較現代。Web 字體？IE4 CSS 漸變？IE 5.5 矢量圖形？VML（在我看來，這是比SVG更合理的標準）

因此，回到我的問題，為什麼這個一直沒有流行起來？我相信有很多複雜的因素，可能都不是技術原因。儘管我們列出了「工程最佳實踐」和「blub 困境」，但是計算機工程一直受流行，市場需求和企業政治主導。

還有一個更重要的問題是：為什麼我是第一個指出這個問題的呢？查找"HTML組件」和「Viewlink」發現線上鮮少有2004年以前相關問題的討論。微軟肯定參與了Web 組件工作小組。這討論過嗎？

流行文化和流行音樂在過去的幾年裡不斷流行。就在幾年前，web社區興奮於object.observe，之後React證明這是沒有必要的。在"node.js 作為」同構 javascript」地位鞏固之前，甚至比v8cgi / teajs還要之前的一個早期服務端javascript項目 , 被稱為 Aptana Jaxer的奇異web框架，它用更直接的方式做這件事。。

歷史是很重要的。它更容易指出和嘲笑並忽略過時的技術，比如IE。但到目前為止，科技總有一種不可思議的能力來不斷重複自己。我們怎樣才能更好地關注眼前發生的事情，而不是假設一切都是糟糕的呢?