javascript - 在 jQuery 插件中调用原型(prototype)中的函数

Question

尝试学习可扩展的 jQuery 插件开发。我完全不知道如何从 jQuery 插件包装器调用类中的函数。

我为我的代码创建了包装器，主要来自 here ，并尝试理解/使用 this但运气不太好。

下面代码的重要部分。我希望这样我可以调用(例如)$(something).carousel(5) 并将该数字传递给 Carousel 类中的 slide 函数。对于字符串也是如此，因此 $(something).carousel('go') 将在类中运行 go。

我怎样才能用这个结构做到这一点？

(function(window, $){

  var Carousel = function(elem, options){
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
  };

  Carousel.prototype = {

    defaults: {
     [...]
    },

    init: function() {
      this.config = $.extend({}, this.defaults, this.options);
      this.create();
      return this;
    },
    create: function() {
       [...]
    },
    slide: function(num) {
       [...]
    }
  };

  Carousel.defaults = Carousel.prototype.defaults;

  $.fn.carousel = function(options) {
    return this.each(function() {

      var carousel = new Carousel(this, options);
      if (!options || typeof options == 'object') carousel.init();
      else if (typeof options == 'number') carousel.slide(options);
      else if (typeof options == 'string') carousel.options;

    });
  };

  window.Carousel = Carousel;

})(window, jQuery);

Answer 1

您或多或少走在正确的轨道上，您的主要问题是调用carousel.options只会访问Carousel<的options属性 实例。您想要做的是动态调用实例上的函数:

 $.fn.carousel = function(options) {
    return this.each(function() {

      var carousel = new Carousel(this, options);

      // do a loose comparison with null instead of !options; !0 == true
      if (options != null || typeof options === 'object')
        carousel.init();
      else if (typeof options === 'number')
        carousel.slide(options);
      // make sure options is the name of a function on carousel
      else if (typeof options === 'string' && typeof carousel[options] === 'function') {
        carousel[options](); // call the function by name
      }

    });
  };