Tutoriel de développement de plug-ins JavaScript (1)_compétences javascript

1, analyse d'ouverture

Salut à tous ! La série d'articles d'aujourd'hui parle principalement de la façon de développer des plug-ins basés sur "JavaScript". Je pense que beaucoup de gens connaissent le mot "plug-in",

.

Certaines personnes peuvent l'appeler « composant » ou « composant ». Ce n'est pas important. La clé est de savoir comment concevoir et comment procéder à une réflexion globale. C'est le concept clé de cet article. Je pense que tout le monde a raison

J'ai une certaine compréhension de la "méthode du plug-in jQuery". Discutons de ce sujet ensemble et donnons enfin des plans de mise en œuvre pertinents pour améliorer continuellement nos capacités.

Deuxièmement, entrez le sujet principal du plug-in

D'une manière générale, le développement de plug-ins jQuery est divisé en deux types : l'un est la fonction globale suspendue dans l'espace de noms jQuery, qui peut également être appelée méthode statique.

L'autre est la méthode au niveau de l'objet jQuery, c'est-à-dire la méthode suspendue sous le prototype jQuery, de sorte que l'instance d'objet jQuery obtenue via le sélecteur puisse également partager cette méthode.

(1), développement de plug-ins au niveau de la classe

La compréhension la plus directe du développement de plug-ins au niveau de la classe consiste à ajouter des méthodes de classe à la classe "jQuery", ce qui peut être compris comme l'ajout de méthodes statiques. Un exemple typique est la fonction "$.ajax()", qui définit la fonction dans l'espace de noms jQuery. Le développement de plug-ins au niveau de la classe peut être étendu sous les formes suivantes :

1.1 Ajoutez une fonction globale, il suffit de la définir comme suit, regardez le code :

Copier le code Le code est le suivant :

$.bonjour = fonction(){
alert("Bonjour, Gros Ours!") ;
} ;

1.2 Ajouter plusieurs fonctions globales, qui peuvent être définies comme suit :

Copier le code Le code est le suivant :

$.extend({
Bonjour : fonction(nom){
              // mettez votre code ici
} ,
monde : fonction(){
              // mettez votre code ici
>
}) ;

Description : "$.extend(target, [object1], [objectN])" (Cette méthode est principalement utilisée pour fusionner le contenu (propriétés) de deux objets ou plus dans le premier objet et renvoyer le premier objet fusionné. .

Si la méthode n'a qu'un seul paramètre cible, ce paramètre développera l'espace de noms jQuery, c'est-à-dire qu'il sera suspendu sous l'objet global jQuery en tant que méthode statique).

(2), développement de plug-ins au niveau objet

Le développement de plug-ins au niveau objet nécessite les deux formes suivantes :

2.1 Utilisez "$.fn.extend()" pour monter dynamiquement les attributs associés en tant que prototype.

Copier le code Le code est le suivant :

(fonction($){
$.fn.extend({
pluginName : function(opts){
                      // mettez votre code ici
                                                                            }) ;
})(jQuery) ;

　2.2 Ajoutez directement des propriétés dynamiques à la chaîne de prototypes.

Copier le code Le code est le suivant :

(fonction ($) {  

$.fn.pluginName = function(){
// mets ton code ici
} ;  
})(jQuery) ;

Expliquez : les deux sont équivalents. Pour un plug-in jQuery, une fonction de base peut bien fonctionner, mais pour un plug-in plus complexe, une variété de méthodes et de fonctions privées doivent être fournies.

Vous pouvez utiliser différents espaces de noms pour fournir diverses méthodes pour votre plug-in, mais l'ajout de trop d'espaces de noms rendra le code déroutant et moins robuste. La meilleure solution consiste donc à définir de manière appropriée les fonctions et méthodes privées.

Nous implémentons donc une unité de plug-in privée simulée grâce à une combinaison de fonctions et de fermetures auto-exécutables, tout comme dans notre exemple ci-dessus.

(3), voici un exemple simple pour voir le processus de mise en œuvre :

(1), fragment de code "html", comme suit :

Copier le code Le code est le suivant :

       style="margin-top:10px;
        margin-bottom:30px;"
>8

                                                 

(2), « data.json » est défini comme suit :

Copier le code Le code est le suivant :

​{
"text" : "Bonjour, Gros Ours {{bb}} ! 
}

(3), le code "bb.js" est le suivant :

Copier le code Le code est le suivant :

$(fonction(){
$("#bb").bigbear() ;
}) ;
(fonction($){
$.fn.bigbear = fonction (opts){
         opts = $.extend({},$.fn.bigbear.defaults,opts) ;
         renvoie this.each(function(){
            var elem = $(this) ;
              elem.find("span").text(opts["title"]) ;
               $.get(opts["url"],function(data){
                    elem.find("div").text(data["text"]) ;
             }) ;
         }) ;
} ;
$.fn.bigbear.defaults = {
Titre : "C'est un test simple" ,
 url : "data.json"
} ;
})(jQuery) ;

Effet d'opération :

Pour résumer :

(1) "$.fn.bigbear.defaults" fournit les options de paramètres par défaut du plug-in. Un plug-in avec une bonne évolutivité devrait permettre aux utilisateurs de personnaliser les options de paramètres en fonction des besoins et de contrôler le comportement du plug. -in, il offre donc la possibilité de restaurer les options par défaut nécessaires. Vous pouvez définir ces options via la méthode extend de jQuery.

　(2), "return this.each(){...}" traverse plusieurs éléments et renvoie jQuery à l'aide du moteur de sélection Sizzle Sizzle peut fournir des opérations multi-éléments pour votre fonction (par exemple, tous les noms de classe ont. les mêmes éléments). C’est l’une des rares fonctionnalités intéressantes de jQuery, et même si vous n’allez pas fournir de support multi-éléments pour votre plugin, c’est toujours un bon moyen de s’y préparer. De plus, jQuery a une très bonne fonctionnalité qui lui permet d'effectuer une mise en cascade de méthodes, qui peut également être appelée appel en chaîne, nous ne devons donc pas détruire cette fonctionnalité et toujours renvoyer un élément dans la méthode.

(4), résumé final

(1), jQuery propose deux méthodes pour développer des plug-ins, à savoir : jQuery.fn.extend(object); Ajouter des méthodes aux objets jQuery.
jQuery.extend(object); Pour étendre la classe jQuery elle-même.

(2), mettre tout le code dans une fermeture (une fonction d'exécution immédiate. A ce moment, la fermeture équivaut à une portée privée, les informations internes ne sont pas accessibles par l'extérieur, et il n'y aura pas de pollution). de variables globales. L'explication officielle des spécifications de création et de développement est la suivante : a) éviter les dépendances globales ; b) éviter les dommages causés par des tiers c) être compatible avec les opérateurs jQuery '$' et 'jQuery '.

(3) Fournir des options de paramètres par défaut pour le plug-in. Un plug-in avec une bonne évolutivité devrait permettre aux utilisateurs de personnaliser les options de paramètres en fonction de leurs besoins et de contrôler le comportement du plug-in, il est donc nécessaire de fournir une option de restauration par défaut. Vous pouvez définir ces options via la méthode d'extension de jQuery

　(4), parcourez plusieurs éléments et renvoyez jQuery pour utiliser le moteur de sélection Sizzle. Sizzle peut fournir des opérations multi-éléments pour votre fonction (par exemple, tous les éléments avec le même nom de classe). C'est l'une des rares fonctionnalités intéressantes de jQuery, et même si vous n'allez pas fournir de support multi-éléments pour votre plugin, c'est toujours une bonne pratique de s'y préparer lors du développement du plugin. De plus, jQuery a une très bonne fonctionnalité qui lui permet d'effectuer une mise en cascade de méthodes, qui peut également être appelée appel en chaîne, nous ne devons donc pas détruire cette fonctionnalité et toujours renvoyer un élément dans la méthode.

(5). Il est important de placer le code ponctuel en dehors de la boucle principale, mais il est souvent ignoré. En termes simples, si vous disposez d'un morceau de code qui contient un ensemble de valeurs par défaut et qui ne doit être instancié qu'une seule fois, plutôt qu'à chaque fois que votre fonction de plug-in est appelée, vous devez placer ce code en dehors de la méthode du plug-in. .

(6), après que tout le monde a étudié, réfléchissez-y. Si la sélection technologique du projet change et que ces plug-ins dépendent fortement du mécanisme "jQuery", les plug-ins que nous avons écrits auparavant ne pourront pas l'être. utilisé (en supposant que jQuery ne soit pas utilisé), que devrions-nous faire ?

L'article de demain parlera de ce problème et reconstruira la logique clé du plug-in, alors restez à l'écoute. . .