Question

我有一个具有以下结构的插件：

(function($){

  function pluginName(el, options) {

    var _this = this;

    _this.defaults = {
      someOptions: '',
      onSlideStart: function() {},
      onSlideEnd: function() {},
    };

    _this.opts = $.extend({}, _this.defaults, options);

    $(el).on("slideStart", function() {
      _this.opts.onSlideStart.call();
    });

    $(el).on("slideEnd", function() {
      _this.opts.onSlideEnd.call();
    });
  }

  pluginName.prototype = {

    someFunctions: function() {
    }

  };

  $.fn.pluginName = function(options) {
    if(this.length) {
      this.each(function() {
        var rev = new pluginName(this, options);
        rev.init();
        $(this).data('pluginName', rev);
      });
    }
  };
})(jQuery);

如果我按照以下方式调用它，一切都没问题：

$('.element').pluginName({
  someOptions: 'full',
  onSlideStart: function() {
    console.log('slideStart!');
  },
  onSlideEnd: function() {
    console.log('slideEnd!');
  },
});

但我想动态加载自定义事件处理程序，如下所示：

(function($){

  function pluginName(el, options) {

    var _this = this;

    _this.defaults = {
      someOptions: '',
      onSlideStart: function() {},
      onSlideEnd: function() {},
    };

    _this.opts = $.extend({}, _this.defaults, options);

    for (var optionName in _this.opts) {
      var
        optionValue = _this.opts[optionName],
        optionType  = typeof(optionValue)
      ;

      if(optionType == 'function') {
        optionNames = optionName.split('on');
        eventName   = global.lowerFirstLetter(optionNames[1]);

        $(el).on(eventName, function() {
          eval('_this.opts.' + optionName + '.call();');
        });
      }
    }
  }

  ...

})(jQuery);

但这不起作用。当我用“动态”部分调用插件时，它总是调用slideEnd函数。我是做错了还是我的插件模式动态调用自定义事件处理程序是不可能的？

Answer 1

为什么要使用eval？使用eval通常很糟糕。

if(optionType == 'function') {
    optionNames = optionName.split('on');
    eventName   = global.lowerFirstLetter(optionNames[1]);

    $(el).on(eventName, _this.opts[optionName]);
  }

试试并告诉我。

在jquery插件上动态调用自定义事件

1 个答案: