plug-in Javascript design pattern come jQuery

Question

Qualcuno potrebbe scrivere un semplice esempio di base in javascript per concettualizzare (e spero di farmi capire) come è fatto il pattern di progettazione del plugin jQuery e come funziona?

Io non sono interessato a come la creazione di plug-in per jQuery (in modo nessun codice jQuery qui a tutti). Mi interessa una spiegazione semplice (magari con un po 'di codice Javascript) per spiegare come è stato realizzato il concetto di plugin.

Plz non mi risponde per andare a leggere il codice jQuery, ho provato, ma io è troppo complesso, altrimenti non avrei posto una domanda qui.

Grazie!

Answer 1

Funziona, come molti altri framework js, utilizzando l'orientamento prototipo javascript.

Per esempio si può dichiarare una semplice funzione

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

E poi legarlo a un oggetto esistente (inclusi i nodi DOM)

document.doMyAlert = alertHelloWorld; 

Se si esegue questa operazione

document.doMyAlert(); 

La funzione alertHelloWorld verrà eseguita

Si può leggere di più su JavaScript Object prototipazione here

Answer 2

jQuery ha una libreria di funzioni memorizzate in un oggetto interno chiamato fn. Questi sono quelli che puoi chiamare su ogni oggetto jQuery.

Quando si esegue $("div.someClass") si ottiene un oggetto jQuery contenente tutti gli elementi <div> di quella classe. Ora puoi fare $("div.someClass").each(someFunction) per applicare someFunction a ciascuno di essi. Ciò significa che each() è una delle funzioni memorizzate in fn (uno integrato in questo caso).

Se si estende (aggiungere) il fn oggetto interno, allora si rendono automaticamente disponibile la funzione personalizzata per la stessa sintassi. Supponiamo che tu abbia una funzione che registra tutti gli elementi nella console, chiamata log(). È possibile aggiungere questa funzione a $.fn e quindi utilizzarla come $("div.someClass").log().

Ogni funzione aggiunto all'oggetto fn sarà chiamato in modo tale che all'interno del corpo della funzione, la parola chiave this punterà l'oggetto jQuery che hai usato.

È prassi comune restituire this alla fine della funzione personalizzata, in modo che il concatenamento del metodo non si interrompa: $("div.someClass").log().each(someFunction).

Esistono diversi modi per aggiungere funzioni all'oggetto $.fn, alcune più sicure di altre. Uno è piuttosto sicuro:

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

Answer 3

Tomalak ha già pubblicato quasi tutto ciò che è necessario sapere.

C'è un'ultima cosa che aiuta jQuery a fare il trucco con la parola chiave .

è amethod chiama applicano()

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

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

Aiuta davvero a creare astrazioni in modo tale quadro/utenti di plugin sarebbe solo utilizzare questo come intuizione dice loro, quello che c'è dentro il vostro codice