jQuery 插件模式：更面向对象的东西？

Question

我正在开发一个 jQuery 插件，遵循创作指南中详述的模式。 基本上：

(function($) {
  // Private
  var doSomething = function($element, settings) { ... }

  var doSomethingElse = function($element, settings) { ... }

  // Public
  var methods = {
    init: function(options) { ... },
    show: function() { ... },
    hide: function() { ... },
    update: function(content) { ... }
  };

  $.fn.myPlugin = function(method) {
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || ! method) {
      return methods.init.apply(this, arguments);
    } else {
      $.error('Method ' +  method + ' does not exist on jQuery.myPlugin');
    }
  };
})(jQuery);

这是我不喜欢的：我必须将相同的“实例”变量传递给所有私有函数。 我仍在努力成为一名 JS 专业人士——所以请原谅我不正确的术语用法——但如果我在 Ruby 或 PHP 中做同样的事情，我会创建一个 class 的所有这些成员的公共和私有成员class 的实例将对应于$element 。 然后我可以做这样的事情（在 JS 中）：

var firstElement = new MyPlugin($element, settings);
firstElement.doSomething();

它没有将$element和settings传递给doSomething() ，而是已经可以通过this.$element和this.settings访问它们。

知道我要去哪里？ 我想，我正在寻找一种更加面向对象的方法。 现在，我完全明白 JS 没有像 Ruby 或 PHP 这样的类。 但是在构造函数、模块模式和常规 object 表示法（如上面的methods ）之间，我不确定哪个是 jQuery 插件的最佳选择。

有人可以帮我指出正确的方向吗？ 也许现有 jQuery 插件的一些例子做得很好？ 谢谢！

Answer 1

jQuery UI Widget Factory可能是一个很好的解决方案。 它可用于创建任何类型的有状态 jQuery 插件，并且可以与 jQuery UI 套装的 rest 完全分开使用。

一些有用的链接：

• http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/
• http://wiki.jqueryui.com/w/page/12138135/Widget-factory
• http://ajpiano.com/widgetfactory/ （演示文稿）

如果你想要一个更简单的解决方案，我会使用 go 和常规构造函数 + 原型设置来“正确”地做事，或者使用显示模块模式来创建一个 function ，它将元素和任何选项作为 ZDBC161CAA588829EDBDD747 public .

使用显示模块模式的示例：

function myPlugin (element, options) {
    var privateVar;

    function privateFunc () {}

    function publicMethod () {}

    return {
        publicMethodName: publicMethod
    };
}

这种模式比传统的原型设置更整洁，但没有利用原型链。

编辑：澄清一下，在使用任何这些模式时，您应该为每个元素/使用创建一个新实例。

Answer 2

在插件本身中存储任何类型的状态信息不一定是一个好主意，因为它会被所有实例共享。 一种选择是将数据存储在插件之外的其他地方。

Plugins/Authoring 页面有一个 Data 部分，它描述了如何使用data() function 在每个元素的基础上存储插件使用的信息。

使用数据可帮助您跨插件的方法调用跟踪变量和 state。 将您的数据命名空间到一个 object 文字中，可以轻松地从一个中心位置访问插件的所有属性，并减少数据命名空间，以便在需要时轻松删除。

页面上提供的示例使用您帖子中描述的插件模式，但允许将“实例”变量与它们关联的元素一起存储。

这样做时要记住的一件事是：

始终命名您的方法、事件和数据。

编辑：

还应该注意的是，在您的示例中，您的某些函数期望$element作为参数，但这不是必需的，因为当通过插件调用这些函数时， this将引用正确的东西（因为apply()正在调用并将上下文设置为正确的this ）。