Question

我正在尝试从基类实现插件，我希望能够在每个级别（基类，插件或组件实现）上扩展默认选项

我有一个JavaScript类作为我所有插件的基础

 export default class PluginBase {
  /**
   * @param {object} defaults
   * @param {object} options
   */
  constructor(defaults, options) {
    // extend default options
    this.options = jQuery.extend(true, {}, defaults, options)
  }
}

然后假设我实现了一个扩展此类

的轮播插件

import PluginBase from 'project/plugin-base'

//default options at a 'carousel level'
const DEFAULTS = {
  some_default : "options"
}

export default class CarouselPlugin extends PluginBase {
  /**
   * @param {object} defaults
   * @param {object} options
   */
  constructor(defaults, options) {
    super(DEFAULTS, options)

    // extend default options
    this.options = $.extend(true, {}, DEFAULTS, options)
  }

  init() {
      // Initialization
  }


  someCarouselMethod() {
    // SomePluginMethod
  }

}

此时它工作正常，我在下一步遇到麻烦，我想在组件中使用它时扩展Carousel类（因为并非所有轮播都表现相同）并且能够扩展默认值一次再次，我也希望能够在组件的默认值中引用一个方法。

对于组件插件我有以下类：

import CarouselPlugin from 'project/plugins/plugin-carousel'

(function ($) {

  const pluginNAME = `componentSlider`

  class Plugin extends CarouselPlugin {

    constructor(options) {
      super(DEFAUTS, options)

      //extend options
      this.options = $.extend(true, {}, this.defaults, this.options)

      //call init from previous class (that would use the extended options)
      this.init()

      }

    onDragged (event) {
      // onDragged method
    }
  }


  //here goes some logic to attach my plugin to $.fn
}(jQuery))

所以，如果我这样调用我的插件：componentSlider({ //optionshere })我的插件的选项扩展了carousel中设置的默认和选项，这扩展了PluginBase的默认值。

然后我想在最后一个班级DEFAULTS上设置Plugin个选项。我希望能够有{ ondrag: this.ondrag()}这样的选项，它们可以引用Plugin类的ondrag方法（或任何父类中的ondrag方法，如果存在的话）。我不知道在哪里声明变量DEFAULTS，因为如果super()引用了this，它就无法在{{1}}之前实例化。

以正确的方式扩展扩展类中的默认选项

0 个答案: