Share
Lors de l'écriture d'un plug-in jQuery, la même routine de prévention des conflits que celle utilisée avec l'ancien code jQuery classique doit être implémentée. Dans cet esprit, tous les plugins doivent être contenus dans un champ privé où les $ alias peut être utilisé sans crainte de conflits ni de résultats surprenants.
La structure de codage ci-dessous devrait sembler familière car elle est utilisée dans presque tous les exemples de code de cette session..
De nouveaux plugins sont attachés à la jQuery.fn objet, car il s'agit d'un raccourci ou d'un alias pour jQuery.prototype. Dans notre exemple de codage ci-dessous, nous ajoutons le plugin count à la jQuery.fn objet. Ce faisant, nous créons notre propre méthode jQuery personnalisée pouvant être utilisée sur un ensemble encapsulé d’éléments DOM..
Fondamentalement, un plugin attaché à jQuery.fn nous permet de créer nos propres méthodes personnalisées similaires à celles trouvées dans l'API. En effet, lorsque nous attachons notre fonction de plug-in à jQuery.fn, notre fonction est incluse dans la chaîne de prototypes-$ .fn.count = function () -pour les objets jQuery créés à l'aide de la fonction jQuery. Si cela vous souffle l'esprit, rappelez-vous simplement que l'ajout d'une fonction à jQuery.fn signifie que le mot clé ce à l'intérieur de la fonction plugin fera référence à l'objet jQuery lui-même.
Remarques: En ajoutant un plugin à la jQuery.fn objet, nous disons essentiellement que notre plugin aimerait utiliser la fonction jQuery pour sélectionner un contexte (éléments DOM). Si votre plugin ne nécessite pas de contexte spécifique (en d’autres termes, un ensemble d’éléments DOM) dans lequel il doit fonctionner, vous n’aurez peut-être pas besoin de joindre ce plugin au. $ .fn. Il serait peut-être plus logique de l'ajouter en tant que fonction utilitaire dans l'espace de noms jQuery..
Accentsconagua
ce Est une référence à l'objet jQuery actuelLorsque vous attachez un plugin à la jQuery.fn objet, le mot clé ce utilisé à l'intérieur de la fonction de plug-in attachée fera référence à l'objet jQuery actuel.
Il est essentiel que vous décriviez exactement le mot clé ce se réfère à la fonction plugin.
ce Mot-cléEn utilisant chaque(), nous pouvons créer une itération implicite pour notre plugin. Cela signifie que si le groupe d'encapsuleurs contient plusieurs éléments, notre méthode de plug-in sera appliquée à chaque élément du groupe d'encapsuleurs..
Pour ce faire, nous utilisons l'utilitaire jQuery chaque() function, qui est un itérateur générique à la fois pour les objets et les tableaux, simplifiant essentiellement les boucles. Dans l'exemple de code ci-dessous, nous utilisons la fonction pour parcourir l'objet jQuery lui-même. À l'intérieur de la fonction transmise à chaque(), le mot clé ce fera référence aux éléments du jeu d'encapsuleurs jQuery.
En utilisant le chaque() la fonction est essentielle si vous souhaitez qu'un plugin utilise une itération implicite.
En règle générale, la plupart des plug-ins renvoient l'objet jQuery lui-même afin qu'il ne casse pas la chaîne. En d'autres termes, si un plug-in n'a pas spécifiquement besoin de renvoyer une valeur, il doit poursuivre la chaîne afin que des méthodes supplémentaires puissent être appliquées au groupe d'encapsuleurs. Dans le code ci-dessous, nous retournons l’objet jQuery avec le retournez ceci; déclaration afin que l'enchaînement ne soit pas cassé. Notez que je suis enchaîné sur le parent() et ajouter() méthodes après que j'appelle le compter() brancher.
Remarques: Il est possible de transformer le plugin en une méthode destructive en ne renvoyant simplement pas l'objet jQuery.
Les plugins contiennent généralement des options par défaut qui serviront de configuration par défaut pour la logique des plugins. Ces options sont utilisées lorsque le plug-in est appelé. Dans le code ci-dessous, je crée un options par défaut objet contenant une seule propriété (startCount) et valeur (0). Cet objet est stocké dans la fonction de comptage $ .fn.count.defaultOptions. Nous faisons cela pour que les options soient configurables de l'extérieur du plugin.
En règle générale, les options de plug-in par défaut peuvent être remplacées par des options personnalisées. Dans le code ci-dessous, je passe dans un options personnalisées objet en tant que paramètre de la fonction plugin. Cet objet est combiné avec le options par défaut objet pour créer un single options objet. Nous utilisons la méthode de l'utilitaire jQuery étendre() pour combiner plusieurs objets en un seul objet. le étendre() Cette méthode fournit l’utilitaire idéal pour écraser un objet avec de nouvelles propriétés. Avec ce code en place, le plugin peut maintenant être personnalisé lorsqu'il est appelé. Dans l'exemple, nous passons le compter plug-in un nombre personnalisé (500) à utiliser comme point de départ du décompte. Cette option personnalisée remplace l'option par défaut (0).
Les options par défaut étant accessibles de l'extérieur d'un plug-in, il est possible de les réinitialiser avant d'appeler le plug-in. Cela peut être pratique lorsque vous souhaitez définir vos propres options sans modifier le code du plugin lui-même. Cela peut simplifier les invocations de plug-in, car vous pouvez, en un sens, configurer globalement le plug-in à votre guise sans avoir à copier le code du plug-in d'origine..
En fonction de la nature du plug-in, il peut être essentiel d'appeler un plug-in à la fois normalement (via des éléments et événements DOM) et par programme. Considérons un plugin de dialogue. Il y aura des fois que la boîte de dialogue modale / s'ouvrira en fonction d'événements utilisateur. D'autres fois, une boîte de dialogue devra s'ouvrir en fonction d'événements environnementaux ou système. Dans ces situations, vous pouvez toujours invoquer votre plug-in sans aucun élément dans le DOM en créant un élément à la volée afin d'appeler le plug-in. Dans le code ci-dessous, j'invoque le dialogue() plugin sur le chargement de page en créant d'abord un élément pour invoquer mon plugin.
dialogue, dites salut dialogue, dites au revoir
De toute évidence, ce modèle pourrait varier considérablement en fonction des options, de la complexité et des fonctionnalités du plug-in. Le point ici est que les plugins peuvent être appelés via des éléments DOM existants, ainsi que ceux créés à la volée.
Lors de la création de plugins jQuery, il est judicieux de fournir des fonctions de rappel en option et de transmettre à ces fonctions le contexte de ce lorsque le rappel est appelé. Cela fournit un moyen de traitement supplémentaire aux éléments d'un ensemble d'emballage. Dans le code ci-dessous, nous passons une option personnalisée au outAndInFade () méthode de plug-in qui est une fonction et doit être appelée une fois l'animation terminée. La fonction de rappel reçoit la valeur de ce quand il est invoqué. Cela nous permet d’utiliser ensuite le ce valeur à l'intérieur de la fonction que nous avons définie. Lorsque la fonction de rappel est appelée, le mot-clé this fera référence à l'un des éléments DOM contenus dans le groupe d'encapsidation..
Dehors et en fonduDehors et en fondu
