Question

如果我有一个简单的组件，例如下面的组件，那么在我的班级中使用静态方法会不会更好？我意识到这可能归结为意见，但我感兴趣的是，如果存在架构原因，为什么一种方式可能优于另一种方式。

非静态方法：

class mainNav {
  toggleMainNav() {
    const navBtn = document.getElementById('toggle-menu');
    const navMenu = document.getElementById('main-nav');

    navBtn.addEventListener('click', () => {
      navMenu.classList.toggle('open');
    });
  }

  init() {
    this.toggleMainNav();
  }
}

module.exports = mainNav;

要实例化，我需要首先实例化该类：

const mainNav = require("../js/components/mainNav/mainNav");

//Init nav
const nav = new mainNav;
nav.init();

或者使用静态方法，我可以这样做：

class mainNav {
  static toggleMainNav() {
    const navBtn = document.getElementById('toggle-menu');
    const navMenu = document.getElementById('main-nav');

    navBtn.addEventListener('click', () => {
      navMenu.classList.toggle('open');
    });
  }

  static init() {
    this.toggleMainNav();
  }
}

module.exports = mainNav;

并实例化：

const mainNav = require("../js/components/mainNav/mainNav");

mainNav.init();

在它的表面上使用静态方法在这种情况下似乎更容易，因为我不必首先实例化类的实例。

不是来自OOP编程背景，是否有理由认为这样做会被视为不良做法？

Answer 1

没有数据的类基本上是静态方法的集合。这是antipattern。在这种情况下，仅仅导出函数就足够了，如下所示：

function doSomething() { ... }
module.exports = doSomething

并像这样使用它：

const func = require('../path/module')
func()

在定义组件时，我应该使用ES6 Class的静态方法吗？

1 个答案: