0

假设我有一个对话框组件，例如

class ModalDialog extends HTMLElement {
    constructor(){
        super()
        this._shadow = this.attachShadow({mode: 'closed'})
    }

    connectedCallback(){
        const template = `
            <style>
            ... lots of style that doesn't matter to this question ...
            </style>
            <div class="dialog">
                <div class="dialog-content">
                    <div class="dialog-header">
                        <slot name="header"></slot>
                        <span class="close">&times;</span>
                    </div>
                    <div class="dialog-body"><slot name="body"></slot></div>
                    <div class="dialog-footer"><slot name="footer"></slot></div>
                </div>
            </div>
        `

        this._shadow.innerHTML = template
        this._shadow.querySelector('.close').onclick = () => this.hide()
        const dialog = this._shadow.querySelector('.dialog')
        dialog.onclick = evt => {
            if(evt.target == dialog){ //only if clicking on the overlay
                this.hide()
            }
        }
        this.hide()
    }

    show() {
        this.style.display = 'block'
    }

    hide(){
        this.style.display = 'none'
    }
}

window.customElements.define('modal-dialog', ModalDialog)

现在假设我想创建专用对话框……例如，允许用户选择图像的对话框。

我可以这样做

import {} from './modal-dialog.js'

class ImageSelector extends HTMLElement {
    constructor(){
        super()
        this._shadow = this.attachShadow({mode: 'closed'})
    }

    connectedCallback(){
        const template = `
            <style>
                ... more style that doesn't matter ...
            </style>
            <modal-dialog>
                <div slot="header"><h3>Select Image</h3></div>
                <div slot="body">
                     ... pretend there's some fancy image selection stuff here ...
                </div>
            </modal-dialog>
        `
        this._shadow.innerHTML = template
    }

    show(){
        this._shadow.querySelector('modal-dialog').show()
    }

    hide(){
        this._shadow.querySelector('modal-dialog').hide()
    }
}
window.customElements.define('image-selector', ImageSelector)

但我不喜欢showandhide方法，那里。

另一种选择是从对话框继承而不是从HTMLElement...

import {} from './modal-dialog.js'

class ImageSelector extends customElements.get('modal-dialog'){
    constructor(){
        super()
    }

    connectedCallback(){
        ... now what? ...
    }
}
window.customElements.define('image-selector', ImageSelector)

但如果我这样做，我该如何填补空缺？

天真的方法当然是使用_shadow并将其放入插槽的内部 html 中，但我有一种感觉，这不是要走的路。

4

2 回答 2

1

TLDR；不可能同时使用继承和组合。

长答案：

您实际上是在混合两个不同但替代的概念：

  1. 继承 - 在覆盖/重载现有行为时使用
  2. 组合 - 在使用其他实体的行为并在其周围添加更多行为时使用。

您可以用一个替换另一个，一般来说，在 Web UI 编程中，Composition总是优于Inheritance，因为它提供了松散耦合。

在您的情况下，您实际上想要使用模板而不是实际覆盖它。所以，组合在这里是一个更好的选择。但这也意味着您实际上将不得不编写更多样板代码，即show和hide方法的包装器实现。

从理论上讲，发明继承是为了促进代码重用并避免重复代码，但与组合相比，这是一种成本。

于 2021-03-08T03:57:26.473 回答
0

来自 Harshals 的回答的好信息；这是用户态代码

除非您正在执行 SSR，否则读取的第一个文件是 HTML 文件。

所以把模板内容放在那里，让一个通用的 Modal Web 组件读取模板

<template id="MODAL-DIALOG">
  <style>
    :host { display: block; background: lightgreen; padding:.5em }
    [choice]{ cursor: pointer }
  </style>
  <slot></slot>
  <button choice="yes">Yes</button>
  <button choice="no" >No</button>
</template>
<template id="MODAL-DIALOG-IMAGES">
  <style>
    :host { background: lightblue; } /* overrule base template CSS */
    img { height: 60px; }
    button { display: none; } /* hide stuff from base template */
  </style>
  <h3>Select the Framework that is not Web Components friendly</h3>
  <img choice="React" src="https://image.pngaaa.com/896/2507896-middle.png">
  <img choice="Vue" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1184px-Vue.js_Logo_2.svg.png">
  <img choice="Svelte" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png">
   <slot><!-- remove slot from BaseTemplate, then this slot works --></slot>
</template>

<modal-dialog>Standard Modal</modal-dialog>
<modal-dialog template="-IMAGES">Images Modal</modal-dialog>

<script>
  document.addEventListener("modal-dialog", (evt) => {
    alert(`You selected: ${evt.detail.getAttribute("choice")}`)
  });
  customElements.define('modal-dialog', class extends HTMLElement {
    constructor() {
      let template = (id="") => {// if docs say "use super() first" then docs are wrong
        let templ = document.getElementById(this.nodeName + id);
        if (templ) return templ.content.cloneNode(true);
        else return []; // empty content for .append
      }
      super().attachShadow({mode:"open"})
             .append( template(),
                      template( this.getAttribute("template") ));
      this.onclick = (evt) => {
        let choice = evt.composedPath()[0].hasAttribute("choice");
        if (choice) 
          this.dispatchEvent(
            new CustomEvent("modal-dialog", {
              bubbles: true,
              composed: true,
              detail: evt.composedPath()[0]
            })
          );
       // else this.remove();   
      }
    }
    connectedCallback() {}
  });
</script>

笔记

  • 当然，您可以将其包装<TEMPLATES>在 JS 字符串中

  • 您不能很好地添加<script>模板
    ，您可以..但它在全局范围内运行，而不是在组件范围内

  • 对于更复杂的对话框，<SLOT>您可能必须使用代码从 Basetemplate 中删除不需要的插槽

  • 不要让它太复杂：

    • 好的组件可以做一些非常好的事情。
    • 坏组件尝试做所有事情......创建另一个组件
于 2021-03-08T12:55:25.210 回答