Patrón de diseño de complementos de Javascript como jQuery

Question

¿Podría alguien escribir un ejemplo básico muy simple en javascript para conceptualizar (y con suerte hacerme entender) cómo se hace el patrón de diseño del complemento jQuery y cómo funciona?

No me interesa cómo crear el plugin para jQuery (entonces no hay código jQuery aquí en absoluto). Me interesa una explicación simple (tal vez con un poco de código Javascript) para explicar cómo se hace el concepto de complemento.

Por favor, no me respondas para ir y leer el código jQuery, lo intenté, pero es demasiado complejo, de lo contrario no habría puesto una pregunta aquí.

Gracias!

Answer 1

Funciona, como muchos otros frameworks js, usando la orientación del prototipo de javascript.

Por ejemplo, puede declarar una función simple

var alertHelloWorld = function() { 
    alert('hello world'); 
} 

Y luego atarlo a un objeto existente (incluyendo nodos DOM)

document.doMyAlert = alertHelloWorld; 

Si hace esto

document.doMyAlert(); 

La función alertHelloWorld se ejecutará

Puede leer más sobre Javascript objeto de prototipos here

Answer 2

jQuery tiene una biblioteca de funciones almacenadas en un objeto interno llamado fn. Estos son los que puede invocar en cada objeto jQuery.

Cuando hace $("div.someClass") obtiene un objeto jQuery que contiene todos los elementos <div> de esa clase. Ahora puede hacer $("div.someClass").each(someFunction) para aplicar someFunction a cada uno de ellos. Esto significa que each() es una de las funciones almacenadas en fn (una incorporada en este caso).

Si amplía (agrega) el objeto interno fn, automáticamente habilita su función personalizada con la misma sintaxis. Supongamos que tiene una función que registra todos los elementos en la consola, llamada log(). Puede agregar esta función al $.fn, y luego usarla como $("div.someClass").log().

Cada función anexa al objeto fn serán llamados de una manera tal que dentro del cuerpo de la función, la palabra clave this apuntará al objeto jQuery que ha utilizado.

La práctica común es devolver this al final de la función personalizada, para que el método de encadenamiento no se rompa: $("div.someClass").log().each(someFunction).

Hay varias formas de agregar funciones al objeto $.fn, algunas más seguras que otras. Una muy segura es hacer:

jQuery.fn.extend({ 
    foo: function() { 
    this.each(function() { console.log(this.tagName); }); 
    return this; 
    } 
}) 

Answer 3

Tomalak ya ha publicado casi todo lo que necesita saber.

Hay una última cosa que ayuda a jQuery a hacer el truco con la palabra clave .

se amethod llama aplican()

var somefunction=function(){ 
alert(this.text); 
} 
var anObject={text:"hello"}; 

somefunction.apply(anObject); 
//alert "hello" will happen 

Realmente ayuda en la creación de abstracciones de modo que el marco/usuarios de plugin simplemente usaría este como la intuición les dice, todo lo que hay dentro de su código