Créez et publiez votre propre bibliothèque JavaScript: un guide détaillé
Points de base
Cet article a été évalué par des pairs par Adrian Sandu, Vildan Softic et Dan Prince. Merci à tous les pair de sitepoint pour avoir obtenu le contenu de sitepoint à son meilleur!
Nous utilisons souvent des bibliothèques. La bibliothèque est du code emballé que les développeurs peuvent utiliser dans leurs projets, ce qui enregistre sans aucun doute la charge de travail et évite les roues en double. Le fait d'avoir des packages réutilisables (à la fois open source ou à source fermée) est mieux que de reconstruire les mêmes fonctionnalités ou de copier manuellement à partir de projets antérieurs.
mais en plus du code emballé, quelle est exactement la bibliothèque? À quelques exceptions, la bibliothèque doit toujours être un seul fichier ou plusieurs fichiers situés dans un seul dossier. Son code doit être maintenu séparément et reste le même lorsqu'il est mis en œuvre dans le projet. La bibliothèque devrait vous permettre de définir des configurations et / ou des comportements spécifiques au projet. Considérez-le comme un appareil USB qui n'autorise la communication que via un port USB. Certains appareils, tels que les souris et les claviers, permettent la configuration via les interfaces fournies par l'appareil.
Dans cet article, je vais expliquer comment la bibliothèque est construite. Bien que la plupart des sujets abordés conviennent à d'autres langues, ce message se concentre sur la construction de bibliothèques JavaScript.
Tout d'abord, la bibliothèque rend la réutilisation du code existant très pratique. Vous n'avez pas à déterrer d'anciens projets et à copier certains fichiers, à apporter simplement la bibliothèque. Cela fragmentera également votre application, ce qui rend la base de code d'application plus petite et plus facile à entretenir.
Un projet open source populaire peut également apporter d'énormes opportunités. Une entreprise peut être impressionnée par la qualité de votre travail et vous offrir un emploi. Peut-être qu'une entreprise vous demandera de l'aide pour intégrer votre projet dans sa demande. Après tout, personne ne connaît votre bibliothèque mieux que vous.
Pour beaucoup de gens, ce n'est qu'un passe-temps - profiter du processus d'écriture de code, d'aide aux autres et d'apprentissage et de croissance dans le processus. Vous pouvez repousser vos limites et essayer de nouvelles choses.
Portée et cible
Ne faites qu'une seule chose et faites-le bien
Demandez-vous: quels problèmes résolvent votre bibliothèque? Comment allez-vous le résoudre? Souhaitez-vous tout écrire vous-même ou pourriez-vous utiliser la bibliothèque de quelqu'un d'autre?
Essayez de créer une feuille de route quelle que soit la taille de la bibliothèque. Énumérez toutes les fonctionnalités que vous souhaitez, puis supprimez autant de fonctionnalités que possible jusqu'à ce que vous ayez une bibliothèque minuscule mais entièrement fonctionnelle comme le plus petit produit viable. Ce sera votre première version. De là, vous pouvez créer des jalons pour chaque nouvelle fonctionnalité. Essentiellement, vous décomposez le projet en petits morceaux, ce qui rend chaque fonctionnalité plus comme une réussite et plus agréable. Croyez-moi, cela vous gardera sain d'esprit.
conception de l'API
Le test final de qualité API consiste à manger votre propre nourriture pour chiens et à utiliser votre bibliothèque dans votre propre projet. Essayez de remplacer le code d'application par votre bibliothèque et voyez s'il couvre toutes les fonctionnalités que vous souhaitez. Essayez de rendre la bibliothèque aussi mince que possible tout en la rendant suffisamment flexible pour la rendre adaptée à leurs situations extrêmes également par personnalisation (comme décrit plus loin dans cet article).
Ce qui suit est à quoi pourrait ressembler l'implémentation ou le résumé de la bibliothèque de chaînes d'agents utilisateur:
<code>// 以空的UserAgent字符串开始
var userAgent = new UserAgent;
// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);
// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();
// 对引擎产品进行更多更改
engine.setComment('Hello World');
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>Selon la complexité de la bibliothèque, vous devrez peut-être également considérer la structure. L'utilisation de modèles de conception est un excellent moyen de créer des bibliothèques ou de surmonter certains problèmes techniques. Il réduit également le risque de refactoriser la plupart du code lors de l'ajout de nouvelles fonctionnalités.
Ce qui rend la bibliothèque puissante, c'est la flexibilité, mais il est également difficile de tracer une ligne entre ce que vous pouvez personnaliser et ce que vous ne pouvez pas. Un exemple parfait est Chart.js et D3.js. Les deux sont d'excellentes bibliothèques pour visualiser les données. Chart.js facilite la création et la configuration de différents types de graphiques intégrés. Cependant, si vous avez besoin de plus de contrôle sur les graphiques, vous devez utiliser d3.js. Il existe plusieurs façons de donner aux utilisateurs le contrôle: configuration, exposer les méthodes publiques et via des rappels et des événements.
La configuration de la bibliothèqueest généralement effectuée lors de l'initialisation, mais certaines bibliothèques vous permettent de modifier les options lors de l'exécution. Les options sont généralement limitées aux détails, la modification de ces options ne doit rien faire, sauf à la mise à jour de ces valeurs pour une utilisation ultérieure.
Les méthodes
peuvent être divulguées pour interagir avec des instances, telles que la récupération des données à partir des instances, la mise en place de données dans les instances (setters) et la réalisation des opérations.<code>// 在初始化时配置
var userAgent = new UserAgent({
commentSeparator: ';'
});
// 使用公共方法进行运行时配置
userAgent.setOption('commentSeparator', '-');
// 使用公共属性进行运行时配置
userAgent.commentSeparator = '-';
</code>Les rappels
sont parfois transmis avec des méthodes publiques, exécutant généralement du code utilisateur après une tâche asynchrone.<code>var userAgent = new UserAgent; // 获取器，用于从所有产品中检索注释 userAgent.getComments(); // 用于打乱所有产品顺序的操作 userAgent.shuffleProducts(); </code>
Les événements
ont un grand potentiel. Ils sont similaires aux rappels, sauf que l'ajout de gestionnaires d'événements ne doit pas déclencher d'actions. Les événements sont généralement utilisés pour indiquer (vous pouvez avoir deviné) des événements! Tout comme un rappel, vous pouvez fournir des informations supplémentaires et des valeurs de retour que la bibliothèque peut utiliser.<code>var userAgent = new UserAgent;
userAgent.doAsyncThing(function asyncThingDone() {
// 异步操作完成后运行代码
});
</code>Dans certains cas, vous souhaiterez peut-être permettre aux utilisateurs d'étendre votre bibliothèque. Pour ce faire, vous pouvez exposer une méthode ou une propriété publique à remplir, tout comme le module angulaire (angulaire.module ('mymodule')) et le fn de jQuery (jquery.fn.myplugin), ou ne rien faire, il suffit d'accéder aux utilisateurs à l'espace de noms de votre bibliothèque:
<code>var userAgent = new UserAgent;
// 验证添加的产品
userAgent.on('product.add', function onProductAdd(e, product) {
var shouldAddProduct = product.toString().length
// 告诉库添加或不添加产品
return shouldAddProduct;
});
</code>Encore une fois, cela vous permet de remplacer la méthode.
<code>// AngryUserAgent 模块
// 可以访问UserAgent命名空间
(function AngryUserAgent(UserAgent) {
// 创建新的方法 .toAngryString()
UserAgent.prototype.toAngryString = function() {
return this.toString().toUpperCase();
};
})(UserAgent);
// 应用程序代码
var userAgent = new UserAgent;
// ...
// EVILCORPBROWSER/1.2 (X11; LINUX; EN-US) BLINK/20420101
userAgent.toAngryString();
</code>Dans ce dernier cas, permettre aux utilisateurs d'accéder à l'espace de noms de votre bibliothèque réduira votre contrôle sur la définition des extensions / plugins. Pour vous assurer que l'extension suit certaines conventions, vous pouvez (et devriez) écrire la documentation.
<code>// AngryUserAgent 模块
(function AngryUserAgent(UserAgent) {
// 存储旧的 .toString() 方法以供以后使用
var _toString = UserAgent.prototype.toString;
// 覆盖 .toString()
UserAgent.prototype.toString = function() {
return _toString.call(this).toUpperCase();
};
})(UserAgent);
var userAgent = new UserAgent;
// ...
// EVILCORPBROWSER/1.2 (X11; LINUX; EN-US) BLINK/20420101
userAgent.toString();
</code>Tester
Jani Hartikainen explique comment écrire des tests unitaires dans "Utilisation de Mocha et Chai pour tester votre javascript". Dans "Testing Javascript avec Jasmine, Travis et Karma", Tim Evko montre comment configurer un excellent pipeline de test avec un autre cadre appelé Jasmine. Ces deux cadres de test sont très populaires, mais il existe de nombreux autres types de cadres.
Le résumé que j'ai créé plus tôt dans cet article a commenté la sortie attendue. C'est là que tous les tests commencent: commencez par les attentes. Les tests de jasmin pour ma bibliothèque sont les suivants:
<code>// 以空的UserAgent字符串开始
var userAgent = new UserAgent;
// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);
// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();
// 对引擎产品进行更多更改
engine.setComment('Hello World');
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>Une fois que vous êtes entièrement satisfait de la première version de la conception de l'API, il est temps de commencer à penser à l'architecture et à la façon dont votre bibliothèque sera utilisée.
Vous pouvez ou non utiliser des chargeurs de modules. Cependant, les développeurs qui choisissent d'implémenter votre bibliothèque peuvent l'utiliser, vous souhaitez donc que votre bibliothèque soit compatible avec le chargeur de module. Mais lequel? Comment choisissez-vous entre CommonJS, requirejs, AMD et autres chargeurs de modules?
En fait, vous n'avez pas besoin de choisir! La définition du module universel (UMD) est une autre stratégie conçue pour prendre en charge plusieurs chargeurs de modules. Vous pouvez trouver différentes versions des extraits de code en ligne, et vous pouvez également trouver différentes versions d'UMD dans le référentiel GitHub UMD pour rendre votre bibliothèque compatible avec UMD. Commencez votre bibliothèque avec l'un des modèles, ou ajoutez UMD avec votre outil de construction préféré, et vous n'avez pas à vous soucier des chargeurs de modules.
Si vous souhaitez utiliser la syntaxe d'importation / exportation ES2015, je recommande fortement d'utiliser Babel pour compiler vers ES5, combinée avec le plugin UMD de Babel. De cette façon, vous pouvez utiliser ES2015 dans votre projet tout en générant des bibliothèques adaptées à tout le monde.
Je suis complètement en faveur d'une documentation approfondie de tous les projets, mais cela est souvent considéré comme beaucoup de travail, retardé et finalement oublié.
La documentation doit toujours commencer par des informations de base, telles que le nom et la description du projet. Cela aidera les autres à comprendre les fonctionnalités de votre bibliothèque et si cela fonctionne pour eux.
Vous pouvez fournir des informations supplémentaires, telles que la portée et les objectifs, pour mieux informer les utilisateurs, ainsi qu'une feuille de route afin qu'ils sachent ce qui se passera à l'avenir ou comment ils peuvent contribuer.
Bien sûr, vous devez faire savoir à l'utilisateur comment utiliser votre bibliothèque. Cela commence par la documentation de l'API. Les tutoriels et les exemples sont d'excellents ajouts, mais les écrire peuvent prendre beaucoup de travail. Cependant, ce n'est pas le cas avec la documentation en ligne. Ce sont des commentaires qui peuvent être analysés et convertis en page de document utilisant JSDOC.
Certains utilisateurs peuvent vouloir changer votre bibliothèque. Dans la plupart des cas, ce sera en contribution, mais certaines personnes peuvent souhaiter créer une version personnalisée pour un usage privé. Pour ces utilisateurs, les documents contenant des métatases sont utiles, tels que des listes de commandes pour la construction de bibliothèques, l'exécution de tests, la génération, la conversion ou le téléchargement de données, etc.
La contribution est très importante lorsque vous ouvrez votre bibliothèque. Pour guider les contributeurs, vous pouvez y ajouter de la documentation, en expliquant les étapes à contribuer et les critères qu'il devrait répondre. Cela vous permettra de réviser et d'accepter les contributions et de faciliter plus facilement les contributions correctement.
Dernier point mais non le moindre, veuillez inclure une licence. Techniquement, si vous choisissez de ne pas inclure de licence, il est toujours protégé par le droit d'auteur, mais tout le monde ne le sait pas.
J'ai trouvé que ChooseAcisen.com était une excellente ressource pour que vous puissiez choisir une licence sans devenir un expert juridique. Après avoir sélectionné une licence, enregistrez simplement le texte dans le fichier licence.txt dans le répertoire racine du projet.
Le versioning est essentiel pour une bonne bibliothèque. Si vous choisissez de modifier significatif, les utilisateurs peuvent vouloir continuer à utiliser la version qui fonctionne pour eux.
Les critères de dénomination actuels de la version de facto sont le contrôle de la version sémantique, ou Semver. La version Semver se compose de trois nombres, chacun représentant un changement différent: les versions primaires, mineures et patch.
Si vous avez un référentiel GIT, vous pouvez ajouter un numéro de version au référentiel. Vous pouvez les considérer comme des instantanés du référentiel. Nous l'appelons une étiquette. Pour créer une balise, ouvrez un terminal et tapez:
<code>// 以空的UserAgent字符串开始
var userAgent = new UserAgent;
// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);
// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();
// 对引擎产品进行更多更改
engine.setComment('Hello World');
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>De nombreux services (tels que GitHub) fourniront un aperçu de toutes les versions et un lien de téléchargement pour chaque version.
De nombreux langages de programmation sont livrés avec des gestionnaires de packages, ou des gestionnaires de packages tiers peuvent être utilisés. Ceux-ci nous permettent d'introduire des bibliothèques spécifiquement pour ces langues. Par exemple, le compositeur de PHP et Rubygems de Ruby.
Node.js (un moteur JavaScript autonome) est livré avec NPM. Si vous n'êtes pas familier avec le NPM, nous avons un grand guide pour débutant.
Par défaut, votre package NPM sera publié publiquement. Ne vous inquiétez pas! Vous pouvez également publier des forfaits privés, créer un registre privé ou éviter complètement de publier.
Pour publier votre package, votre projet a besoin d'un fichier package.json. Vous pouvez le faire manuellement ou utiliser l'assistant interactif. Pour démarrer l'assistant, tapez:
<code>// 在初始化时配置
var userAgent = new UserAgent({
commentSeparator: ';'
});
// 使用公共方法进行运行时配置
userAgent.setOption('commentSeparator', '-');
// 使用公共属性进行运行时配置
userAgent.commentSeparator = '-';
</code>Version doit correspondre à votre balise GIT. Assurez-vous également que vous disposez du fichier readme.md. Tout comme GitHub, NPM l'utilise comme une page qui rend votre package.
Après, vous pouvez publier votre package en tapant la commande suivante:
<code>var userAgent = new UserAgent; // 获取器，用于从所有产品中检索注释 userAgent.getComments(); // 用于打乱所有产品顺序的操作 userAgent.shuffleProducts(); </code>
c'est tout! Vous avez publié votre package NPM.
Il y a quelques années, un autre gestionnaire de packages appelé Bower est apparu. Cependant, ce gestionnaire de packages n'est pas conçu pour une langue spécifique, mais pour une plate-forme spécifique. Vous pouvez y trouver toutes les principales ressources frontales. Il est logique de publier votre package sur Bower si votre bibliothèque est compatible avec le navigateur.
Si vous n'êtes pas familier avec Bower, nous avons également un guide pour débutant.
Comme NPM, vous pouvez également configurer un référentiel privé. Vous pouvez également l'empêcher de publier complètement dans l'assistant.
Fait intéressant, au cours de la dernière année ou deux, beaucoup de gens semblent se tourner vers le NPM pour les ressources frontales. Bien que le package NPM soit principalement JavaScript, de nombreux packages frontaux sont également publiés sur NPM. Quoi qu'il en soit, Bower est toujours très populaire, donc je vous recommande certainement de publier votre colis à Bower aussi.
Ai-je mentionné que Bower est en fait un module NPM et a été initialement inspiré par cela? La commande est très similaire. Pour générer un fichier bower.json, Type:
<code>// 以空的UserAgent字符串开始
var userAgent = new UserAgent;
// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);
// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();
// 对引擎产品进行更多更改
engine.setComment('Hello World');
// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>
<code>// 在初始化时配置
var userAgent = new UserAgent({
commentSeparator: ';'
});
// 使用公共方法进行运行时配置
userAgent.setOption('commentSeparator', '-');
// 使用公共属性进行运行时配置
userAgent.commentSeparator = '-';
</code>Conclusion
De nombreuses tâches que j'ai mentionnées sont faciles à automatiser, comme l'exécution de tests, la création de balises, la mise à jour des versions dans package.json et la republication de vos packages vers NPM et Bower. C'est là que vous entrez dans le domaine de l'intégration continue et utilisez des outils comme Travis CI ou Jenkins. J'ai mentionné plus tôt à propos de l'article de Tim Evko en aborde également.
Avez-vous construit et publié la bibliothèque? Veuillez partager dans la section des commentaires ci-dessous!
Questions fréquemment posées (FAQ) sur la conception et la construction de votre propre bibliothèque JavaScript
Comment commencer à créer des bibliothèques JavaScript?
Comment tester ma bibliothèque JavaScript?
Comment enregistrer ma bibliothèque JavaScript?
Il existe plusieurs façons de distribuer des bibliothèques JavaScript. Un moyen courant consiste à le publier à un gestionnaire de packages comme NPM. Cela permet à d'autres développeurs d'installer facilement votre bibliothèque à l'aide de commandes simples. Vous pouvez également distribuer votre bibliothèque en l'hébergeant sur un CDN (Network de distribution de contenu) ou en fournissant un lien de téléchargement sur votre site Web.
La maintenance des bibliothèques JavaScript comprend la correction des bogues, l'ajout de nouvelles fonctionnalités et le maintien de la bibliothèque en synchronisation avec les dernières normes et pratiques JavaScript. Il est important de tester régulièrement votre bibliothèque et d'écouter les commentaires des utilisateurs. Vous pouvez également envisager le versioning de votre bibliothèque afin que les utilisateurs puissent choisir d'utiliser une version stable ou une dernière version avec de nouvelles fonctionnalités.
Pour vous assurer que votre bibliothèque JavaScript est efficace, vous devez vous concentrer sur la rédaction du code concis et effacer. Évitez le calcul et l'allocation de mémoire inutiles. Utilisez des outils comme Chrome Devtools pour analyser votre bibliothèque et identifier tous les goulots d'étranglement de performances. Vous pouvez également envisager de compresser votre bibliothèque pour réduire la taille de son fichier et augmenter le temps de chargement.
Étant donné que chaque navigateur interprète JavaScript différemment, assurer la compatibilité du navigateur peut être un défi. Vous pouvez utiliser des outils comme Babel pour convertir votre code en une version JavaScript qui est compatible avec les anciens navigateurs. Vous devez également tester votre bibliothèque dans différents navigateurs pour identifier et résoudre tout problème de compatibilité.
La gestion des erreurs est une partie importante du développement de bibliothèques JavaScript. Vous devez vous efforcer de fournir des messages d'erreur clairs et utiles pour aider les utilisateurs à comprendre ce qui ne va pas. Vous pouvez utiliser le bloc Try / Catch pour attraper et gérer les erreurs. Vous pouvez également envisager de fournir un moyen de permettre aux utilisateurs de signaler les erreurs et les problèmes.
Il existe plusieurs façons d'obtenir des commentaires sur votre bibliothèque JavaScript. Vous pouvez demander à d'autres développeurs d'examiner votre code, de publier votre bibliothèque sur des forums ou des médias sociaux, ou de le publier sur un gestionnaire de packages comme NPM et de demander des commentaires. Vous devez être ouvert aux critiques et être disposé à apporter des modifications en fonction des commentaires que vous recevez.
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!
Est-il nécessaire de mettre à niveau Windows 11 ?
qu'est-ce que la fonction
Comment utiliser la fonction mois
BatterieMon
js actualiser la page actuelle
API de Google Maps
Que faire si Linux demande Aucun fichier ou répertoire de ce type lors de l'exécution d'un fichier
Comment utiliser la fonction countif
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
