转换ES6中的ES5 IIFE，OOP Javascript编程

Posted 2021-04-01

我需要在ES6中重构一个IIFE。在ES6中，let和const有一个块范围，所以我真的需要在ES6中使用IIFE吗？这是代码的ES5版本：

var oojs = (function(oojs) {
  var createToolbarItems = function(itemElements) {
    var items = [];
    [].forEach.call(itemElements,
      function(el, index, array) {

        var item = {
          toggleActiveState: function() {
            this.activated = !this.activated;
          }
        };

        Object.defineProperties(item, {
          el: {
            value: el
          },
          enabled: {
            get: function() {
              return !this.el.classList.contains('disabled');
            },
            set: function(value) {
              if (value) {
                this.el.classList.remove('disabled');
              } else {
                this.el.classList.add('disabled');
              }
            }
          },
          activated: {
            get: function() {
              return this.el.classList.contains('active');
            },
            set: function(value) {
              if (value) {
                this.el.classList.add('active');
              } else {
                this.el.classList.remove('active');
              }
            }
          }
        });

        items.push(item);
      });
    return items;
  };

  oojs.createToolbar = function(elementId) {
    var element = document.getElementById(elementId);
    var items = element.querySelectorAll('.toolbar-item');

    return {
      items: createToolbarItems(items)
    }
  };

  return oojs;
}(oojs || {}));

在ES6中翻译此代码的最佳方法是什么？我尝试了很多解决方案但我错过了一些东西，我收到了一个错误：oojs is not defined。

也许我可以用一个班级代替？从代码中可以看出我正在以OOP方式编写工具栏API（我认为......）

谢谢你的帮助

编辑：感谢georg，我尝试使用类重构我的代码。这是新的ES6版本：

class Toolbar {
  constructor(elementId) {
    this.elementId = elementId;
  }
  get items() {
    const element = document.getElementById(this.elementId);
    return element.querySelectorAll(".toolbar-item");
  }
  createToolbarItems() {
    return [...this.items].map(el => new ToolbarItem(el));
  }
}

class ToolbarItem {
  constructor(el) {
    this.el = el;
  }
  get enabled() {
    return !this.el.classList.contains('disabled');
  }
  set enabled(value) {
    if (value) {
      this.el.classList.remove('disabled');
    } else {
      this.el.classList.add('disabled');
    }
  }
  get activated() {
    return this.el.classList.contains('active');
  }
  set activated(value) {
    if (value) {
      this.el.classList.add('active');
    } else {
      this.el.classList.remove('active');
    }
  }
  toggleActiveState() {
    this.activated = !this.activated;
  }
}

// const toolbar = new Toolbar('myToolbar');
// const toolbarItems = toolbar.createToolbarItems();

编辑：请检查是否是编写此代码的正确方法，我是ES6的新手

再次感谢

答案

您可以从分解工具栏项代码（var item及以下）开始：

class ToolbarItem 
{
    constructor(element) {
      ....
    }
}

现在，决定是否要将enabled和activated保留为属性，或者将它们重构为isEnabled和setEnabled等显式方法。在前一种情况下，它将是，

class ToolbarItem {
   get enabled() {
      ...
   }
   set enabled(value) {
      ...
   }
}

普通方法可以像这样定义：

class ToolbarItem {
   isEnabled() {
      ...
   }
   setEnabled(value) {
      ...
   }
}

完成整理后，用items.push(new ToolbarItem(el))替换项目初始化代码并测试。

希望这有助于您入门，祝您好运！