当前位置: 首页 > 工具软件 > X-Tag > 使用案例 >

What is X-Tag ?

钱和安
2023-12-01

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 啦. 就这么简单;

 类似资料: