HtmlComponents · FA+Ecloud互聯網應用開發平臺綜合技術入門指南(READ)

## 一、概述 htc的全稱就是Html Components，由微軟在IE5.0后開始提供的一種新的指令組合，它可以把某種特定功能的代碼封裝在一個組件之中，從而實現了代碼的重復使用，據說是用來代替activex和applet的；它可以以兩種方式被引入到HTML頁面中，一種是作為“行為”被附加到元素，使用CSS引入，一種是作為“組件”，擴展HTML的標簽體系。 Html Components雖然規范很早就指定出來，但現在基本沒落了，不再被主流瀏覽器支持；后續出現類似的技術，Web Components ，它包括以下四種技術(每種都可以被單獨使用)； HTML 組件是封裝的對象，也像 ActiveX 控件一樣是“自包含”的，可以在開發完后發布給任何人。HTC 文件并不僅僅是將一個 HTML 文件的擴展名換成 .htc，它含有腳本和 HTC 定制元素的集合。 Chrome完全支持Html Components規范； ## 二、說明 Web Components 包括以下四種技術(每種都可以被單獨使用)： Shadow DOM 一種可以在document下組合多個同級別并且可以項目作用的DOM樹的方法，因此可以更好完善DOM的構成 Custom Elements 一種可以允許開發者在document中定義并使用的新的dom元素類型，即自定義元素； HTML Templates 模板沒什么可說了，在標準實現之前其實我們一直都在用js來實現該方式 HTML Imports 一種允許一個html文檔在別的htmldocuments中包含和復用的方法 ## 三、實例 index.html ``` <!DOCTYPE> <html> <head> <title>webcomponent</title> <link rel="import" href="./components/helloword.html" /> </head> <body> <hellow-world></hellow-world> </body> </html> ``` ``` <template> <style> .coloured { color: red; } </style> <p>the first webcompnent is <strong class="coloured">Hello World</strong></p> </template> <script> (function() { // Creates an object based in the HTML Element prototype // 基于HTML Element prototype 創建obj var element = Object.create(HTMLElement.prototype); // 獲取特mplate的內容 var template = document.currentScript.ownerDocument.querySelector('template').content; // element創建完成之后的回調 element.createdCallback = function() { // 創建 shadow root var shadowRoot = this.createShadowRoot(); // 向root中加入模板 var clone = document.importNode(template, true); shadowRoot.appendChild(clone); }; document.registerElement('hellow-world', { prototype: element }); }()); </script> ``` ![](https://img.kancloud.cn/bb/67/bb67d6af8b3c12d7f6d44f8f55b156d9_836x352.png)