design pattern plugins Javascript comme jQuery

Question

Quelqu'un pourrait-il écrire un exemple de base très simple javascript pour conceptualiser (et je l'espère me faire comprendre) comment le modèle de conception du plugin jQuery est fait et comment cela fonctionne?

Je ne suis pas intéressé par la façon dont la création de plugin pour jQuery (donc pas de code jQuery ici du tout). Je suis intéressé par une explication simple (peut-être avec un peu de code Javascript) pour expliquer comment il est fait le concept de plug-in.

Plz ne me répond d'aller lire le code jQuery, j'ai essayé, mais je c'est trop complexe, sinon je l'aurais pas poser une question ici.

Merci!

Answer 1

Il fonctionne, comme beaucoup d'autres cadres js, en utilisant javascript orientation prototype.

Par exemple, vous pouvez déclarer une simple fonction

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

Et puis l'attacher à un objet existant (y compris les noeuds DOM)

document.doMyAlert = alertHelloWorld; 

Si vous le faites

document.doMyAlert(); 

la fonction alertHelloWorld sera exécutée

Vous pouvez en savoir plus sur javascript objet prototypage here

Answer 2

jQuery possède une bibliothèque de fonctions stockées dans un objet interne nommé fn. Ce sont ceux que vous pouvez appeler sur chaque objet jQuery.

Lorsque vous faites $("div.someClass") vous obtenez un objet jQuery contenant tous les éléments <div> de cette classe. Maintenant vous pouvez faire $("div.someClass").each(someFunction) pour appliquer someFunction à chacun d'entre eux. Cela signifie que each() est l'une des fonctions stockées dans fn (a intégré une dans ce cas).

Si vous étendez (ajoutez à) l'objet interne fn, vous rendez automatiquement disponible votre fonction personnalisée à la même syntaxe. Supposons que vous avez une fonction qui enregistre tous les éléments sur la console, appelée log(). Vous pouvez ajouter cette fonction à $.fn, puis l'utiliser en tant que $("div.someClass").log().

Chaque fonction jointe à l'objet fn sera appelé de telle sorte que l'intérieur le corps de la fonction, le mot-clé this pointera vers l'objet jQuery que vous avez utilisé.

La pratique courante consiste à renvoyer this à la fin de la fonction personnalisée, afin que le chaînage de méthode ne se casse pas: $("div.someClass").log().each(someFunction).

Il existe plusieurs façons d'ajouter des fonctions à l'objet $.fn, certaines étant plus sûres que d'autres. Un assez sûr est de faire:

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

Answer 3

Tomalak déjà posté presque tout ce que vous devez savoir.

Il ya une dernière chose qui aide jQuery à faire le tour avec le ce mot-clé.

il est aMethod appelé appliquer()

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

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

Il aide vraiment à créer des abstractions afin que cadre/utilisateurs du plugin serait tout simplement utiliser cette comme l'intuition leur dit, tout ce qu'il y a à l'intérieur Votre code