Créez votre première bibliothèque JavaScript

Avez-vous déjà été étonné de la magie de réact? Vous êtes-vous déjà demandé comment fonctionne Dojo? Avez-vous déjà été curieux de l'opération intelligente de JQuery? Dans ce tutoriel, nous nous faufilerons dans les coulisses et essaierons de construire une version super simplifiée de jQuery.

Nous utilisons des bibliothèques JavaScript presque tous les jours. Qu'il s'agisse d'implémenter des algorithmes, de fournir des abstractions d'API ou de manipuler DOMS, les bibliothèques remplissent de nombreuses fonctions sur la plupart des sites Web modernes.

Dans ce tutoriel, nous essaierons de créer une bibliothèque comme celle-ci à partir de zéro (c'est une version simplifiée bien sûr). Nous créerons une bibliothèque pour les opérations DOM, similaire à jQuery. Oui, c'est amusant, mais avant de vous exciter, permettez-moi de clarifier quelques points:

• Ce ne sera pas une bibliothèque entièrement en vedette. Nous allons écrire un ensemble solide de méthodes, mais ce n'est pas un jQuery complet. Nous en ferons assez pour vous donner une bonne compréhension des types de problèmes que vous rencontrerez lors de la construction de bibliothèques.
• Nous ne recherchons pas ici tous les navigateurs. Le code que nous avons écrit aujourd'hui devrait fonctionner sur Chrome, Firefox et Safari, mais peut ne pas fonctionner sur des navigateurs plus âgés tels que IE.
• Nous ne couvrirons pas toutes les utilisations possibles de notre bibliothèque. Par exemple, nos méthodes prend ne sont valides que lorsque vous leur transmettez nos instances de bibliothèque;

---

1. Framework pour la création de bibliothèques

Nous commencerons par le module lui-même. Nous utiliserons le module ECMAScript (ESM), une façon moderne d'importer et d'exporter du code sur le Web.

 Export Class Dome {Constructor (Selector) {}} 

Comme vous pouvez le voir, nous exportons une classe appelée dome , dont le constructeur acceptera un paramètre, mais il peut être de plusieurs types. S'il s'agit d'une chaîne, nous supposerons qu'il s'agit d'un sélecteur CSS, mais nous pouvons également accepter les résultats d'un seul nœud DOM ou document.QuerySelector pour simplifier la recherche d'éléments. S'il a l'attribut la longueur , nous saurons que nous avons une liste de nœuds. Nous stockons ces éléments dans this.elements , l'objet dome peut envelopper plusieurs éléments DOM, et nous devons parcourir chaque élément dans presque toutes les méthodes, donc ces utilitaires seront très pratiques.

Commençons par une fonction map qui accepte un paramètre et une fonction de rappel. Nous allons parcourir les éléments dans le tableau et collecter le contenu renvoyé par la fonction de rappel.

Nous avons également besoin d'une méthode foreach , par défaut, nous pouvons simplement transférer l'appel vers mapone . Il est facile de voir ce que fait cette fonction, mais la vraie question est, pourquoi en avons-nous besoin? Cela prend un peu ce que vous pourriez appeler le "concept de bibliothèque".

Brève discussion du concept

Si la construction d'une bibliothèque est simplement d'écrire du code, ce ne serait pas trop difficile à faire. Mais lorsque vous travaillez sur ce projet, la partie la plus difficile que j'ai trouvée était de décider comment certaines méthodes devraient fonctionner.

Bientôt, nous créerons un objet dome qui enveloppe plusieurs nœuds DOM ( $ ("li"). text () ), et vous obtiendrez une seule chaîne contenant tous les textes d'élément concaténés ensemble. Est-ce utile? Je ne pense pas, mais je ne sais pas ce qu'est une meilleure valeur de retour.

Pour ce projet, je retournerai le texte de plusieurs éléments en tant que tableau à moins qu'il n'y ait un seul élément dans le tableau; alors nous ne retournerons que la chaîne de texte, pas le tableau contenant un seul élément. Je pense que vous obtenez du texte pour un seul élément le plus souvent, nous avons donc optimisé pour cette situation. Cependant, si vous obtenez du texte pour plusieurs éléments, nous retournerons ce que vous pouvez utiliser.

Renvoie le codage

donc, mapone appellera d'abord map , puis renvoie un seul élément dans le tableau ou le tableau. Si vous ne savez toujours pas comment cela fonctionne, restez à l'écoute: vous verrez!

Notez que cela itère simplement sur les éléments et définit leur texte. Si nous obtenons, nous retournerons la méthode mapone de l'élément: si nous travaillons sur plusieurs éléments, cela renvoie un tableau;

La méthode html est presque la même que la méthode text , sauf qu'elle utilisera innerhtml .

 html (html) {if (typeof html! == "Undefined") {this.ForEach (el) {el.innerhtml = html;}); .  <hr> <ol start="5"> <li> <h2> Classe d'opération </h2> </li>  <p> Ensuite, nous devons être en mesure d'ajouter et de supprimer des classes, alors écrivons les méthodes <code> addClass </code> et <code> Restrolass </code>. </p> <p> Notre méthode <code> addClass </code> utilisera la méthode <code> classlist.add </code> sur chaque élément. Lorsque vous passez une chaîne, seule cette classe est ajoutée, et lorsque nous passons un tableau, nous allons itérer le tableau et ajouter toutes les classes qui y sont contenues. </p> <pre class="brush:php;toolbar:false"> addClass (classes) {return this.ForEach (fonction (el) {if (typeof classes! == "String") {for (const elclass of class) {el.classlist.add (elclass);}}  el.classlist.add (classes);}});  <p> Maintenant, qu'en est-il de supprimer la classe? Pour cela, vous faites presque la même chose, utilisez simplement la méthode <code> classlist.remove </code>. </p> <ol start="6"> <li> <h2> Utilisation d'attributs </h2> </li>  <p> Ensuite, ajoutons la fonction <code> attr </code>. Ce sera facile car c'est presque la même chose que notre méthode <code> html </code>. Comme ces méthodes, nous serons en mesure d'obtenir et de définir des propriétés en même temps: nous accepterons un nom et une valeur de propriété à définir, et un seul nom de propriété à obtenir. </p> <pre class="brush:php;toolbar:false">attr(attr, val) { if (typeof val !== "undefined") { return this.forEach(function (el) { el.setAttribute(attr, val); }); } else { return this.mapOne(function (el) { return el.getAttribute(attr); }); } } }

If val is defined, we will use the setAttribute method. Sinon, nous utiliserons la méthode getAttribute .

7. Créer des éléments

Nous devrions être en mesure de créer de nouveaux éléments, et toute bonne bibliothèque peut le faire. Bien sûr, cela n'a pas de sens comme méthode de la classe dome .

 Fonction Export Create (TagName, Attrs) {} 

Comme vous pouvez le voir, nous accepterons deux paramètres: le nom de l'élément et l'objet d'attribut. La plupart des propriétés seront appliquées via notre méthode attr , et le contenu texte sera appliqué à l'objet dome via la méthode texte . Voici comment tout cela est réellement fait:

 Fonction d'exportation Créer (TagName, attrs) {let el = new Dome ([Document.CreateElement (TagName)); , nous créons un élément et l'envoyons directement à l'objet New <code> dome </code>.  <p> Mais maintenant nous créons de nouveaux éléments, nous voulons les insérer dans le DOM, non? </p> <ol start="8"> <li> <h2> Ajouter et les éléments de préemption </h2> </li>  <p> Ensuite, nous écrivons les méthodes <code> APPEND </code> et <code> prend </code>. Ces fonctions sont un peu délicates, principalement parce qu'il existe plusieurs cas d'utilisation. Voici les choses que nous voulons faire: </p> <pre class="brush:php;toolbar:false"> dome1.append (dome2); dome1.prepend (dome2); 

nous voulons attacher ou préfixer:

• Plusieurs éléments existants vers un ou plusieurs éléments existants

J'utilise "Nouveau" pour représenter des éléments qui ne sont pas encore dans le DOM; les éléments existants sont déjà dans le DOM. Expliquons pas à pas étape par étape:

 append (els) {} 

Nous nous attendons à ce que els soit un objet dome . Une bibliothèque DOM complète l'acceptera comme un nœud ou une liste de nœuds, mais nous ne le ferons pas. Nous devons parcourir chacun de nos éléments, puis dedans, nous passons par chaque élément que nous voulons attacher.

Si nous apprenons, l'objet i de l'objet dome externe transmis en tant que paramètre ne contiendra que les nœuds originaux (non clonés). Donc, si nous appelons un seul élément à un seul élément, tous les nœuds impliqués feront partie de leurs méthodes respectives prend .

9. Supprimer l'élément

Pour l'exhaustivité, ajoutons une méthode Supprime . Ce sera très simple car nous avons juste besoin d'utiliser la méthode remontechild . Pour rendre les choses plus faciles, nous utiliserons la boucle foreach pour inverser la traversée, je vais utiliser la méthode reposechild pour inverser la traversée, et l'objet dome de chaque élément fonctionnera toujours correctement; Pas mal, non?

10. Utilisation des événements

Enfin, nous écrivons certaines fonctions de gestionnaire d'événements.

Voir la méthode sur , et nous en discuterons:

 sur (evt, fn) {return this.ForEach (fonction (el) {el.addeventListener (evt, fn, false);});} 

C'est très simple. Nous avons juste besoin de parcourir les éléments et d'utiliser la méthode AddEventListener . La fonction OFF (It Upooked Event Handler) est presque la même:

 OFF (EVT, FN) {return this.ForEach (fonction (el) {el.reMoveEventListener (EVT, fn, false);}); Code> Dome , il suffit de le mettre dans le script et de l'importer.  <pre class="brush:php;toolbar:false"> Importer {dome, création} à partir de "./dome.js" 

à partir de là, vous pouvez l'utiliser comme ceci:

 new Dome ("li") ... 

Assurez-vous que le script que vous importez est un module ES.

c'est tout!

J'espère que vous pourrez essayer notre petite bibliothèque et même l'étendre un peu. Comme je l'ai mentionné plus tôt, je l'ai mis sur github. N'hésitez pas à le débarrasser, à jouer et à envoyer des demandes de traction.

Permettez-moi de clarifier à nouveau: le but de ce tutoriel n'est pas de suggérer que vous devez toujours écrire votre propre bibliothèque. Il y a une équipe dédiée travaillant ensemble pour rendre la grande bibliothèque mature aussi bonne que possible. Le but ici est de vous donner un aperçu de ce qui pourrait arriver à l'intérieur de la bibliothèque; j'espère que vous avez appris ici.

Je vous recommande fortement de creuser dans certaines de vos bibliothèques préférées. Vous constaterez qu'ils ne sont pas aussi mystérieux que vous le pensez, et vous pouvez apprendre beaucoup. Voici quelques bons points de départ:

• 11 choses que j'ai apprises de JQuery Source Code (Paul Irish)
• Dans les coulisses de JQuery (James Padolsey)
• React 16: API de Deep Learning REWRITE COMPATIBLE POUR LE LIBRARY FRONT-ED UI LIBRARY UI

Ce post a été mis à jour avec Jacob. Jacob est développeur Web, écrivain technologique, pigiste et contributeur open source.

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!