1. HTML import
如下
上面的代碼嗦枢,一眼就能看出語義。
如果將<share-buttons>元素的樣式與腳本两入,封裝在一個 HTML 文件share-buttons.html之中净宵,這個元素就可以復用了敲才。
使用的時候裹纳,先引入share-buttons.html。
<linkrel="import"href="share-buttons.html">
然后就可以在網(wǎng)頁中使用了紧武。HTML Imports 是一個非常新的技術以至于目前只有 Chrome 31 及以上才支持剃氧。
2. Custom Elements 標準
Custom Elements 標準對自定義元素的名字做了限制。
"自定義元素的名字必須包含一個破折號(-)所以<x-tags>阻星、<my-element>和<my-awesome-app>都是正確的名字朋鞍,而<tabs>和<foo_bar>是不正確的。這樣的限制使得 HTML 解析器可以分辨那些是標準元素妥箕,哪些是自定義元素滥酥。"
注意,一旦名字之中使用了破折號畦幢,自定義元素就不是HTMLUnknownElement的實例了坎吻。
Custom Elements 標準規(guī)定了,自定義元素的定義可以使用 ES6 的class語法宇葱。
上面代碼中瘦真,原生的window.customElements對象的define方法用來定義 Custom Element。該方法接受兩個參數(shù)黍瞧,第一個參數(shù)是自定義元素的名字诸尽,第二個參數(shù)是一個 ES6 的class。
這個class使用get和set方法定義 Custom Element 的某個屬性印颤。
如此網(wǎng)頁中就可以插入<my-element>
處理腳本即可