J'ai besoin d'un plug-in de pagination JS pour travailler, et j'ai pensé à en écrire un moi-même. Je suis allé en ligne et j'en ai trouvé un dont je ne connaissais pas la structure du code, et il était difficile de résoudre le problème. les plug-ins sur Internet contenaient trop de fonctions, et certains d'entre eux n'étaient pas du tout utiles. Ensuite, il n'est pas nécessaire de charger ce morceau de JS. Deuxièmement, je me suis souvenu que je n'avais jamais écrit de plug-in jQuery, alors je viens de m'entraîner. D'accord, regardons d'abord les résultats :
http://demo.jb51.net/js/2014/EasyPage/
Parlons brièvement des fonctions implémentées par ce plug-in
L'arrière-plan affichera tout le contenu interrogé sur la page. Ce plug-in doit contrôler le contenu afin qu'il puisse être affiché page par page. Il existe des fonctions de page précédente, de page suivante, de page d'accueil et de dernière page. Sur la première page, la page précédente et la page d'accueil doivent être masquées. Sur la dernière page, la dernière page et la page suivante doivent être masquées. Seuls quelques boutons sont affichés à la fois, et lorsque le dernier bouton est cliqué, les suivants sont affichés.
Parlons brièvement du processus d'encodage :
Tout d'abord, vous pouvez écrire hardiment le code suivant :
1 2 3 4 5 |
|
Ce code devrait être familier à tout le monde. Il s'agit de la fonctionnalité divine de JavaScript : la fermeture. C'est également une structure courante pour les plugins jQuery. Pourquoi utiliser des fermetures pour créer cette structure commune de jQuery ? D'une part, cela peut éviter que les variables temporaires internes n'affectent l'espace global, et vous pouvez continuer à utiliser $ comme alias pour jQuery dans le plug-in.
L'étape suivante consiste à écrire vos propres méthodes dans cette structure. jQuery propose deux façons d'étendre les méthodes dans jQuery. Ouvrez l'API jQuery et recherchez le mécanisme du plug-in. Vous pouvez voir deux méthodes
.
• jQuery.extend(object) étend l'objet jQuery lui-même. Utilisé pour ajouter de nouvelles fonctions à l'espace de noms jQuery.
• jQuery.fn.extend(object) étend l'ensemble d'éléments jQuery pour fournir de nouvelles méthodes (généralement utilisées pour créer des plug-ins).
D'après ce qui précède, nous pouvons voir que jQuery.extend(object) étend jQuery lui-même. Du point de vue des langages tels que Java ou C#, cela équivaut à ajouter une méthode statique à jQuery. Par exemple, on écrit ainsi :
1 2 3 4 5 |
|
De cette façon, cela équivaut à ajouter une méthode max à l'objet jQuery. Lors de l'appel, vous pouvez l'appeler comme ceci : jQuery.max()
Alors, qu'est-ce que jQuery.fn ? Ouvrez le code source de jQuery et vous pouvez voir jQuery.fn = jQuery.prototype. Ensuite, jQuery.fn.extend équivaut à l'ajout d'une fonction membre dans jQuery.
Vous devriez maintenant comprendre la différence entre les deux. La méthode statique peut être appelée directement, jQuery.max(). Les fonctions membres ne peuvent être appelées que par des instances jQuery, telles que jQuery("#my").max().
Ici, j'utilise la méthode jQuery.extend. Le code est le suivant :
1 2 3 4 5 6 7 8 9 10 11 |
|
Easypage est le nom de la méthode utilisée par le plug-in de pagination, et contentclass, navigationid, eachcount et navigationcount sont des paramètres.
Le cadre de base a été mis en place et la prochaine étape consiste à compléter les fonctions.
La première chose est de trouver le contenu à paginer et de générer des boutons de navigation. Le code est le suivant :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
L'étape suivante consiste à implémenter quelques fonctions de base. Nous en extrayons ici deux à afficher
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
Ok, le flux de code de base est comme ceci. Le code source du programme est dans la pièce jointe, et l'implémentation spécifique de la fonction a été expliquée assez clairement dans les commentaires du code source. Si vous avez encore des questions sur les fermetures, vous pouvez consulter mon précédent blog pour parler des fermetures JavaScript.
Ce qui suit résume les points de base du plug-in jQuery Haha, il est extrait de Sharp jQuery.
•Le nom de fichier recommandé du plug-in est jquery.[nom du plug-in].js, tel que jquery.color.js
• Toutes les méthodes objets doivent être attachées à l'objet jQuery.fn et toutes les fonctions globales doivent être attachées à l'objet jQuery lui-même
•À l'intérieur du plug-in, cela pointe vers l'objet jQuery actuellement obtenu via le sélecteur, contrairement à la méthode générale, comme la méthode click(), où l'interne this pointe vers l'élément DOM
•Vous pouvez parcourir tous les éléments à travers this.each
•Tous les plug-ins de méthodes ou de fonctions doivent se terminer par un point-virgule, sinon des problèmes peuvent survenir lors de la compression. Certains ajoutent un point-virgule
au début du plug-in pour plus de sécurité.
• Les plug-ins doivent renvoyer un objet jQuery, qui garantit les opérations chaînables du plug-in. Sauf si le plug-in doit renvoyer une quantité qui doit être obtenue, comme une chaîne ou un tableau, etc.
•Essayez d'utiliser des techniques de fermeture pour éviter les conflits de noms de variables
Parce que c'est la première fois que j'écris un plug-in jQuery, il peut y avoir certaines choses qui ne vont pas, veuillez me pardonner.