Estudiar el código fuente puede cambiar sin duda la trayectoria de tu carrera como desarrollador. Incluso mirar más allá de la superficie, aunque sea un nivel, puede diferenciarte de la mayoría de los desarrolladores promedio.  ¡Es el primer paso hacia la maestría!  Aquí hay una historia personal: en mi trabajo actual en una startup de IA/ML, el equipo no podía descubrir cómo obtener datos de Neo4j desde el servidor hasta la interfaz para una visualización, y tuvieron que hacer una presentación en 12 horas. Me contrataron como freelance y se podía ver claramente el pánico. El problema era que los datos devueltos por Neo4j no estaban en el formato correcto esperado por la herramienta de visualización,   . neo4jd3  Imagínese lo siguiente: Neo4jd3 espera un triángulo y Neo4j devuelve un cuadrado. ¡Ahí está la incompatibilidad!   ¡Pronto podremos hacer ciencia de datos gráficos con JavaScript y Neo4j en   ! Esta imagen es nostálgica. Mastered  Sólo había dos opciones: rehacer todo el backend de Neo4j o estudiar el código fuente de Neo4jd3, averiguar el formato esperado y luego crear un adaptador para transformar el cuadrado en un triángulo.     neo4jd3 <- adapter <- Neo4j  Mi cerebro decidió leer el código fuente y creé un adaptador:   . neo4jd3-ts   import createNeoChart, { NeoDatatoChartData } from "neo4jd3-ts";  El adaptador es   y todo lo demás es historia. Tomé esta lección en serio y, cada vez que tengo la oportunidad, bajo un nivel más bajo en cada herramienta que uso. Se ha vuelto tan común que a veces ni siquiera leo la documentación. NeoDatatoChartData  Este enfoque cambió mi carrera enormemente. Todo lo que hago parece magia. En pocos meses, estaba liderando migraciones y proyectos críticos de servidores, todo porque di un paso hacia la fuente.  De eso se trata esta serie: no conformarse con la API, sino ir más allá y aprender a recrear estas herramientas. ¡Dejar de ser promedio en este mundo de exageraciones sobre la IA es lo que hace que un desarrollador sea más valioso que el promedio!  Mi plan con esta serie es estudiar las bibliotecas y herramientas de JavaScript más populares, descubriendo juntos cómo funcionan y qué patrones podemos aprender de ellas, una herramienta a la vez.  Dado que soy principalmente un ingeniero backend (full stack, sí, pero manejo el backend el 90% del tiempo), no hay mejor herramienta para comenzar que Express.js.  Supongo que tienes experiencia en programación y un buen conocimiento de los fundamentos de la programación. Es posible que se te clasifique como principiante avanzado.  Será muy difícil y tedioso intentar aprender/enseñar el código fuente mientras se enseñan los fundamentos. Puedes unirte a la serie, pero prepárate para que sea difícil. No puedo cubrir todo, pero intentaré hacer todo lo que pueda.  Este artículo es anterior a Express por una razón: decidí cubrir una biblioteca muy pequeña de la que depende Express,   , que, mientras escribo esto, tiene 27.181.495 descargas y apenas 26 líneas de código. merge-descriptors  Esto nos dará la oportunidad de establecer una estructura y me permitirá presentar los fundamentos de los objetos que son cruciales en la creación de módulos de JavaScript.  Configuración  Antes de continuar, asegúrese de tener el   de Express y   en su sistema. De esta manera, puede abrirlo en un IDE y yo puedo guiarlo con números de línea sobre dónde estamos buscando. código fuente los descriptores de combinación  Express es una biblioteca muy completa. Trataremos todo lo que podamos en unos pocos artículos antes de pasar a otra herramienta.  Abra el código fuente de Express en su IDE, preferiblemente con números de línea, navegue a la carpeta   y abra el archivo   , el archivo de entrada. lib express.js  En la línea 17, aquí está nuestra primera biblioteca:   var mixin = require('merge-descriptors');  El uso está en las líneas 42 y 43:   mixin(app, EventEmitter.prototype, false); mixin(app, proto, false);  Antes de explorar lo que sucede aquí, debemos dar un paso atrás y hablar sobre los objetos en JavaScript, más allá de la estructura de datos. Hablaremos de composición, herencia, prototipos y mixins, el título de este artículo.  El objeto JavaScript  Cierre el código fuente de Express y cree una nueva carpeta en algún lugar para seguir mientras aprendemos estos conceptos fundamentales de los objetos.  Un objeto es una encapsulación de datos y comportamiento, que es el núcleo de   . Dato curioso: casi todo en JavaScript es un objeto. la programación orientada a objetos (POO)   const person = { // data name: "Jane", age: 0, // behavior grow(){ this.age += 1; } };  Todo lo que se encuentra entre las llaves de apertura y cierre en el objeto   se denomina   . Esto es importante. person propiedades propias del objeto  Las propiedades propias son aquellas que están directamente relacionadas con el objeto.   ,   y   son propiedades propias de   . name age grow person  Esto es importante porque cada objeto de JavaScript tiene una propiedad   . Codifiquemos el objeto anterior en un modelo de función que nos permita crear objetos   de forma dinámica. 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);  El prototipo es la forma en que los objetos de JavaScript heredan propiedades y métodos de otros objetos. La diferencia entre   y   es cuando se accede a una propiedad de un objeto: Own Properties Prototype   john.name; // access  JavaScript buscará primero en   , ya que tienen una alta prioridad. Si no encuentra la propiedad, busca en el   del objeto de forma recursiva hasta que encuentra un valor nulo y genera un error. Own Properties prototype  Un objeto prototipo puede heredar de otro objeto a través de su propio prototipo. Esto se denomina cadena de prototipos.   console.log(john.hasOwnProperty('name')); // true console.log(john.hasOwnProperty('print')); // false, it's in the prototype  Sin embargo,   sobre   : print john   john.print(); // "John is 32"  Por eso, JavaScript se define como un lenguaje basado en prototipos. Con los prototipos podemos hacer más que simplemente añadir propiedades y métodos, como la herencia.  El "hola mundo" de la herencia es el objeto mamífero. Vamos a recrearlo con JavaScript.   // our Mammal blueprint function Mammal(name) { this.name = name; } Mammal.prototype.breathe = function() { console.log(`${this.name} is breathing.`); };  En JavaScript, hay una función estática dentro del objeto   : Object   Object.create();  Crea un objeto de manera similar a   y a   , pero la diferencia es que   puede tomar un prototipo como parámetro para heredar. {} 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;  Ahora   tendrá el método   que se encuentra en   , pero lo importante es saber que   está señalando a   como su prototipo. Cat breathe Mammal Cat Mammal  Explicación:    : primero definimos la función   y agregamos un método   a su prototipo. Plano de mamífero Mammal breathe    : creamos la función   y establecemos   en   . Esto hace que el prototipo   herede de   , pero cambia el puntero   a   . Herencia de Cat Cat Cat.prototype Object.create(Mammal.prototype) Cat Mammal constructor Mammal    : corregimos el   para que apunte a   , lo que garantiza que el objeto   conserve su identidad al tiempo que hereda los métodos de   . Por último, agregamos un método   a   . Corrección del constructor Cat.prototype.constructor Cat Cat Mammal meow Cat  Este enfoque permite que el objeto   acceda a métodos tanto de   (como   ) como de su propio prototipo (como   ). Cat Mammal breathe meow  Necesitamos corregirlo. Vamos a crear el ejemplo completo:   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.`); };  Para entender   , es necesario conocer los punteros. Cuando heredamos de   con   , cambia el puntero de nuestro prototipo   a   , lo cual es incorrecto. Aún queremos que nuestro   sea su propio individuo, a pesar de tener el padre   . Cat.prototype.constructor = Cat Mammal Object.create Cat Mammal Cat Mammal  Por eso tenemos que corregirlo.  En este ejemplo,   hereda de   mediante la cadena de prototipos. El objeto   puede acceder a los métodos   y   . Cat Mammal Cat breathe meow   const myCat = new Cat("Misty", "Ragdoll"); myCat.breathe(); // Misty is breathing. myCat.meow(); // Misty is meowing.  Podemos crear un perro también heredando del mamífero:   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.  Hemos creado una herencia clásica básica, pero ¿por qué es importante? ¡Creía que estábamos cubriendo el código fuente!  Sí, es cierto, pero los prototipos son el núcleo de la creación de módulos eficientes y flexibles, más allá de la herencia. Incluso los módulos simples y bien escritos están plagados de objetos prototipo. Solo estamos sentando las bases.  La alternativa a la herencia es la composición de objetos, que toma dos o más objetos y los fusiona para formar un "súper" objeto.  Los mixins permiten que los objetos tomen prestados métodos de otros objetos sin usar la herencia. Son útiles para compartir comportamientos entre objetos no relacionados.  Esto es lo que hace nuestra primera exploración: la biblioteca   que prometimos cubrir primero. merge-descriptors  Módulo de descriptores de fusión  Ya hemos visto dónde y cómo se utiliza en Express. Ahora sabemos cómo se utiliza en la composición de objetos.  En la línea 17, aquí está nuestra primera biblioteca:   var mixin = require('merge-descriptors');  El uso está en las líneas 42 y 43:   mixin(app, EventEmitter.prototype, false); mixin(app, proto, false);  Con lo que sabemos, ya podemos deducir que   está componiendo   y   en un objeto llamado   . mixin EventEmitter.prototype proto app  Llegaremos a   cuando empecemos a hablar de Express. app  Este es el código fuente completo para   : 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;  Desde el principio, fíjate siempre en cómo se utiliza la función y los parámetros que toma:   // definition mergeDescriptors(destination, source, overwrite = true) // usage var mixin = require('merge-descriptors'); mixin(app, EventEmitter.prototype, false); mixin(app, proto, false);    es nuestro destino. Sabemos que   significa composición de objetos. Básicamente, lo que hace este paquete es componer el objeto de origen en el objeto de destino, con una opción para sobrescribirlo. App mixin  Sobrescribir, asumiendo, es si   (destino) tiene una propiedad exacta que la fuente tiene, en caso   sobrescribir, de lo contrario dejar esa propiedad intacta y omitir. app true  Sabemos que los objetos no pueden tener la misma propiedad dos veces. En los pares clave-valor (objetos), las claves deben ser únicas.  Con Express, la sobrescritura es   . false  Lo siguiente es una gestión básica, siempre maneje los errores esperados:   if (!destination) { throw new TypeError('The `destination` argument is required.'); } if (!source) { throw new TypeError('The `source` argument is required.'); }  Aquí es donde se pone interesante: línea 12.   for (const name of Object.getOwnPropertyNames(source)) {  Desde arriba, sabemos lo que significa   , por lo que   claramente significa obtener las claves de las propiedades propias. OwnProperty getOwnPropertyNames   const person = { // data name: "Jane", age: 0, // behavior grow() { this.age += 1; } }; Object.getOwnPropertyNames(person); // [ 'name', 'age', 'grow' ]  Devuelve las claves como una matriz y estamos recorriendo esas claves en la siguiente instancia:   for (const name of Object.getOwnPropertyNames(source)) {  Lo siguiente verifica si el destino y la fuente tienen la misma clave que estamos recorriendo actualmente:   if (!overwrite && Object.hasOwn(destination, name)) { // Skip descriptor continue; }  Si overwrite es falso, omite esa propiedad; no sobrescribas. Eso es lo que hace   : impulsa el bucle a la siguiente iteración y no ejecuta el código subyacente, que es el siguiente: continue   // Copy descriptor const descriptor = Object.getOwnPropertyDescriptor(source, name); Object.defineProperty(destination, name, descriptor);  Ya sabemos qué significa   . La nueva palabra es   . Probemos esta función en nuestro propio objeto   : 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 // }  Devuelve nuestra función   como valor y la siguiente línea se explica por sí sola: grow   Object.defineProperty(destination, name, descriptor);  Toma nuestro descriptor de la fuente y lo escribe en el destino. Copia las propiedades propias de la fuente en nuestro objeto de destino como si fueran sus propias propiedades.  Hagamos un ejemplo en nuestro objeto   : person   const val = { value: function isAlien() { return false; }, enumerable: true, writable: true, configurable: true, }; Object.defineProperty(person, "isAlien", val);  Ahora   debería tener la propiedad   definida. person isAlien  En resumen, este módulo altamente descargado copia sus propias propiedades de un objeto de origen a un destino con una opción para sobrescribir.  Hemos cubierto con éxito nuestro primer módulo en este   y habrá más cosas interesantes por venir. nivel de código fuente  Esta fue una introducción. Comenzamos cubriendo los conceptos básicos necesarios para comprender el módulo y, como resultado, comprender los patrones en la mayoría de los módulos, que son la composición y la herencia de objetos. Por último, exploramos el módulo   . merge-descriptors  Este patrón será el predominante en la mayoría de los artículos. Si considero que hay aspectos fundamentales que es necesario cubrir, los repasaremos en la primera sección y luego cubriremos el código fuente.  Afortunadamente, en Express se utilizan   , que es nuestro objetivo como estudio inicial del código fuente. Por lo tanto, esperamos más artículos sobre el código fuente de Express.js hasta que consideremos que hemos tenido una experiencia lo suficientemente buena con Express, luego cambiemos a otro módulo o herramienta como Node.js. merge-descriptors  Mientras tanto, lo que puedes hacer como desafío es navegar hasta el archivo de prueba en los descriptores de combinación y leer el archivo completo. Leer el código fuente por tu cuenta es importante. Intenta averiguar qué hace y qué prueba, y luego rómpelo. Sí, y arréglalo de nuevo o agrega más pruebas.  Si estás interesado en contenido más exclusivo, práctico y más extenso para mejorar tus habilidades de programación, puedes encontrar más en   . 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

Este audio es producido en el idioma original de la historia!

Cómo estudiar el código fuente: prototipos de objetos y mixins en Express.js

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Telegram: el puente de Crypto Island hacia el continente

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Telegram: el puente de Crypto Island hacia el continente

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps