What is X-Tag ?

X-Tag的核心github

X-Tag是什麼?

X-Tag最初是由Mozilla開發的,現在由微軟的開發者支持,它是一個開源的JavaScript庫,它封裝了W3C標準Web組件家族的api,爲組件開發提供了一個緊湊的、功能豐富的接口。雖然X-Tag可以很容易地利用所有的Web組件API(自定義元素、影子DOM、模板和HTML導入),但是它只需要定製的元素API支持來操作。在沒有本地定製元素api的情況下,X-Tag使用了谷歌的聚合物框架所依賴的polyfill。您可以在構建部分查看我們的一攬子選項;

usage:

在這裏用1.5版本的demo.簡單介紹下使用方法;

//html
<body>
    <x-clock></x-clock>
</body>
<script src="https://cdn.bootcss.com/x-tag/1.5.11/x-tag-core.js"></script>
<script src="index.js"></script>
//index.js
xtag.create('x-clock', class extends XTagElement {
  connectedCallback () {
    this.start();
  }
  start (){
    this.update();
    this._interval = setInterval(() => this.update(), 1000);
  }
  stop (){
    this._interval = clearInterval(this._data.interval);
  }
  update (){
    this.textContent = new Date().toLocaleTimeString();
  }
  'tap::event' (){
    if (this._interval) this.stop();
    else this.start();
  }
});

ok 啦. 就這麼簡單;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章