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 に答える