Question

我需要在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。

也许我可以使用Class代替？正如您从代码中看到的那样，我正在以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的新手

再次感谢

Answer 1

您可以先将工具栏项代码（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))并测试。

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

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

1 个答案: