0

我目前正在为 H5P 插件开发一个应用程序。由于我需要为 H5P 编辑器开发一些东西，我找到了有关如何实现小部件的文档。

/**
 * Color selector widget module
 *
 * @param {H5P.jQuery} $
 */
H5PEditor.widgets.colorSelector = H5PEditor.ColorSelector = (function ($) {
 
  /**
   * Creates color selector.
   *
   * @class H5PEditor.ColorSelector
   *
   * @param {Object} parent
   * @param {Object} field
   * @param {string} params
   * @param {H5PEditor.SetParameters} setValue
   */
  function C(parent, field, params, setValue) {
    this.parent = parent;
    this.field = field;
    this.params = params;
    this.setValue = setValue;
  }
   
  /**
   * Append the field to the wrapper.
   *
   * @param {H5P.jQuery} $wrapper
   */
  C.prototype.appendTo = function ($wrapper) {};
 
  /**
   * Validate the current values.
   *
   * @returns {boolean}
   */
  C.prototype.validate = function () {};
 
  /**
   * Remove the current field
   */
  C.prototype.remove = function () {};
 
  return C;
})(H5P.jQuery);

由于我需要使用我已经在 typesript 中编写的其他类，因此我希望在使用我选择的编程语言时保持一致。我特别试图围绕实际代码的第一行和最后一行：我必须声明两个具有相同内容的类吗？老实说，我以前从未见过这样的建筑。

我会非常感谢一些提示，如何正确地将这个例子翻译成打字稿。你也可以放弃一些概念，例如如何命名这个结构。

非常感谢您！

4

1 回答 1

1

您在那里看到的称为自调用函数（或立即调用函数）。它在不使用全局命名空间的情况下立即运行，从而保持干净。在最后一行中，它从全局命名空间中获取对 jQuery 的引用，因此可以在函数内部使用它。

在这里，该函数用于使用编辑器小部件填充全局 H5PEditor 对象（尽管这并不精确，但您可以将其称为类），以便以后使用。该函数返回C分配给您注意到的这两个属性的引用。如果您现在使用class符号 whereC将是constructor函数，那么这本质上就是您正在做的事情。

我不完全确定，但我认为使用对该函数（类）的两个引用实际上并不是绝对必要的。前者应该足以满足 H5P 的需求，但我在这里可能是错的。

如果您使用的是打字稿，那么我假设您已经为自己设置了一些构建链，包括 Babel 等。在这种情况下，查看 https://github.com/otacke/h5p-editor-boilerplate应该会对您有所帮助已经。它本质上是您在上面使用class符号和 webpack/npm 构建链发布的内容，您可以轻松地将 TypeScript 添加到其中。

于 2021-08-11T08:46:51.657 回答