Fonctions JavaScript auto-exécutables et méthodes d'extension jQuery

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. Cet article présente principalement en détail les fonctions auto-exécutables de JavaScript et les méthodes d'extension jQuery. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Une fonction auto-exécutable est une fonction anonyme entourée d'une paire de parenthèses. 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

javascript Utiliser des fermetures et des fonctions auto-exécutables pour résoudre un grand nombre de problèmes de variables globales_compétences javascript

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!