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中做同样的事情,我会创建一个包含所有这些公共和私有成员和方法的类,每个该类的实例将对应于$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的小部件厂可能是一个很好的解决方案.它对于创建任何类型的有状态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/(演示文稿)

如果你想要一个更简单的骨骼解决方案我会使用常规的Constructor + prototype设置来"正确"做事或使用Revealing Module Pattern来创建一个函数,该元素和任何选项作为参数并返回公共方法.

使用Revealing Module Pattern的示例:

function myPlugin (element, options) {
    var privateVar;

    function privateFunc () {}

    function publicMethod () {}

    return {
        publicMethodName: publicMethod
    };
}

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

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