0

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

(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 函数。那么我做错了还是我的插件模式无法动态调用自定义事件处理程序？

4

1 回答 1

1

为什么使用 eval ？使用 eval 通常是不好的。

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

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

试试看，让我知道。

于 2013-09-03T10:01:02.280 回答