javascript - instalar - jquery slim

adjuntando una clase a un objeto jQuery

Question

Estoy luchando con la mejor manera de combinar las clases de JavaScript y los complementos de jQuery. Esta pregunta no es muy específica, lo que estoy esperando es punteros a más recursos.

Básicamente, quiero almacenar datos de estado y métodos privados en una clase, y luego extender cada objeto jQuery al que llamo mi complemento para tener esos métodos y propiedades privados. Tal que dentro del complemento puedo llamar a métodos directamente desde el objeto jQuery.

Leo el patrón de diseño de jQuery plugin (¿práctica común?) Para tratar con funciones privadas , específicamente la respuesta de David, sin embargo, esto inicializa una nueva Clase cada vez, y por lo tanto no puede usarse para guardar el estado del objeto.

También encontré http://fuelyourcoding.com/jquery-plugin-design-patterns-part-i/ , que recomienda crear una clase y luego almacenarla en .data ().

Creo que idealmente, con lo que quiero terminar es con un código que se parece a

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

Finalmente, no parece que pueda hornear los métodos privados en el complemento directamente porque los métodos como "testFoo ()" devolverán un booleano, y por lo tanto no son encadenables.

¿Pensamientos? ¿Me estoy acercando a esto de la manera correcta? ¿Hay algún otro patrón de diseño que debería usar? ¿Quizás no usar la arquitectura del complemento jQuery?

Answer 1

Aquí hay una solución propuesta. Combina algunos enfoques diferentes (el modelo de herencia de John Resig y el modelo de herencia de complementos de Alex Saxton).

Defina su plugin heredable:

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

Definir clase Base

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

Creación de plugins

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

Llamar a tu complemento desde javascript:

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

Nota:

Los métodos privados aquí están marcados como _methodName. Es pura convención. Si realmente desea ocultarlos, puede usar el patrón del módulo (google para él o aquí hay uno para empezar: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth )

Es esto lo que estás buscando?