javascript - 如何将小型 jQuery 扩展（函数）转换为模块化 javascript？

Question

我正在使用 webpack（通过 Rails 框架和 webpacker gem）将应用程序从 jQuery 更新为 vanilla JS。我在 jQuery 中有几个辅助函数作为扩展实现，但我不确定将这些函数迁移到模块化 javascript 的最佳方法是什么。

这个简单的允许我增加/减少元素中的文本值。

使用 HTML <div id="counter">1</div>，我会通过它来增加它$("#counter").increment()，它会将值从 1 更新为 2。效果很好，并且允许我在任何地方使用这个函数。

# jquery extension
jQuery.extend(jQuery.fn, {
  increment(param) {
    return this.each(function() {
      const $element = $(this)

      if (param) {
        $element.text(param)
      } else {
        const $value = parseInt($element.text())
        if ($value !== NaN) {
          $element.text($value + 1)
        }
      }
      return $element
    })
  }
})

然而，随着我转向 webpacker 和模块化 JS，我想我应该将它包装到一个模块（文件）中，然后将它导入到我想使用它的任何地方。

export default class Counter {
  increment(elementOrId) {
    const element = (elementOrId instanceof HTMLElement) ? elementOrId : document.getElementById(elementOrId)

    const currentCount = parseInt(element.text())
    if (currentCount !== NaN) {
      element.text(currentCount + 1)
    }

    return element
  }

  decrement() { ... }
}

然后在另一个 JS 模块（文件）中使用它：

import Counter from "counter"

element = document.getElementById("counter")
Counter.increment(element)

对于像一些辅助方法这样小的东西来说，这似乎需要很多步骤。

但是，我认为像 lodash 这样的 JS 库的结构是这样的，它是 lodash 类 ( _)，它只有一堆有用的 misc 辅助方法。

那是我应该为自己的自定义辅助方法实现的标准 JS 模块化方法吗？构建一个 JS 类并将我所有的方法都像这样放入其中？

标签： javascriptwebpackes6-modules