¿Cuál es la práctica correcta del complemento jQuery?

Question

No tenga miedo de utilizar cualquier jerga técnica o explicaciones de bajo nivel para las cosas, por favor. Soy bastante inteligente con la arquitectura informática y los lenguajes de programación de bajo nivel para comprender cualquier optimización o técnica de gestión de memoria, así como estructuras complejas (clases, variables miembro, etc.)

Mi foco principal de código está basado en la web aplicaciones. Trabajo mucho con PHP y he estado aprendiendo CSS rápidamente. Javascript es actualmente mi cuello de botella, sin embargo. Sé lo suficiente Javascript para hacer casi cualquier cosa sin marcos (manipulación DOM, consultas AJAX, etc.). También sé que puedo hacer que mi código se ejecute más rápido, optimizarlo para casos específicos, y puedo reducir el tamaño total de mi código (sin incluir script externo) codificando todo manualmente. Sin embargo, para facilitar la lectura de otros programadores y para la velocidad de codificación, intento aprender al menos un framework de Javascript.

Después de leer toda la documentación sobre varios frameworks y consultar algunos tutoriales, prefiero jQuery. Permitió un código iterativo muy poderoso en una sola línea y tenía una posibilidad muy pequeña de colisión de espacios de nombres variables globales. Por lo que pude decir, la ÚNICA variable global declarada es la variable $ y todo lo demás sucede dentro de este espacio de nombres, e incluso hubo formas de acceder al espacio de nombres sin esta variable si quería tener dos marcos uno al lado del otro. También tenía un archivo muy pequeño para incluir (24 kilobytes gzipped) lo que significa menos carga del servidor.

Mi pregunta es ¿cuáles son las buenas prácticas para crear un plugin jQuery? Si tuviera que comenzar a codificar sitios web en jQuery, ¿cómo debería hacerlo para obtener la mejor interoperabilidad y diseño? Quiero asegurarme de que mi código pueda ejecutarse junto a cualquier otro jQuery sin interferencias, es posible crear complementos fuera de mi código y minimizar el uso del espacio de nombres jQuery para no robar variables que puedan ser utilizadas por otro guión.

Answer 1

Leer el jQuery plugin authoring suggestions, también mira the unminified jQuery. Observe la última línea: window.jQuery = window.$ = jQuery; Así que hay dos variables globaleswindow.jQuery y window.$. Para profundizar en este tema un poco más, leer más acerca de la documentación sobre using jQuery with other libraries y jQuery.noConflict():

// Trigger no conflict mode. 
$.noConflict(); 
    // Code that uses other library's $ can follow here. 

Para escribir plugins, asegúrese de prestar especial atención a la sección llamada Maintaining Chainability (desde jQuery hace uso de chainable tan bien). Debe devolver explícitamente this en sus complementos para mantener la capacidad de recuperación. Además, hablando de chocar con otras variables, asegúrese de detener su plugin de chocar con otro tipo de código mediante el uso de un cierre:

// Use a closure so you can use the dollar sign in your plugin, 
    // but you don't clash with other uses of the dollar sign in the script 
    // around where you define your plugin (other libraries, etc.) 
(function($){ 

    // Adding your plugin to jQuery 
    $.fn.yourPlugin = function() { 

     // Maintain chainability 
    return this.each(function() { 

     // ... 

    }); 

    }; 
}(jQuery)); 

Hay un montón de otra gran información en esa página plug-in de creación. Lo anterior es solo lo básico. Hay información sobre valores predeterminados y opciones, espacios de nombres y muchas otras cosas.

Además, si le preocupan las variables que entran en conflicto, también puede hacer uso de cierres para su propio código "normal" ... no solo los complementos jQuery.Para ello, incluya la secuencia de comandos en un self invoking anonymous function:

(function() { 
    var ... // these vars will not clash with 
      // anything outside this anonymous function 

    // You can do your jQuery in here if you need to access 
    // the local vars: 
    $(function() { ... }); 

}()); 

Por ejemplo:

// global 'clash' 
var clash = "test"; 

(function() { 
    // local 'clash' 
    var clash = "something else"; 
    // this 'clash' shadows but doesn't change the global 'clash' 
}()); 

alert(clash); 
// The global 'clash' has stayed unaffected by the local `clash` 
// Output: test 

jsFiddle example

Answer 2

Puede agregar métodos de plugins sin utilizar el método extend:

jQuery.fn.myPlugin = function(opts) { ... } 

Puede utilizar la extiendes: si usted está buscando para ampliar el objeto jQuery con múltiples funciones puede hacer:

jQuery.extend({ 
    funcName: function(){ 
     //function code 
    }, 
    funcName2: function(){ 
     //function code 
    } 
}); 

"jQuery.extend añade un conjunto de propiedades al objeto jQuery. jQuery.fn.extend agrega un conjunto de propiedades al objeto jQuery.fn (que es entonces accesible a través de $(). Foo)."

jQuery.fn es un atajo para jQuery.prototype.

la documentación oficial sobre los plugins: http://docs.jquery.com/Plugins/Authoring

Mike Alsup tiene esta buena discusión tutorial/patrón: http://www.learningjquery.com/2007/10/a-plugin-development-pattern

EDIT: una nota aparte, tenga cuidado de sus nombres con el uso de mataderos/minimizers - prueba en la de su elección en este sentido.