Explication détaillée des fonctions auto-exécutables JavaScript et des méthodes d'extension jQuery

Cet article présente principalement en détail les fonctions auto-exécutables de JavaScript et les méthodes d'extension jQuery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

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 des problèmes avec des noms de variables ou des noms de fonctions qui entrent en conflit avec d'autres codes 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.

Une fonction auto-exécutable utilise une paire de parenthèses pour envelopper une fonction anonyme. L'ajout de parenthèses (passage de paramètres) l'exécutera immédiatement. Étant donné que la fonction n'a pas de nom, une isolation absolue de la portée et un conflit de noms de fonction sont obtenus. La forme de base est la suivante :

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

Par exemple, nous avons écrit de la 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 s'exécutera immédiatement, puis exécutera la fonction init définie en interne :

Cependant, les caractéristiques d'exécution immédiate des fonctions auto-exécutables rendent son 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.

Nous examinons d'abord la forme de base de définition des méthodes d'extension jQuery :

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

De cette manière, via $.myMethod() ou jQuery. myMethod() Vous pouvez appeler la méthode définie ci-dessus.

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');;
  }
});

Les méthodes d'extension définies de la manière ci-dessus doivent passer l'appel du sélecteur jQuery , par exemple via le sélecteur de balises $("button").myMethod(args)

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

Ci-dessous nous utilisons la fonctionnalité d'exécution immédiate de la fonction auto-exécutable pour définir la méthode d'extension jQuery :

(function (jq) {

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

  jq.extend({
    'myMethod': function () {
      init();
    }
  })
})(jQuery);

Explication, cette auto- La fonction d'exécution reçoit l'objet jQuery en tant que paramètre, puis définit en interne une méthode d'extension myMethod pour jQuery, qui exécute la fonction d'initialisation du code logique réel

appel :

<script src="jquery-3.2.1.js"></script>
<script src="custome.js"></script>
<script>

 $(function () {
  $.myMethod();
 });

</script>

Description :

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 le Objet jQuery en tant que paramètre, s'exécute immédiatement et est défini en interne pour jQuery Une méthode d'extension myMethod
Ensuite, nous pouvons exécuter la fonction init en appelant $.meMethod() ou jQuery.myMethod() après le chargement de la page.

Recommandations associées :

Fonctions auto-exécutables dans les fonctions js

Méthode d'encapsulation d'espace de noms pseudo de fonctions auto-exécutables javascript_compétences javascript

Comparaison de plusieurs façons différentes d'écrire des fonctions js auto-exécutables_javascript skills

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!