javascript - jQuery 插件模式 : something more object-oriented?

Question

我正在开发一个 jQuery 插件，遵循 Authoring 中详述的模式指导。基本上:

(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);

这是我不喜欢的地方:我必须将相同的“实例”变量传递给所有私有(private)函数。我仍在努力成为一名 JS 专家——请原谅我错误的术语使用——但如果我在 Ruby 或 PHP 中做同样的事情，我会创建一个包含所有这些公共(public)和私有(private)成员和方法的类，并且每个该类的实例将对应于一个 $element。然后我可以做这样的事情(在 JS 中):

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

与其将 $element 和 settings 传递给 doSomething()，不如通过 this.$element 访问它们 和 this.settings。

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

有人可以帮我指明正确的方向吗？也许现有的 jQuery 插件的一些例子可以很好地做到这一点？谢谢!

Answer 1

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

一些有用的链接:

• http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/
• http://wiki.jqueryui.com/w/page/12138135/Widget-factory
• http://ajpiano.com/widgetfactory/ (介绍)

如果你想要一个更简单的解决方案，我会使用常规的构造函数 + 原型(prototype)设置来“正确地”做事，或者使用 Revealing Module Pattern创建一个将元素和任何选项作为参数并返回公共(public)方法的函数。

一个使用揭示模块模式的例子:

function myPlugin (element, options) {
    var privateVar;

    function privateFunc () {}

    function publicMethod () {}

    return {
        publicMethodName: publicMethod
    };
}

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

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