javascript ES6设计的类应该创建一次并重用

ljsrvy3e  于 2022-12-28  发布在  Java
关注(0)|答案(1)|浏览(139)

以网站标题的ES6类为例:

// ./Header.js
export default class Header {
  constructor() {
    console.log('Header is constructing');
    this.root = document.querySelector('header');
    this.show = this.show.bind(this);
    this.hide = this.hide.bind(this);
    // Other stuff
  }

  // Other methods for account and interactive menus
  hide() {
    this.root.classList.add('hide');
  }

  show() {
    this.root.classList.add('show');
  }
}

再举个例子,其他类会从头文件调用方法:
x一个一个一个一个x一个一个二个x
每次使用new Header时都会构造Header,假设我们希望Header既是一个对象又是一个可导出对象:如何设计代码以使报头仅构造一次?

tpgth1q7

tpgth1q71#

通过导出初始化的标头:

class Header {
  constructor() {
    console.log('Header is constructing');
    this.root = document.querySelector('header');
    this.show = this.show.bind(this);
    this.hide = this.hide.bind(this);
    // Other stuff
  }

  // Other methods for account and interactive menus
  hide() {
    this.root.classList.add('hide');
  }

  show() {
    this.root.classList.add('show');
  }
}

export default new Header()

现在可以在其他文件中重复使用它。

相关问题