Comment utiliser les fonctions auto-exécutables JS et les extensions jQuery

Cette fois, je vais vous expliquer comment utiliser les fonctions auto-exécutables de JS et les extensions jQuery Quelles sont les précautions concernant les fonctions et les fonctions auto-exécutables de JS. Extensions jQuery ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Nous écrivons généralement le code JS dans un fichier JS séparé, puis introduisons le fichier dans la page. Cependant, parfois après l'introduction, vous rencontrerez le problème du nom de variable ou du nom de fonction en conflit avec un autre code JS. Alors comment résoudre ce problème ? Isolement de la portée. Dans JS, la portée est divisée par fonctions. L'encapsulation du code JS dans des fonctions pour l'appel peut éviter le problème des conflits de nom de variable/nom de fonction, mais cela n'est pas infaillible car la fonction encapsulée elle-même peut chevaucher d'autres fonctions. -fonction d'exécution.

La fonction auto-exécutable utilise une paire de parenthèses pour envelopper la fonction anonyme , et les parenthèses (paramètres passés) seront exécutées immédiatement. Étant donné que la fonction n'a pas de nom, une isolation absolue de la portée et des conflits de noms de fonctions sont obtenus. Le formulaire de base est le suivant :

(function () {
  console.log('do something');
})();

Par exemple, nous avons écrit une logique JS dans le fichier custome.js et l'avons encapsulée dans la fonction init. Nous enveloppons la fonction auto-définie init avec une fonction auto-exécutable, comme indiqué ci-dessous.

(function () {
  function init() {
    console.log('execute init...');
  }
  init();
})();

Lorsque nous introduisons custome.js en html : , la fonction auto-exécutable sera exécutée immédiatement, puis la fonction init définie en interne sera exécutée :

Cependant, les caractéristiques d’exécution immédiate des fonctions auto-exécutables rendent leur appel difficile. En définissant les méthodes d'extension jQuery, vous pouvez résoudre ce problème et prendre l'initiative d'appeler et d'exécuter des fonctions auto-exécutables.

Tout d’abord, examinons la forme de base de définition des méthodes d’extension jQuery :

jQuery.extend({
  'myMethod': function () {
    console.log('do something');
  }
});

De cette façon, la méthode définie ci-dessus peut être appelée via $.myMethod() ou jQuery.myMethod().

Il existe une autre façon de définir les méthodes d'extension jQuery : .fn

jQuery.fn.extend({
  'myMethod': function () {
    console.log('do something');;
  }
});

La méthode d'extension définie comme ci-dessus doit être appelée via le sélecteur jQuery, par exemple via le sélecteur de balise $("button").myMethod(args)

Après avoir compris les fonctions auto-exécutables de JS et les méthodes d'extension jQuery, nous combinons les deux.

Ci-dessous nous utilisons les caractéristiques d'exécution immédiate des fonctions auto-exécutables pour définir les méthodes d'extension jQuery :

(function (jq) {
  function init() {
    console.log('do something');
  }
  jq.extend({
    'myMethod': function () {
      init();
    }
  })
})(jQuery);

Notez que cette fonction auto-exécutable reçoit un objet jQuery en tant que paramètre, puis définit en interne une méthode d'extension myMethod pour jQuery, qui exécute la véritable fonction d'initialisation du code logique

Appeler :

<script src="jquery-3.2.1.js"></script>
<script src="custome.js"></script>
<script>
 $(function () {
  $.myMethod();
 });
</script>

Remarque :

Après l'introduction du fichier jQuery, l'objet jQuery est disponible globalement
Le fichier JS personnalisé custome.js est ensuite introduit, dans lequel la fonction auto-exécutable reçoit l'objet jQuery en paramètre ; et est exécuté immédiatement En interne, c'est jQuery Définissez une méthode d'extension myMethod
et nous pouvons ensuite exécuter la fonction init en appelant $.meMethod() ou jQuery.myMethod() après le chargement de la page. ​ ​  

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation des étapes de référence dans vue2

intercepteur vue-resource pour définir les informations d'en-tête Détaillé explication étape par étape

Mise en œuvre de la méthode d'envoi de requête asynchrone ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!