Maison >interface Web >js tutoriel >Pourquoi utiliser un IIFE lors du développement de plugins jQuery ?

Pourquoi utiliser un IIFE lors du développement de plugins jQuery ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-08 03:14:02763parcourir

Why Use an IIFE When Developing jQuery Plugins?

Comprendre le modèle énigmatique jQuery IIFE

Introduction

Lorsque l'on se penche sur le développement de plugins jQuery, on rencontre souvent un code cryptique extrait :

(function($) {})(jQuery);

Cette expression énigmatique revêt une grande importance dans le domaine des plugins jQuery. Dévoilons son objectif et explorons les nuances de la construction du plugin.

L'exécution d'une fonction avec un argument

Le bloc de code exécute essentiellement une fonction anonyme qui reçoit le jQuery objet comme argument. Cette technique, connue sous le nom d'expression de fonction immédiatement invoquée (IIFE), sert à plusieurs fins :

  • Exécute immédiatement le code spécifié sans polluer la portée globale.
  • Permet l'encapsulation des informations locales variables et définitions de fonctions.
  • Fournit un moyen propre de fournir des arguments à la fonction lors de l'exécution.

Comparaison des styles d'écriture de plugins

Au-delà de cette utilisation fondamentale, il existe plusieurs approches pour écrire des plugins jQuery. Examinons les différences entre trois styles courants :

Type 1 : Extension du sélecteur jQuery

(function($) {
    $.fn.jPluginName = {

        },

        $.fn.jPluginName.defaults = {

        }
})(jQuery);

Cette approche étend le sélecteur jQuery avec une méthode personnalisée, mais c'est pas techniquement un plugin. Il ajoute de nouvelles fonctionnalités aux méthodes existantes du prototype de fonction de jQuery.

Type 2 : extension du noyau jQuery

(function($) {
    $.jPluginName = {

        }
})(jQuery);

Semblable au type 1, cela ne crée pas un plugin mais étend le noyau jQuery. Il est utile pour ajouter de nouvelles méthodes de traversée à l'arsenal de jQuery.

Type 3 : Extension du prototype de la fonction de jQuery

(function($){

    //Attach this new method to jQuery
    $.fn.extend({ 

        var defaults = {  
        }  

        var options =  $.extend(defaults, options);  

        //This is where you write your plugin's name
        pluginname: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

Le type 3 est la méthode préférée pour créer jQuery plugins. Il permet la création de méthodes personnalisées pouvant être appelées sur n'importe quel sélecteur jQuery. En étendant le prototype de la fonction jQuery, la fonctionnalité du plugin devient accessible via toutes les instances du sélecteur.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn