Share
Dans cet article, nous allons créer notre propre plug-in jQuery, étape par étape; jQuery nous facilite exceptionnellement cette tâche, en nous offrant une méthode simple pour empaqueter nos scripts et en exposer les fonctionnalités, et pour encourager l'utilisation de techniques orientées objet évolutives et réutilisables..
Transformer un code que nous retrouvons maintes et maintes fois dans un plugin jQuery est logique; cela signifie que nous pouvons déposer des scripts sur des sites et les faire fonctionner immédiatement avec peu ou pas de personnalisation, et que nous pouvons partager notre code avec d'autres développeurs. En raison de la syntaxe commune utilisée lors de l’utilisation des plugins jQuery, la plupart des développeurs devraient être en mesure de les récupérer et de les utiliser de manière intuitive, à l’aide d’une simple documentation répertoriant les propriétés configurables..
Notre plugin sera un simple chargeur d'images; une fois qu'une page a été chargée (par exemple, la page d'accueil ou une autre page d'arrivée commune sur notre site), nous chargeons une série d'images. Ces images sont enregistrées dans la mémoire cache du navigateur du visiteur et sont donc utilisables dans le reste du site. Ils se chargent beaucoup plus rapidement que la normale; il s'agit donc d'un bon moyen de pré-charger de grandes images afin que le visiteur ne soit pas obligé d'attendre leur rendu lors de l'ouverture de la page qui les contient..
Nous allons créer un nouveau répertoire pour garder tous les fichiers nécessaires dans.
Maintenant que tout est en place, nous pouvons commencer à écrire des scripts. dans un nouveau fichier dans votre éditeur de texte, commencez par le code suivant:
(function ($) // le code du plugin ira ici…) (jQuery);
Enregistrez le nouveau fichier dans le dossier des scripts sous le nom jquery.jloader.js. Nous commençons par créer une fonction de wrapper anonyme qui s'exécute automatiquement. La fonction accepte un seul argument qui est le symbole dollar. La fonction est suivie d'un deuxième ensemble de parenthèses; nous les utilisons pour passer la bibliothèque jQuery dans notre plugin. Cela signifie que nous pouvons utiliser toute fonctionnalité jQuery standard en utilisant le signe $ comme alias. Ce deuxième ensemble de parenthèses est également ce qui rend notre fonction automatique.
Dans notre fonction anonyme ajoutez le code suivant:
$ .jLoader = par défaut: imgDir: "loaderImages /", imgContainer: "", imgTotal: 9, imgFormat: ".jpg", simpleFileNames: true;
Avec ce code, nous créons un nouvel objet qui est ajouté en tant que propriété à l'objet jQuery. Un deuxième objet appelé par défaut est imbriqué dans cet objet. Ce second objet est utilisé pour stocker les différents paramètres de configuration de notre plugin. Ces paramètres sont les propriétés de notre plugin et constituent la principale API avec laquelle il peut être utilisé par programmation. Une fois le plugin codé, il apparaîtra dans l'onglet DOM de Firebug en tant que propriété des objets $ ou jQuery:
Ensuite, nous devons ajouter notre méthode constructeur à jQuery afin de pouvoir cibler des éléments spécifiques ou des groupes d’éléments et de leur appliquer notre plugin. Directement après les propriétés configurables, ajoutez le code suivant:
Accentsconagua
$ .fn.extend (jLoader: function (config, nomsFichiers) var config = $ .extend (, $ .jLoader.defaults, config); config.imgContainer = this.attr ("id"); (config .simpleFileNames == true)? simpleLoad (config): complexLoad (config, nomFichier); renvoie ceci;); La méthode extend de jQuery prend un objet et applique ses propriétés à un autre objet. Lors de la création de plug-ins, nous appliquons l'objet représentant notre plug-in à l'objet fn, qui est une construction jQuery spéciale conçue pour les plugins de création..
La propriété jLoader dans l'objet que nous appliquons à fn a pour fonction une fonction anonyme. Dans cette fonction, nous ajoutons d’abord nos propriétés configurables. Nous faisons cela en utilisant encore une fois la méthode extend de jQuery. Notre fonction constructeur accepte deux arguments optionnels, un objet de configuration créé par le développeur et un tableau de noms de fichiers..
Cela nous permet d'utiliser les propriétés par défaut, mais également d'accepter un objet de configuration lorsque nous appelons la méthode constructeur à partir de code externe. Toutes les propriétés fournies dans l'objet de configuration du constructeur remplacent les valeurs des propriétés correspondantes dans l'objet de configuration par défaut..
Il est utile pour les autres développeurs de fournir autant de propriétés configurables que possible pour rendre nos plugins plus robustes et personnalisables. L'ensemble de propriétés résultant est stocké dans la variable config afin que nous puissions facilement le transmettre à d'autres fonctions..
Nous obtenons l'identifiant de l'élément sélectionné, que nous pouvons obtenir en interrogeant l'attribut id de l'objet jQuery actuel, qui pointera vers le ou les éléments auxquels notre fonction constructeur est attachée..
Nous déterminons ensuite si nous utilisons des noms de fichiers simples (numériques) ou complexes (alphanumériques); nous pouvons le découvrir à partir de la propriété simpleFileNames de notre objet config. Par défaut, la valeur est true. Nous vérifions si sa valeur est toujours vraie et appelons la fonction appropriée à l'aide de l'instruction conditionnelle ternaire JavaScript standard. Chaque fonction reçoit l'objet config afin que nous puissions utiliser ses propriétés à l'intérieur de la fonction. Si nous ne le faisions pas, nous ne pourrions accéder à aucune des propriétés de configuration à partir de nos méthodes..
Enfin, nous utilisons l'instruction return pour renvoyer notre objet plugin; c'est un facteur important dans le code du plugin et cela signifie que nous pouvons chaîner des méthodes jQuery supplémentaires à la fin de l'appel de notre méthode constructeur, le faisant se comporter exactement comme les autres méthodes internes à jQuery..
Notre plugin propose deux méthodes supplémentaires suivant la méthode constructeur; ces deux méthodes sont utilisées en interne par le plugin et n'ont pas besoin d'être appelées à partir de code externe, considérez-les comme des méthodes protégées. La première de ces méthodes est la méthode simpleLoad et comprend le code suivant:
function simpleLoad (config) pour (var x = 1; x < config.imgTotal + 1; x++) $("![]()
") .attr (id:" image "+ x, src: config.imgDir + x + config.imgFormat, titre:" Image "+ x). appendTo (" # "+ config.imgContainer) .css ( display: "none");; En utilisant un JavaScript standard pour la boucle, nous pouvons créer le nombre requis d'éléments img en fonction de la propriété imgTotal, que nous avons définie sur 9 dans notre objet par défaut. Il peut sembler fastidieux de devoir indiquer au plug-in le nombre d'images que nous voulons charger, mais malheureusement, il est impossible d'interroger le contenu du dossier à l'aide de JavaScript. Cette propriété empêche le plug-in de nécessiter une prise en charge côté serveur.
Nous créons chaque image à l'aide de l'excellent outil de création de nœud DOM de jQuery et définissons les attributs de base nécessaires à toute image. un identifiant, src et un titre. Pour rendre l'identifiant de chaque élément unique, nous pouvons utiliser la variable count de notre boucle for. Le src de chaque nouvel élément img est le plus complexe; pour cet attribut, nous ajoutons le chemin d'accès à l'image à l'aide de la propriété imgDir. Avec des noms de fichiers simples, nous pouvons également utiliser la variable count pour ajouter chaque image spécifiée. Enfin, nous ajoutons l'extension de fichier à l'aide de la propriété imgFormat. L'attribut title correspond simplement à l'id.
Une fois que chaque image a été créée et dotée des attributs appropriés, nous l'ajoutons à l'élément conteneur spécifié dans la propriété imgContainer. Les images préchargées ne sont pas destinées à être vues à ce stade. Nous pouvons donc utiliser la méthode CSS de jQuery pour définir leur propriété d'affichage sur none. La fonction finale, complexLoad, utilise à la fois l’objet de configuration facultatif et le tableau fileNames; le code devrait apparaître comme suit:
function complexLoad (config, fileNames) pour (var x = 0; x < fileNames.length; x++) $("![]()
") .attr (id: nomsFichiers [x], src: config.imgDir + nomsFichiers [x] + config.imgFormat, titre:" Le "+ nomsFichiers [x] +" nébuleuse "). appendTo (" # " + config.imgContainer) .css (display: "none");; Nous utilisons toujours une boucle for dans cette méthode, bien que le nombre de fois qu'elle s'exécute soit basé sur le nombre d'éléments du tableau fileNames au lieu de la propriété imgTotal. Nous créons toujours une série d'éléments img et nous définissons les mêmes attributs que précédemment, bien que nous utilisions cette fois des valeurs différentes pour les attributs..
L'identifiant de chaque nouvelle image est simplement défini sur le contenu de l'élément de tableau actuel. L'image est chargée en concaténant à nouveau le chemin d'accès, le nom de fichier et l'extension de fichier, bien que cette fois, nous utilisions le contenu de l'élément de tableau en cours comme nom de fichier au lieu d'un entier. L'attribut title a une valeur légèrement plus détaillée qu'auparavant et utilise à nouveau l'élément de tableau au lieu d'une propriété de configuration.
Nous avons maintenant ajouté tout le code qui compose notre plugin. Il est temps de le mettre à l'épreuve. Créez un fichier HTML vierge tel que:
Page de démonstration de jLoader
Enregistrez cette page dans le dossier du projet principal (jLoader) sous le nom jLoader.demo.html. Dans le corps de la page, nous avons nos deux éléments de conteneur que nous allons renseigner avec les images préchargées. Nous lions à jQuery et au fichier source de notre widget, puis nous avons deux méthodes de constructeur pour notre plugin..
Le premier est le simpleImageContainer qui utilise la méthode de récupération DOM standard de jQuery et appelle notre plug-in sans configuration supplémentaire. Cela appelle l'implémentation par défaut et doit remplir le conteneur avec les images nommées numériquement. Vous ne verrez pas cela sur la page car nous les avons tous configurés pour afficher: aucun, mais vous devriez pouvoir les voir dans Firebug:
La seconde méthode constructeur utilise à la fois un objet de configuration et le tableau fileNames. Nous définissons deux propriétés ici; Nous avons d’abord défini la propriété false sur la propriété simpleFileNames afin que notre deuxième méthode protégée dans notre plugin soit utilisée, puis nous avons défini la propriété imgContainer sur l’identificateur de l’élément auquel nous allons ajouter les images. Nous fournissons ensuite un tableau de tous les noms de fichiers d'image que nous voulons précharger au format chaîne. Encore une fois, vous ne verrez pas les images; C’est tout le problème, mais Firebug prouvera leur existence:
Dans ce didacticiel, nous avons examiné les différentes étapes nécessaires à la création d’un plug-in jQuery simple; nous avons examiné comment ajouter des propriétés à l'API de notre plugin et comment ajouter des méthodes qui effectuent différents comportements. Nous avons également vu les méthodes que jQuery nous donne pour faciliter la création de plugins et les techniques que nous pouvons utiliser pour rendre nos créations plus robustes..
Assurez-vous de visiter le site jQuery afin de passer en revue les plugins disponibles. Il ne sert à rien de réinventer la roue à moins d'apprendre.!
Visitez l'article
"Parfois, nous nous rendons compte qu'une tâche est trop complexe et que nous ne l'ignorons pas. C'est ce que je pensais au développement d'un plugin pour jQuery. J'ai toujours pensé qu'une partie du code que j'avais développé aurait plus de sens. comme un plugin, mais je n’ai tout simplement pas le temps de le comprendre. "
Visitez l'article
"Alors vous étiez à la recherche de la réponse à la vie, à l'univers et à tout, quand blam, vous avez trouvé jQuery. Oui, je sais, vous attendiez 42 ans, mais aussi toute notre surprise, c'était jQuery. Et maintenant? Construisez votre propre plugin! "
Visitez l'article
