¿Una plantilla para un plugin jQuery con opciones y methods accesibles?

Deseo build un complemento con methods y opciones accesibles, esto para un complemento complejo. Necesito que los methods sean accesibles fuera del complemento porque si alguien anuncia algo al DOM, debe actualizarse (por lo que no es necesario ejecutar el complemento completo de nuevo).

He visto en el pasado que hay plugins que lo hacen así, pero no puedo encontrarlos, así que no puedo echarles un vistazo. Todavía soy nuevo en JavaScript, así que cualquier ayuda sería agradable.

Sería bueno si todavía podemos anular globalmente las opciones.

Cómo quiero usar el plugin:

// options $('#someid').myplugin({name: 'hello world'}); // methods(would be nice if we can use this) $('#someid').myplugin('update'); 

// mi vieja envoltura de plugin

 ;(function($, window, document, undefined){ $.fn.pluginmyPlugin = function(options) { options = $.extend({}, $.fn.pluginmyPlugin.options, options); return this.each(function() { var obj = $(this); // the code }); }; /** * Default settings(dont change). * You can globally override these options * by using $.fn.pluginName.key = 'value'; **/ $.fn.pluginmyPlugin.options = { name: '', ... }; })(jQuery, window, document); 

Actualizar

Entonces, después de mirar los documentos de jQuery, he comstackdo el siguiente código, por favor avíseme si hay algún problema con el código, si puede ser mejor.

 ;(function($, window, document, undefined){ var methods = { init : function( options ) { options = $.extend({}, $.fn.pluginmyPlugin.options, options); return this.each(function(){ alert('yes i am the main code') }); }, update : function( ) { alert('updated') } }; $.fn.pluginmyPlugin = 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 this plugin' ); } }; /** * Default settings(dont change). * You can globally override these options * by using $.fn.pluginName.key = 'value'; **/ $.fn.pluginmyPlugin.options = { name: 'john doe', //.... }; })(jQuery, window, document); 

3 Solutions collect form web for “¿Una plantilla para un plugin jQuery con opciones y methods accesibles?”

Una alternativa:

 var Plugin = function($self, options) { this.$self = $self; this.options = $.extend({}, $.fn.plugin.defaults, options); }; Plugin.prototype.display = function(){ console.debug("Plugin.display"); }; Plugin.prototype.update = function() { console.debug("Plugin.update"); }; $.fn.plugin = function(option) { var options = typeof option == "object" && option; return this.each(function() { var $this = $(this); var $plugin = $this.data("plugin"); if(!$plugin) { $plugin = new Plugin($this, options); $this.data("plugin", $plugin); } if (typeof option == 'string') { $plugin[option](); } else { $plugin.display(); } }); }; $.fn.plugin.defaults = { propname: "propdefault" }; 

Uso:

 $("span").plugin({ propname: "propvalue" }); 

 $("span").plugin("update"); 

Esto se parece absurdamente a la plantilla de JavaScript de Twitter Bootstrap . Pero, no estaba tomando completamente desde allí. Tengo un largo historial de uso de .data() .

No te olvides de envolverlo apropiadamente.

Si quieres usar el plugin así:

 // Init plugin $('a').myplugin({ color: 'blue' }); // Call the changeBG method $('a').myplugin('changeBG') // chaining .each(function () { // call the get method href() console.log( $(this).myplugin('href') ); }); 

o si necesita instancia de complemento independiente por elemento:

 $('a').each(function () { $(this).myplugin(); }); 

querrás configurar tu plugin así:

 /* * Project: * Description: * Author: * License: */ // the semi-colon before function invocation is a safety net against concatenated // scripts and/or other plugins which may not be closed properly. ;(function ( $, window, document, undefined ) { // undefined is used here as the undefined global variable in ECMAScript 3 is // mutable (ie. it can be changed by someone else). undefined isn't really being // passed in so we can ensure the value of it is truly undefined. In ES5, undefined // can no longer be modified. // window is passed through as local variable rather than global // as this (slightly) quickens the resolution process and can be more efficiently // minified (especially when both are regularly referenced in your plugin). var pluginName = "myplugin", // the name of using in .data() dataPlugin = "plugin_" + pluginName, // default options defaults = { color: "black" }; function privateMethod () { console.log("private method"); } // The actual plugin constructor function Plugin() { /* * Plugin instantiation * * You already can access element here * using this.element */ this.options = $.extend( {}, defaults ); } Plugin.prototype = { init: function ( options ) { // extend options ( http://api.jquery.com/jQuery.extend/ ) $.extend( this.options, options ); /* * Place initialization logic here */ this.element.css( 'color', 'networking' ); }, destroy: function () { // unset Plugin data instance this.element.data( dataPlugin, null ); }, // public get method href: function () { return this.element.attr( 'href' ); }, // public chaining method changeBG: function ( color = null ) { color = color || this.options['color']; return this.element.each(function () { // .css() doesn't need .each(), here just for example $(this).css( 'background', color ); }); } } /* * Plugin wrapper, preventing against multiple instantiations and * allowing any public function to be called via the jQuery plugin, * eg $(element).pluginName('functionName', arg1, arg2, ...) */ $.fn[pluginName] = function ( arg ) { var args, instance; // only allow the plugin to be instantiated once if (!( this.data( dataPlugin ) instanceof Plugin )) { // if no instance, create one this.data( dataPlugin, new Plugin( this ) ); } instance = this.data( dataPlugin ); /* * because this boilerplate support multiple elements * using same Plugin instance, so element should set here */ instance.element = this; // Is the first parameter an object (arg), or was omitted, // call Plugin.init( arg ) if (typeof arg === 'undefined' || typeof arg === 'object') { if ( typeof instance['init'] === 'function' ) { instance.init( arg ); } // checks that the requested public method exists } else if ( typeof arg === 'string' && typeof instance[arg] === 'function' ) { // copy arguments & remove function name args = Array.prototype.slice.call( arguments, 1 ); // call the method return instance[arg].apply( instance, args ); } else { $.error('Method ' + arg + ' does not exist on jQuery.' + pluginName); } }; }(jQuery, window, document)); 

Notas:

  • Esta repetición no usará .each () para cada llamada de método, debe usar .each () cuando lo necesite
  • Permitir el reinicio del plugin, pero solo se creará 1 instancia
  • Ejemplo de método de destrucción incluido

Ref: https://github.com/jquery-boilerplate/boilerplate/wiki/Another-extending-jQuery-boilerplate

¿Has probado la jQuery UI Widget Factory ?

Hubo un poco de una curva de aprendizaje, pero ahora me encanta, manejar las opciones, y los valores pnetworkingeterminados y los methods, mantiene todo muy ajustado 🙂


EDITAR

JQuery UI Widget Factory es un componente separado de la biblioteca jQuery UI que proporciona una forma sencilla y orientada a objects para crear complementos jQuery con estado.

– Introducción a Stateful Plugins y Widget Factory .

No creo que la sobrecarga adicional sea algo de lo que preocuparse en la mayoría de las circunstancias. En estos días escribo en letras de molde y todo está comstackdo, minificado y comprimido, por lo que algunas líneas adicionales aquí y allá no hacen mucha diferencia. Mi investigación sobre la velocidad del website parece indicar que el número de requestes HTTP es un gran problema, de hecho, el ex colega que me puso en esta pista funcionó para un juego basado en browser y tenía que ver con la velocidad de velocidad.

  • Las imágenes flotantes arruinan Bootstrap Scrollspy
  • Cómo get la 'altura' de la pantalla usando jquery
  • Diferencia del valor, prototipo y propiedad
  • ¿Cómo get una image del portapapeles en un clic del button?
  • Yii, copyndo un valor desplegable al menu desplegable oculto
  • encontrar todos los nombres de formulario en una página usando jquery o javascript
  • Jquery cambia la class CSS onclick
  • Dos funciones en clics de button
  • ¿Cómo manejan los browseres los attributes inválidos / no especificados en los elementos HTML?
  • La opción Seleccionar permanece seleccionada después de enviar / actualizar
  • Biblioteca JavaScript RightJS en uso diario
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.