创建Web组件时如何定义全局常量？

Question

我正在创建自定义 Web 组件“upload-widget”，并在构造函数中声明三个常量以供稍后在函数中引用：

const template = document.createElement('template');
template.innerHTML = `
  <div id="dropper-zone">
    <input type="file" name="file_input" id="file_name">
    <button type="button" id="upload_btn">Upload</button>
    <div id="upload_status"></div>
  </div>
  `;

class UploadWidget extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    const FILE_NAME = this.shadowRoot.getElementById("file_name");
    const UPLOAD_BUTTON = this.shadowRoot.getElementById("upload_btn");
    const UPLOAD_STATUS = this.shadowRoot.getElementById("upload_status");


  };

  upload_action() {
    if (!FILE_NAME.value) {
    console.log("File does not exists");
        return;
    UPLOAD_STATUS.innerHTML = 'File Uploaded';
  };

  connectedCallback() {
    UPLOAD_BUTTON.addEventListener("click", () => this.upload_action());
  }
}

customElements.define('upload-widget', UploadWidget);

此代码失败，因为 Javascript 无法识别“connectedCallback()”或函数“upload_action()”中声明的常量。将声明移至任一函数会使常量仅在函数作用域内有效，而不会超出函数作用域。如何声明 constant/variable 对 class 的整个范围（包括函数）有效？

Answer 1

您需要将它们声明为 class 变量，因此您的 constructor 看起来像：

constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.FILE_NAME = this.shadowRoot.getElementById("file_name");
    this.UPLOAD_BUTTON = this.shadowRoot.getElementById("upload_btn");
    this.UPLOAD_STATUS = this.shadowRoot.getElementById("upload_status");
  };

稍后在代码中您可以将它们作为 this.UPLOAD_BUTTON.

访问

建议：变量命名尽量使用驼峰式命名，看起来更“javascripty”。所以 this.UPLOAD_BUTTON 写成 this.uploadButton.

Answer 2

注意你的模板使用有点臃肿，你可以这样做：

 constructor() {
    let html = `
         <div id="dropper-zone">
           <input type="file" name="file_input" id="file_name">
           <button type="button" id="upload_btn">Upload</button>
           <div id="upload_status"></div>
         </div>`;
    super() // sets AND returns this scope
      .attachShadow({mode: 'open'}) // sets AND returns this.shadowRoot
      .innerHTML = html;
  }

创建Web组件时如何定义全局常量？

How to define global constant when creating Web component?

javascript

scope

class

declaration

web-component