Comment lier le plugin avec l'élément

Question

Je décide d'écrire un plugin, mais il y a un moment que je ne connais pas, et je ne peux pas trouver de documentation à ce sujet alors je décide de demander ici.

Par exemple, lorsque nous avons écrit

$("#some_element").nameOfPlugin(); 

Il y a beaucoup de fonctions dans nameOfPlugin, mais comment some_element se connecte avec le plug-in?

Un exemple, ou un lien vers une documentation sera très utile.

Merci.

Answer 1

nameOfPlugin est la méthode prototypique qui, lorsqu'elle est insérée avec l'élément script, étend jQuery pour que tous les objets jQuery puissent contenir la méthode.

Tout le code interne de nameOfPlugin se produit à l'intérieur de cette méthode prototypique et de la portée qui est définie.

Exemple simple de la façon dont vous étendez jQuery, en utilisant Human au lieu de jQuery.

function Human(){}; 
Human.prototype.attack = function() { alert('attack') }; 
var john = new Human; 
john.attack(); 

En ce qui concerne la connexion $() à elle, $() renvoie une matrice d'éléments DOM (un ou plusieurs). Le plugin est invoqué dans le contexte de chacun d'entre eux, puisque l'objet possède la méthode car c'est une instance du constructeur jQuery qui possède les méthodes de plugin que vous avez ajoutées.

$('body').hide() se traduit d'appeler la méthode jQuery.prototype.hide utilisant document.body la référence DOM, selon le contexte.

Je suggère de lire sur l'héritage prototypal pour le comprendre. Une bonne ressource serait Eloquent JS, en particulier chapter 8.

Answer 2

Dans le prototype jQuery, le mot-clé this représente les éléments sélectionnés.

p.ex:

$('#some_element').myPlugin(); 

$.fn.myPlugin = function() { 
    console.log(this); // this = #some_element (jQuery instance) 

    // looping through elements and returning the instance 
    // to allow further chaining: 
    return this.each(function() { 
    console.log(this) // this = #some_element (HTML element) 
    }); 
} 

Answer 3

je ne sais pas comment les documents de recherche à ce sujet

fait ma journée!

http://www.jquery.com

Il m'a fallu 5 secondes entières pour se rendre à http://docs.jquery.com/Plugins/Authoring par exemple.