Question

我正在努力学习如何最好地结合javascript Classes和jQuery插件。这个问题不是很具体，我希望的是指向更多资源的指针。

基本上，我想在一个类中存储状态数据和私有方法，然后扩展我调用我的插件的每个jQuery对象以获得那些私有方法和属性。这样在插件中我可以直接从jQuery对象调用方法。

我读了jQuery plugin design pattern (common practice?) for dealing with private functions，特别是大卫的回答，但每次都会初始化一个新类，因此不能用来保存对象的状态。

我还找到了http://fuelyourcoding.com/jquery-plugin-design-patterns-part-i/，它建议创建一个类，然后将其存储在.data（）中。

我认为理想情况下我最终想要的是看起来像

的代码

(function( $ ){

  var methods = {
    init : function( options ) { // Initialize each object with a state and private methods },
    show : function( ) { 
      // testFoo() is a private method that checks the element's state
      if(this.testFoo()){
        // Relying on jQuery's html() method
        this.html() = this.fooTemplate();
      }
    }
  };

  // Boiler plate plugin from http://docs.jquery.com/Plugins/Authoring
  $.fn.myPlugin = function( method ) {
    // Method calling logic
    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 );

最后，似乎我不能直接将私有方法烘焙到插件中，因为像“testFoo（）”这样的方法会返回一个布尔值，因此不能链接。

思考？我是以正确的方式接近这个吗？我应该使用另一种设计模式吗？也许根本不使用jQuery插件架构？

Answer 1

这是一个建议的解决方案。它结合了几种不同的方法（John Resig的继承模型和Alex Saxton的插件继承模型）。

定义您的可继承插件：

(function ($) {

    My.Plugin = Class.extend({

        /*
        * Initialization (constructor)
        */
        init: function (element, meta) {
            var $meta = $.extend({ name: "pluginName" }, meta);

            // Call the base constructor
            this._super(element, $meta);

            // TODO: Add custom initialization code like the following:
            // this._testButton = $('.testButton', element).get(0);
        },


        /*
        * Public methods
        */

        show: function() {
             alert('This is a public method');

        },


        /*
        * Private methods
        */

        // DEMO: Overriding the base _paint method:
        _paint: function () {

            // "this._super()" is available in all overridden methods
            // and refers to the base method.
            this._super();

            alert('TODO: implement myPlugin._paint!');
        }


    });


    // Declare this class as a jQuery plugin
    $.plugin('my_plugin', My.Plugin);


})(jQuery);

定义基类

(function () {
    var initializing = false, fnTest = /xyz/.test(function () { xyz; }) ? /\b_super\b/ : /.*/;
    // The base Class implementation (does nothing)
    this.Class = function () { };

    // Create a new Class that inherits from this class
    Class.extend = function (prop) {
        var _super = this.prototype;

        // Instantiate a base class (but only create the instance,
        // don't run the init constructor)
        initializing = true;
        var prototype = new this();
        initializing = false;


        // Copy the properties over onto the new prototype
        for (var name in prop) {
            // Check if we're overwriting an existing function
            prototype[name] =
                   typeof prop[name] == "function"
                && typeof _super[name] == "function"
                && fnTest.test(prop[name])
                    ? (function (name, fn) {
                        return function () {
                            var tmp = this._super;

                            // Add a new ._super() method that is the same method
                            // but on the super-class
                            this._super = _super[name];

                            // The method only need to be bound temporarily, so we
                            // remove it when we're done executing
                            var ret = fn.apply(this, arguments);
                            this._super = tmp;

                            return ret;
                        };
                    })(name, prop[name])
                    : prop[name];
        }

        // The dummy class constructor
        function Class() {
            // All construction is actually done in the init method
            if (!initializing && this.init)
                this.init.apply(this, arguments);
        }

        // Populate our constructed prototype object
        Class.prototype = prototype;

        // Enforce the constructor to be what we expect
        Class.constructor = Class;

        // And make this class extendable
        Class.extend = arguments.callee;

        return Class;
    };
})();

插件创建

(function ($) {

    //  The "inheritance plugin" model
    //  [http://alexsexton.com/?p=51][1]

    $.plugin = function (name, object) {
        $.fn[name] = function (options) {
            var instance = $.data(this, name, new object(this, options));
            return instance;
        };
    };
})(jQuery);

从javascript调用您的插件：

$('#someElem').my_plugin({options: {}, data: {} /* you can modify your plugin code to accept anything */}).show();

注意：

此处的私有方法标记为_methodName。这是纯粹的惯例。如果你真的想要隐藏它们，你可以使用模块模式（google for it或者这里是初学者：http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth）

这是你要找的吗？

将类附加到jQuery对象

1 个答案: