10 conseils pour développer de meilleurs plugins jQuery

Excellents plug-ins jQuery sont populaires parmi les dizaines de milliers de développeurs Web à travers le monde, tandis que ceux qui ont de mauvaises conceptions sont rapidement oubliés. Cet article fournit quelques conseils pour vous aider à développer de meilleurs plugins jQuery et à améliorer leur influence.

Points clés:

• Assurez-vous que votre plugin jQuery est utile en chaîne en renvoyant l'objet jQuery qui l'appelle, permettant à plusieurs méthodes jQuery d'être liées.
• Fournit des paramètres par défaut pour votre plugin jQuery, permettant aux utilisateurs de personnaliser en fonction de leurs propres besoins et considère la prise en charge des paramètres HTML pour une utilisation facile.
• Téléchargez votre plugin jQuery sur des bases de code telles que GitHub, Google Code et JQuery Plugin pour la promotion, et être prêt à fournir une prise en charge et des mises à jour nécessaires.

1. Gardez l'intégrité des appels de chaîne

à moins que votre plugin ne renvoie une valeur, la dernière ligne de la fonction du plugin doit être:

return this;

Cela garantit que les appels de méthode peuvent être effectués dans les chaînes, par exemple:

$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();

2. Utilisation simplifiée

Dans la plupart des cas, votre plugin doit fonctionner correctement sans que le développeur recherche la documentation, définit des options ou modifie le code du plugin. S'il s'agit d'un widget visuel, les développeurs ne devraient pas avoir besoin de modifier un code JavaScript. Vous pouvez simplement fournir à HTML la classe / ID, qui démarrera automatiquement votre code, par exemple:

<p>My content</p>

Votre plug-in peut être initialisé par lui-même, par exemple:

$(function() {
    $("section.myjqWidget").myjqWidget();
});

3. Utiliser le numéro de dénomination et le contrôle de la version approprié

Le plug-in jQuery est nombreux. Un nom comme "Tab" est susceptible d'avoir été utilisé. Bien que ce ne soit pas toujours un problème, l'utilisation de noms vagues ou potentiellement contradictoires doit être évité. Les numéros de version sont également importants, en particulier lorsque les développeurs rapportent des problèmes.

4. en utilisant la fermeture

Ne comptez pas sur $ pour citer jQuery. Si le développeur installait d'autres bibliothèques, il aurait pu être récupéré avant le chargement de jQuery. La façon la plus simple de résoudre ce problème est de passer jQuery comme le paramètre $ d'une fonction autoproclamée anonyme, par exemple: $

(function($) {
    // 此处的代码可以使用$来引用jQuery
})(jQuery);

5. Définissez les paramètres par défaut

La plupart des plugins utilisent la notation littérale de l'objet JavaScript pour définir les paramètres, par exemple:

$("#select").MyPlugin({opt1: 1, opt2: 2, opt3: "three"});

Cela présente plusieurs avantages: les paramètres sont faciles à lire, peuvent être organisés dans n'importe quel ordre ou peuvent être omis. Cependant, vous devez définir des valeurs par défaut dans le code du plugin et les écraser en conséquence, par exemple:

$.fn.PlugIn = function(opts) {
    // 默认配置
    var config = $.extend({}, {
        opt1: 1,
        opt2: 2,
        opt3: 3,
        opt4: 4,
        opt5: 5
    }, opts);
    // ...
};

Votre plugin peut utiliser des codes comme

pour référence aux paramètres. config.opt1

6. Prise en charge des paramètres HTML

Idéalement, les widgets HTML devraient être en mesure de définir des paramètres sans avoir besoin que les développeurs changent de code JavaScript. Vous pouvez envisager d'utiliser des attributs de données HTML5, par exemple:

return this;

Ceux-ci sont accessibles via la méthode data() de jQuery: .data("opt1").

7. Écriture de documentation de code

Ajoutez un commentaire concis en haut du plugin, description:

• Nom et version du plugin
• Fonctions du plugin
• Exemples d'utilisation
• Paramètres
• Contacter et supporter les liens

Si le plugin est particulièrement complexe, vous pouvez considérer un fichier de réadme distinct.

8. Essayez votre plug-in à fond

Testez-le. Puis testez-le à nouveau. Tester dans tous les navigateurs. Il peut y avoir des problèmes que vous ne pouvez pas résoudre, tels que les problèmes de compatibilité IE6. Cela n'a pas d'importance, mais il est juste mentionné dans votre documentation.

9. Utilisez de bons modèles

Ce qui suit est le code de modèle que j'ai utilisé lors de la création d'un nouveau plugin:

$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();

Il fournit un bon point de départ:

Le plugin
• est enveloppé dans une fermeture.
• Il définit les options par défaut, qui sont écrasées par les paramètres du plugin.
• Chaque élément sélectionné est passé comme un objet jQuery à la fonction DoSomething.
• contient return this;.
• Le code de démarrage automatique est fourni à la fin.

10. Promouvoir votre plug-in

Si vous souhaitez que votre plugin soit utilisé par les développeurs, téléchargez-le dans des bases de code telles que GitHub, Google Code et JQuery Plugin répertoires. Créez une page de démonstration, faites-les promouvoir dans des articles et continuez à publier des informations sur Twitter. Préparez-vous ensuite à prendre en charge le plugin et à le mettre à jour si nécessaire. Vous obtiendrez des questions stupides et des demandes de fonctionnalités étranges, mais tout cela fait partie du fait d'être un auteur de plugin à succès.

(Le contenu ultérieur, à savoir la partie FAQ, est recommandé pour le traiter séparément en raison de la durée de l'article. La partie FAQ peut être triée en une nouvelle réponse séparément.)

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!