@abradley2/dommy 中文文档教程

Question

DOMMY

假人的自定义元素渲染。

安装 npm install --save @abradley2/dommy

Motivation

我想要一个方便的函数来渲染自定义元素，而不需要导入像 Polymer 这样的库，它完全重新定义了我创建自定义元素的方式。 我只想在不丢失功能的情况下渲染东西，并使用像 React 给我的相同的“diff/patch”虚拟 DOM 效率库。

这个库在引擎盖下使用 morphdom 作为差异引擎，类似于 溜溜球。 但与 yo-yo 不同的是，它使用 createElement 函数代替 ES6 模板标签以支持 JSX。

API

DOMMY 有两个功能。 您将直接使用其中的一个。

创建元素
这只是为了使用 JSX。 使用 babel-plugin-transform-react-jsx 或任何其他允许您使用自定义 jsx pragma 的源转换，只需执行：

/** @jsx createElement */
import { createElement } from '@abradley2/dommy'

Kewl。 现在您可以像使用 React 一样将 JSX 与 DOMMY 一起使用。

渲染
这是您将实际使用的 DOMMY 的唯一功能。

/** @jsx createElement */
import { createElement, render } from '@abradley2/dommy'

var count = 0

const update = () => 
  render(
    this,
    <div>
      <button
        onclick={() => {
          count += 1
          update()
        }}
      >
        {`Clicked ${count} times`}
      </button>
    </div>
  )

update() // initial render

Guide: Usage With Custom Elements

这是 DOMMY 背后的主要动机，如果它不是您使用它的目的，那么 100% 绝对有更好的解决方案供您使用。

让我们从一个简单的计数器元素开始，就像在原始示例中一样。 这里几乎没有任何变化。

class MyCounter extends HTMLElement {
  connectedCallback () {
    var count = 0

    this.update = () => {
      render(
        this,
        <div>
          <button
            onclick={() => {
              count += 1
              this.update()
            }}
          >
            {`Clicked ${count} times`}
          </button>
        </div>
      )
    }

    this.update()
  }
}

好的。 基尔。 现在让应用程序将名为“buttontitle”的属性传递给我们的自定义元素，并在渲染函数中使用它。 实际上，我们只是在做我们通常对自定义元素所做的事情：使用 this.getAttribute 处理从父元素传入的数据。

this.update = () => {
  render(
    this,
    <div>
      <h3>{this.getAttribute("buttontitle")}</h3>
      <button
        onclick={() => {
          count += 1
          this.update()
        }}
      >
        {`Clicked ${count} times`}
      </button>
    </div>
  )
}

惊人的。 但是 buttontitle 可能并不总是与安装组件时相同。 再一次，解决方案只是做我们通常对 Web 组件所做的事情。

class MyCounter extends HTMLElement {
  static get observedAttributes () {
    return ['buttontitle']
  }

  attributeChangedCallback() {
    if (this.update) this.update()
  }