Question

所以我有一些编写普通插件来做任何事情的经验，但我想转向一个基于对象的事件驱动系统，它可以为最终用户提供更多动态和可定制的系统。为了我的问题，我写了一个小插件，只是突出显示$(selector).hover()事件上的文字。

这是JS / jQuery：

(function($) {
  var objs = [];

  var defaults = {
       color: "blue",
      normal: "black",
     onHover: function() {},
    offHover: function() {}
  };

  var Text = function (settings, self) {
    this.self     = $(self);
    this.color    = settings.color;
    this.normal   = settings.normal;
    this.show     = function () { this.self.css( "color", this.color); }
    this.noShow   = function () { this.self.css( "color", this.normal);}
    this.onHover  = settings.onHover;
    this.offHover = settings.offHover;
  };

  $.fn.myPlugin = function(opts) {
    this.each(function() {
      var settings = $.extend({}, defaults, opts);

      $(this).data('index', objs.push(new Text(settings, this)) -1);
      // I feel like this should be handled differently, maybe
      // attach an event to the inside of the object?
  });

    this.hover(
      function(e) {
        objs[$(e.currentTarget).data('index')].show();
        objs[$(e.currentTarget).data('index')].onHover();
      }, function(e) {
        objs[$(e.currentTarget).data('index')].noShow();
        objs[$(e.currentTarget).data('index')].offHover();
    });
  };
}(jQuery));

基本上，这一行...

(this).data('index', objs.push(new Text(settings, this)) -1);

......处理方式可以大不相同，效率更高。问题是我需要一个全局数组来保存插件生成的所有对象。因此，如果我在两个单独的＆＃39; p＆＃39;标签，然后在该数组中应该有两个对象，依此类推。现在，这个方面正在“工作”。但我需要通过附加一个＆＃39;索引来存储对象所在索引的引用。 DOM元素的数据类型。这对于采用面向对象的方法来说是一种非常错误的方法。那么我怎么能在一个事件中触发这个功能......

myObject.show();

...其中myObject是对我想要突出显示的数组中元素的引用。

我希望我的问题很明确，这是一个奇怪的问题来描述我的感受，但如果可以按我想到的方式应用它也是一个非常强大的概念。如果有任何不清楚的地方，请告诉我，我很乐意澄清。

Answer 1

在进行更多阅读并尝试理解面向对象编程如何在javascript，jquery和DOM方面工作时，我偶然发现了自己的答案。以下是任何可能与我进入插件开发时一样困惑的人的代码：

(function($) {
  var defaults = {
       color: "blue",
      normal: "black",
     onHover: function() {},
    offHover: function() {}
  };

  var Text = function(opts, self) {
    var settings  = $.extend({}, defaults, opts);
    this.self     = $(self);
    this.color    = settings.color;
    this.normal   = settings.normal;
    this.onHover  = settings.onHover;
    this.offHover = settings.offHover;
    this.show     = function () { this.self.css( "color", this.color);  };
    this.noShow   = function () { this.self.css( "color", this.normal); };
  };

  $.fn.myPlugin = function(opts) {
    this.each(function() {
      this.text = new Text(opts, this);
    });

    this.hover(
      function() {
        this.text.show();
        this.text.onHover.call();
      }, function() {
        this.text.noShow();
        this.text.offHover.call();
      });
  };
}(jQuery));

我正在处理的问题是对名称空间和闭包的适当理解，以及DOM元素可以做什么和不做什么。我不确定这是否是常用的方式，但它对我的用途非常有效，可能对你有用。

如何编写面向对象的jQuery插件？

1 个答案: