L'étude du code source peut sans aucun doute changer la trajectoire de votre carrière de développeur. Même en regardant sous la surface, ne serait-ce qu'un niveau, vous pouvez vous démarquer de la plupart des développeurs moyens.  C'est la première étape vers la maîtrise !  Voici une histoire personnelle : dans mon travail actuel dans une startup d'IA/ML, l'équipe n'arrivait pas à comprendre comment transférer les données Neo4j du serveur vers le frontend pour une visualisation, et ils avaient une présentation en 12 heures. J'ai été embauché en tant que freelance, et on pouvait clairement voir la panique. Le problème était que les données renvoyées par Neo4j n'étaient pas au format correct attendu par l'outil de visualisation,   . neo4jd3  Imaginez ceci : Neo4jd3 attend un triangle et Neo4j renvoie un carré. C'est une incompatibilité !   Nous pourrions bientôt faire de la science des données graphiques avec JavaScript et Neo4j dans   ! Cette image est nostalgique. Mastered  Il n'y avait que deux choix : refaire tout le backend Neo4j ou étudier le code source de Neo4jd3, déterminer le format attendu, puis créer un adaptateur pour transformer le carré en triangle.     neo4jd3 <- adapter <- Neo4j  Mon cerveau a choisi de lire le code source par défaut et j'ai créé un adaptateur :   . neo4jd3-ts   import createNeoChart, { NeoDatatoChartData } from "neo4jd3-ts";  L'adaptateur est   , et tout le reste appartient à l'histoire. J'ai pris cette leçon à cœur et, à chaque fois que j'en ai l'occasion, je descends d'un niveau dans chaque outil que j'utilise. C'est devenu si courant que parfois je ne lis même pas la documentation. NeoDatatoChartData  Cette approche a changé ma carrière de manière spectaculaire. Tout ce que je fais ressemble à de la magie. En quelques mois, j'ai dirigé des migrations et des projets de serveurs critiques, tout cela parce que j'ai fait un pas vers la source.  C'est de cela dont il s'agit dans cette série : ne pas se contenter de l'API, mais aller au-delà, apprendre à recréer ces outils. Sortir de la moyenne dans ce monde de battage médiatique autour de l'IA, c'est ce qui fait qu'un développeur est d'une valeur inestimable !  Mon objectif avec cette série est d’étudier les bibliothèques et outils JavaScript populaires, de découvrir ensemble comment ils fonctionnent et quels modèles nous pouvons en tirer, un outil à la fois.  Étant donné que je suis principalement un ingénieur backend (full stack, oui, mais gérant le backend 90 % du temps), il n'y a pas de meilleur outil pour commencer qu'Express.js.  Je suppose que vous avez de l'expérience en programmation et une bonne maîtrise des fondamentaux de la programmation ! Vous pouvez être classé comme débutant avancé.  Il sera très difficile et fastidieux d'essayer d'apprendre/d'enseigner le code source tout en enseignant les fondamentaux. Vous pouvez rejoindre la série, mais attendez-vous à ce que ce soit difficile. Je ne peux pas tout couvrir, mais je ferai de mon mieux.  Cet article est antérieur à Express pour une raison : j'ai décidé de couvrir une très petite bibliothèque dont dépend Express,   , qui, au moment où j'écris ces lignes, compte 27 181 495 téléchargements et seulement 26 lignes de code. merge-descriptors  Cela nous donnera l'occasion d'établir une structure et me permettra d'introduire les fondamentaux des objets qui sont essentiels dans la construction de modules JavaScript.  Installation  Avant de continuer, assurez-vous que vous disposez du   d'Express et   dans votre système. De cette façon, vous pouvez l'ouvrir dans un IDE et je peux vous guider avec les numéros de ligne sur lesquels nous recherchons. code source des descripteurs de fusion  Express est une bibliothèque complète. Nous allons couvrir tout ce que nous pouvons dans quelques articles avant de passer à un autre outil.  Ouvrez votre source Express dans votre IDE, de préférence avec des numéros de ligne, accédez au dossier   et ouvrez le fichier   , le fichier d'entrée. lib express.js  Sur la ligne 17, voici notre première bibliothèque :   var mixin = require('merge-descriptors');  L'utilisation se trouve aux lignes 42 et 43 :   mixin(app, EventEmitter.prototype, false); mixin(app, proto, false);  Avant même d'explorer ce qui se passe ici, nous devons prendre du recul et parler des objets en JavaScript, au-delà de la structure des données. Nous parlerons de la composition, de l'héritage, des prototypes et des mixins, le titre de cet article.  L'objet JavaScript  Fermez le code source d'Express et créez un nouveau dossier quelque part pour suivre notre apprentissage de ces principes fondamentaux d'objet cruciaux.  Un objet est une encapsulation de données et de comportements, au cœur de   . Fait amusant : presque tout dans JavaScript est un objet. la programmation orientée objet (POO)   const person = { // data name: "Jane", age: 0, // behavior grow(){ this.age += 1; } };  Tout ce qui se trouve entre les accolades ouvrantes et fermantes dans l'objet   est appelé   . C'est important. person propriétés propres de l'objet  Les propriétés propres sont celles directement sur l'objet.   ,   et   sont des propriétés propres à   . name age grow person  Ceci est important car chaque objet JavaScript possède une propriété   . Encodons l'objet ci-dessus dans un plan de fonction pour nous permettre de créer dynamiquement des objets   . prototype person   function createNewPerson(name, age){ this.name = name; this.age = age; } createNewPerson.prototype.print = function(){ console.log(`${this.name} is ${this.age}`); }; const john = new createNewPerson("John", 32);  Le prototype est la manière dont les objets JavaScript héritent des propriétés et des méthodes d'autres objets. La différence entre   et   se situe lors de l'accès à une propriété d'un objet : Own Properties Prototype   john.name; // access  JavaScript recherchera d'abord   , car elles ont une priorité élevée. S'il ne trouve pas la propriété, il recherche de manière récursive dans l'objet   de l'objet jusqu'à ce qu'il trouve null et génère une erreur. Own Properties prototype  Un objet prototype peut hériter d'un autre objet via son propre prototype. C'est ce qu'on appelle une chaîne de prototypes.   console.log(john.hasOwnProperty('name')); // true console.log(john.hasOwnProperty('print')); // false, it's in the prototype  Cependant,   fonctionne sur   : print john   john.print(); // "John is 32"  C'est pourquoi JavaScript est défini comme un langage basé sur des prototypes. Nous pouvons faire bien plus avec les prototypes que simplement ajouter des propriétés et des méthodes, comme l'héritage.  Le « bonjour le monde » de l'héritage est l'objet mammifère. Recréons-le avec JavaScript.   // our Mammal blueprint function Mammal(name) { this.name = name; } Mammal.prototype.breathe = function() { console.log(`${this.name} is breathing.`); };  En JavaScript, il existe une fonction statique à l'intérieur de l'objet   : Object   Object.create();  Il crée un objet de manière similaire à   et   , mais la différence est que   peut prendre un prototype comme paramètre pour hériter. {} new functionBlueprint create   // we use a cat blueprint function here (implemented below) Cat.prototype = Object.create(Mammal.prototype); // correction after we inherited all the properties Cat.prototype.constructor = Cat;  Maintenant,   aura la méthode   trouvée dans   , mais la chose importante à savoir est que   pointe vers   comme son prototype. Cat breathe Mammal Cat Mammal  Explication:    : Nous définissons d’abord la fonction   et ajoutons une méthode   à son prototype. Mammal Blueprint Mammal breathe    : nous créons la fonction   et définissons   sur   . Cela fait hériter le prototype   de   , mais cela change le pointeur   en   . Héritage de Cat Cat Cat.prototype Object.create(Mammal.prototype) Cat Mammal constructor Mammal    : nous corrigeons le   pour qu'il pointe vers   , garantissant ainsi que l'objet   conserve son identité tout en héritant des méthodes de   . Enfin, nous ajoutons une méthode   à   . Correction du constructeur Cat.prototype.constructor Cat Cat Mammal meow Cat  Cette approche permet à l'objet   d'accéder aux méthodes de   (comme   ) et de son propre prototype (comme   ). Cat Mammal breathe meow  Nous devons corriger cela. Créons l'exemple complet :   function Cat(name, breed) { this.name = name; this.breed = breed; } Cat.prototype = Object.create(Mammal.prototype); // cat prototype pointing to mammal // correction after we inherited all the properties Cat.prototype.constructor = Cat; // we are re-pointing a pointer, the inherited properties are still there Cat.prototype.meow = function() { console.log(`${this.name} is meowing.`); };  Pour comprendre le   , vous devez connaître les pointeurs. Lorsque nous héritons de   avec   , il change le pointeur de notre prototype   en   , ce qui est faux. Nous voulons toujours que notre   soit son propre individu, malgré le fait qu'il ait le parent   . Cat.prototype.constructor = Cat Mammal Object.create Cat Mammal Cat Mammal  C'est pourquoi nous devons corriger cela.  Dans cet exemple,   hérite de   en utilisant la chaîne de prototypes. L'objet   peut accéder aux méthodes   et   . Cat Mammal Cat breathe meow   const myCat = new Cat("Misty", "Ragdoll"); myCat.breathe(); // Misty is breathing. myCat.meow(); // Misty is meowing.  Nous pouvons créer un chien héritant également du mammifère :   function Dog(name, breed) { this.name = name; this.breed = breed; } Dog.prototype = Object.create(Mammal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function() { console.log(`${this.name} is barking.`); }; const myDog = new Dog('Buddy', 'Golden Retriever'); myDog.breathe(); // Buddy is breathing. myDog.bark(); // Buddy is barking.  Nous avons créé l'héritage classique de base, mais pourquoi est-ce important ? Je pensais que nous parlions du code source !  Oui, c'est vrai, mais les prototypes sont au cœur de la construction de modules efficaces et flexibles, au-delà de l'héritage. Même les modules simples et bien écrits sont remplis d'objets prototypes. Nous ne faisons que poser les bases.  L'alternative à l'héritage est la composition d'objets, qui prend deux ou plusieurs objets et les fusionne pour former un « super » objet.  Les mixins permettent aux objets d'emprunter des méthodes à d'autres objets sans utiliser l'héritage. Ils sont pratiques pour partager le comportement entre des objets non liés.  C'est ce que fait notre première exploration : la bibliothèque   que nous avons promis de couvrir en premier. merge-descriptors  Module de fusion de descripteurs  Nous avons déjà vu où et comment il est utilisé dans Express. Nous le connaissons maintenant pour la composition d'objets.  A la ligne 17, voici notre première bibliothèque :   var mixin = require('merge-descriptors');  L'utilisation se trouve aux lignes 42 et 43 :   mixin(app, EventEmitter.prototype, false); mixin(app, proto, false);  Avec ce que nous savons, nous pouvons déjà déduire que   compose   et   dans un objet appelé   . mixin EventEmitter.prototype proto app  Nous aborderons   lorsque nous commencerons à parler d’Express. app  Voici l'intégralité du code source des   : merge-descriptors   'use strict'; function mergeDescriptors(destination, source, overwrite = true) { if (!destination) { throw new TypeError('The `destination` argument is required.'); } if (!source) { throw new TypeError('The `source` argument is required.'); } for (const name of Object.getOwnPropertyNames(source)) { if (!overwrite && Object.hasOwn(destination, name)) { // Skip descriptor continue; } // Copy descriptor const descriptor = Object.getOwnPropertyDescriptor(source, name); Object.defineProperty(destination, name, descriptor); } return destination; } module.exports = mergeDescriptors;  Dès le début, regardez toujours comment la fonction est utilisée et les paramètres qu'elle prend :   // definition mergeDescriptors(destination, source, overwrite = true) // usage var mixin = require('merge-descriptors'); mixin(app, EventEmitter.prototype, false); mixin(app, proto, false);    est notre destination. Nous savons que   signifie composition d'objets. En gros, ce que fait ce paquet, c'est composer l'objet source dans l'objet de destination, avec une option d'écrasement. App mixin  Le remplacement, par hypothèse, se produit si   (destination) possède une propriété exacte que la source possède, en cas   remplacement, sinon laissez cette propriété intacte et ignorez. app true  Nous savons que les objets ne peuvent pas avoir deux fois la même propriété. Dans les paires clé-valeur (objets), les clés doivent être uniques.  Avec Express, l'écrasement est   . false  Voici les règles de base à respecter : gérez toujours les erreurs attendues :   if (!destination) { throw new TypeError('The `destination` argument is required.'); } if (!source) { throw new TypeError('The `source` argument is required.'); }  C'est là que ça devient intéressant : la ligne 12.   for (const name of Object.getOwnPropertyNames(source)) {  D'en haut, nous savons ce que signifie   , donc   signifie clairement obtenir les clés de ses propres propriétés. OwnProperty getOwnPropertyNames   const person = { // data name: "Jane", age: 0, // behavior grow() { this.age += 1; } }; Object.getOwnPropertyNames(person); // [ 'name', 'age', 'grow' ]  Il renvoie les clés sous forme de tableau, et nous bouclons sur ces clés dans l'instance suivante :   for (const name of Object.getOwnPropertyNames(source)) {  Ce qui suit vérifie si la destination et la source ont la même clé sur laquelle nous bouclons actuellement :   if (!overwrite && Object.hasOwn(destination, name)) { // Skip descriptor continue; }  Si overwrite est faux, ignorez cette propriété ; n'écrasez pas. C'est ce que fait   : il propulse la boucle vers l'itération suivante et n'exécute pas le code en dessous, qui est le code suivant : continue   // Copy descriptor const descriptor = Object.getOwnPropertyDescriptor(source, name); Object.defineProperty(destination, name, descriptor);  Nous savons déjà ce que signifie   . Le nouveau mot est   . Testons cette fonction sur notre propre objet   : getOwnProperty descriptor person   const person = { // data name: "Jane", age: 0, // behavior grow() { this.age += 1; } }; Object.getOwnPropertyDescriptor(person, "grow"); // { // value: [Function: grow], // writable: true, // enumerable: true, // configurable: true // }  Elle renvoie notre fonction   comme valeur, et la ligne suivante est explicite : grow   Object.defineProperty(destination, name, descriptor);  Il s'agit de prendre notre descripteur de la source et de l'écrire dans la destination. Il copie les propriétés propres de la source vers notre objet de destination en tant que ses propres propriétés.  Faisons un exemple dans notre objet   : person   const val = { value: function isAlien() { return false; }, enumerable: true, writable: true, configurable: true, }; Object.defineProperty(person, "isAlien", val);    doit maintenant avoir la propriété   définie. person isAlien  En résumé, ce module hautement téléchargé copie ses propres propriétés d'un objet source vers une destination avec une option d'écrasement.  Nous avons couvert avec succès notre premier module dans ce   , avec des choses encore plus intéressantes à venir. niveau de code source  Il s'agissait d'une introduction. Nous avons commencé par couvrir les fondamentaux nécessaires à la compréhension du module et, en conséquence, à la compréhension des modèles de la plupart des modules, à savoir la composition et l'héritage d'objets. Enfin, nous avons parcouru le module   . merge-descriptors  Ce modèle sera courant dans la plupart des articles. Si je pense qu'il y a des fondamentaux nécessaires à couvrir, nous les aborderons dans la première section, puis nous aborderons le code source.  Heureusement,   sont utilisés dans Express, qui est notre objectif de départ pour l'étude du code source. Attendez-vous donc à plus d'articles sur le code source d'Express.js jusqu'à ce que nous estimions avoir suffisamment bien utilisé Express, puis passez à un autre module ou outil comme Node.js. merge-descriptors  En attendant, vous pouvez vous lancer dans un défi en naviguant jusqu'au fichier de test dans les descripteurs de fusion et en lisant l'intégralité du fichier. Il est important de lire la source par vous-même, d'essayer de comprendre ce qu'elle fait et ce qu'elle teste, puis de la casser, oui, et de la réparer à nouveau ou d'ajouter d'autres tests !  Si vous êtes intéressé par un contenu plus exclusif, pratique et plus long pour améliorer vos compétences en programmation, vous pouvez en trouver plus sur   . Ko-fi

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Hire Me

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Make resilience your competitive advantage

Comment étudier le code source : prototypes d'objets et mixins dans Express.js

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Télégramme : le pont de Crypto Island vers le continent

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Télégramme : le pont de Crypto Island vers le continent

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Des forums aux flux : comment les algorithmes des réseaux sociaux façonnent l'interaction numérique

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps