1. Pon todo tu código dentro de un cierre (closure)

Esta es la que más uso. Pero a veces los métodos fuera del cierre no se pueden llamar.

Sin embargo, el código de tu plugin solo sirve para tu propio plugin, por lo que este problema no existe. Puedes poner todo el código dentro del cierre. Y los métodos probablemente deberían colocarse dentro de los métodos Prototype.

(function($)  {
    //code here
})(jQuery);

2. Proporciona opciones predeterminadas para el plugin

Tu plugin debería tener algunas opciones que los desarrolladores puedan configurar, por lo que es necesario proporcionar la restauración de las opciones predeterminadas. Puedes configurar estas opciones mediante la función extend de jQuery:

var defaultSettings = {      mode            : 'Pencil',
lineWidthMin    : '0',
lineWidthMax    : '10',
lineWidth       : '2' };
settings = $.extend({}, defaultSettings, settings || {});

3. Devuelve un elemento

JavaScript/jQuery tienen una buena característica: se puede realizar la cascada de métodos, por lo que no debemos romper esta característica y siempre devolver un elemento en el método. Sigo esto en cada uno de mis plugins de jQuery.

$.fn.wPaint = function(settings)  {
    return this.each(function()  {
    var elem = $(this);
    //run some code here
    }
}

4. Coloca el código de una sola ejecución fuera del bucle principal

Este punto es muy importante, pero a menudo se pasa por alto. En pocas palabras, si tienes un fragmento de código con un montón de valores predeterminados que solo necesita ser instanciado una vez, en lugar de instanciarlo cada vez que se llama a la funcionalidad de tu plugin, deberías colocarlo fuera de los métodos del plugin. Esto hará que tu plugin se ejecute de manera más eficiente y ahorre memoria.

var defaultSettings = {
    mode            : 'Pencil',
    lineWidthMin    : '0',
    lineWidthMax    : '10',
    lineWidth       : '2' };
    settings = $.extend({}, defaultSettings, settings || {});

    $.fn.wPaint = function(settings)  {
    return this.each(function()  {
        var elem = $(this);
        //run some code here
    }
}

Puedes notar que "defaultSettings" en el código anterior está completamente fuera de los métodos del plugin. Como este código está dentro del cierre, no tenemos que preocuparnos de que estas variables sean sobrescritas.

5. ¿Por qué configurar Class Prototyping?

Como la carne y la sangre de tu código, los métodos y funciones deberían colocarse dentro de la función prototype. Hay dos razones:

• Puede ahorrar mucha memoria, porque no es necesario crear repetidamente estos métodos.
• Referenciar un método existente es mucho más rápido que volver a crear uno.

En pocas palabras, prototype extiende un objeto y le proporciona métodos, sin tener que instanciar estos métodos en cada objeto. Esto también hace que tu código sea más organizado y eficiente. Una vez que te acostumbres a esta forma de desarrollo, descubrirás que te ahorra mucho tiempo en tus proyectos futuros.

6. Cómo configurar Class Prototyping

Configurar un método prototype tiene dos partes. Primero necesitamos crear nuestra definición de clase inicial; en la mayoría de los casos esto significa crear un objeto. Esta definición contiene las partes que son diferentes para cada instancia del objeto. En mi plugin Paint jQuery Plugin, lo escribo así:

function Canvas(settings)  {
    this.settings = settings;
    this.draw = false;
    this.canvas = null;
    this.ctx = null;
    return this;  
}

A continuación, agregamos los métodos globales:

Canvas.prototype =  {
    generate: function() {
    //generate code
    }
}

7. Usa el objeto "this"

Al usar "$this", podemos pasar la referencia correcta a otros cierres. También podemos necesitar pasar la referencia $this a otros métodos. Ten en cuenta que el nombre $this se puede cambiar; cualquier nombre de variable es válido.

Canvas.prototype =  {
    generate: function()   {
        //some code
        var $this = this;
        var buton = //...some code
        button.click(function(){
        //using this will not be found since it has it's own this
        //use $this instead.
        $this.someFunc($this);
        });
    },

    someFunc: function($this)      {
    //won't know what "this" is.
    //use $this instead passed from the click event
    }
}

8. Guarda la configuración en cada objeto

Siempre guardo la configuración en cada objeto y luego opero sobre su propia configuración. De esta manera no tienes que pasar muchos parámetros entre diferentes métodos. Al poner estas variables en el objeto, también es conveniente para llamarlas en otros lugares.

function Canvas(settings)  {
    this.settings = settings;
    return this;
}

9. Separa la lógica de tus métodos Prototype

Este puede ser un principio básico. Cuando dudes si necesitas proporcionar un método, puedes preguntarte: "Si otra persona quisiera reescribir este método, ¿tu código satisfaría sus necesidades?" o "¿Qué tan difícil sería para otra persona escribir este método?". Por supuesto, es una cuestión de equilibrio de flexibilidad. Aquí enumero los métodos de mi Color Picker jQuery Plugin, para que puedas consultarlos:

generate()
appendColors()
colorSelect()
colorHoverOn()
colorHoverOff()
appendToElement()
showPalette()
hidePalette()

10. Proporciona opciones Setter/Getter

Este punto no es obligatorio, pero he descubierto que todos mis plugins lo utilizan. Porque solo requiere un poco de código y puede proporcionar a otros una funcionalidad que podrían necesitar.

Básicamente, solo tenemos que permitir que los desarrolladores puedan establecer u obtener los valores que ya existen en el elemento:

var lineWidth = $("#container").wPaint("lineWidth");  $("#container").wPaint("lineWidth", "5");