Как изучать исходный код: прототипы объектов и миксины в Express.js

Изучение исходного кода, несомненно, может изменить траекторию вашей карьеры разработчика. Даже заглянув под поверхность всего на один уровень, вы сможете выделиться среди большинства среднестатистических разработчиков. Это первый шаг к мастерству! Вот личная история: в моей текущей работе в стартапе AI/ML команда не могла понять, как перенести данные Neo4j с сервера на фронтенд для визуализации, и они сделали презентацию через 12 часов. Меня пригласили в качестве фрилансера, и вы могли ясно видеть панику. Проблема была в том, что данные, возвращаемые Neo4j, не были в правильном формате, ожидаемом инструментом визуализации . neo4jd3 Представьте себе: Neo4jd3 ожидает треугольник, а Neo4j возвращает квадрат. Это несовместимое несоответствие прямо здесь! Скоро мы, возможно, займемся графовыми данными с JavaScript и Neo4j в ! Это изображение вызывает ностальгию. Mastered Было только два варианта: переделать весь бэкэнд Neo4j или изучить исходный код Neo4jd3, выяснить ожидаемый формат, а затем создать адаптер для преобразования квадрата в треугольник. neo4jd3 <- adapter <- Neo4j Мой мозг по умолчанию переключился на чтение исходного кода, и я создал адаптер: . neo4jd3-ts import createNeoChart, { NeoDatatoChartData } from "neo4jd3-ts"; Адаптер — , а все остальное — история. Я принял этот урок близко к сердцу, и при каждой возможности я спускаюсь на уровень ниже в каждом инструменте, который я использую. Это стало настолько распространенным, что иногда я даже не читаю документацию. NeoDatatoChartData Этот подход кардинально изменил мою карьеру. Все, что я делаю, похоже на магию. Через несколько месяцев я руководил критически важными миграциями серверов и проектами, и все потому, что я сделал шаг к источнику. Вот о чем эта серия: не довольствоваться API, а выходить за рамки, учиться воссоздавать эти инструменты. Вырваться из колеи в этом мире хайпа вокруг ИИ — вот что делает разработчика ценным за пределами среднего! В этой серии статей я планирую изучить популярные библиотеки и инструменты JavaScript, а также вместе разобраться, как они работают и какие закономерности мы можем у них изучить, по одному инструменту за раз. Поскольку я в основном работаю бэкенд-разработчиком (да, полного цикла, но 90% времени занимаюсь бэкендом), лучшего инструмента для начала, чем Express.js, не найти. Я предполагаю, что у вас есть опыт программирования и хорошее понимание основ программирования! Вас можно отнести к продвинутому новичку. Будет очень сложно и утомительно пытаться изучать/преподавать исходный код, одновременно обучая основам. Вы можете присоединиться к серии, но будьте готовы к тому, что будет сложно. Я не могу охватить все, но я постараюсь сделать все, что смогу. Эта статья написана до Express по следующей причине: я решил рассмотреть очень маленькую библиотеку, от которой зависит Express, , которая на момент написания статьи имела 27 181 495 загрузок и содержала всего 26 строк кода. merge-descriptors Это даст нам возможность создать структуру и позволит мне познакомить вас с основами объектов, которые имеют решающее значение при создании модулей JavaScript. Настраивать Прежде чем продолжить, убедитесь, что в вашей системе есть Express и . Таким образом, вы сможете открыть его в IDE, и я смогу указать вам с помощью номеров строк, где мы ищем. исходный код merge-descriptors Express — это мощная библиотека. Мы рассмотрим все, что сможем, в нескольких статьях, прежде чем перейдем к другому инструменту. Откройте исходный код Express в IDE, желательно с указанием номеров строк, перейдите в папку и откройте файл , файл входа. lib express.js В строке 17 представлена наша первая библиотека: var mixin = require('merge-descriptors'); Использование в строках 42 и 43: mixin(app, EventEmitter.prototype, false); mixin(app, proto, false); Прежде чем мы даже рассмотрим, что здесь происходит, нам нужно сделать шаг назад и поговорить об объектах в JavaScript, за пределами структуры данных. Мы обсудим композицию, наследование, прототипы и миксины — название этой статьи. Объект JavaScript Закройте исходный код Express и создайте где-нибудь новую папку, чтобы продолжить изучение этих важнейших основ объектов. Объект — это инкапсуляция данных и поведения, лежащая в основе . Интересный факт: почти все в JavaScript является объектом. объектно-ориентированного программирования (ООП) const person = { // data name: "Jane", age: 0, // behavior grow(){ this.age += 1; } }; Все, что находится между открывающимися и закрывающимися фигурными скобками в объекте , называется . Это важно. person собственными свойствами объекта Собственные свойства — это те, которые относятся непосредственно к объекту. , и — это собственные свойства . name age grow person Это важно, поскольку каждый объект JavaScript имеет свойство . Давайте закодируем указанный выше объект в функциональный план, чтобы иметь возможность динамически создавать объекты . 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); Прототип — это то, как объекты JavaScript наследуют свойства и методы от других объектов. Разница между и заключается в доступе к свойству объекта: Own Properties Prototype john.name; // access JavaScript сначала будет искать в , так как они имеют высокий приоритет. Если свойство не найдено, он рекурсивно ищет в собственном объекта, пока не найдет null и не выдаст ошибку. Own Properties prototype Объект-прототип может наследовать от другого объекта через свой собственный прототип. Это называется цепочкой прототипов. console.log(john.hasOwnProperty('name')); // true console.log(john.hasOwnProperty('print')); // false, it's in the prototype Однако работает на : print john john.print(); // "John is 32" Вот почему JavaScript определяется как язык, основанный на прототипах. С прототипами мы можем сделать больше, чем просто добавить свойства и методы, такие как наследование. "Hello world" наследования — это объект млекопитающего. Давайте воссоздадим его с помощью JavaScript. // our Mammal blueprint function Mammal(name) { this.name = name; } Mammal.prototype.breathe = function() { console.log(`${this.name} is breathing.`); }; В JavaScript внутри объекта есть статическая функция: Object Object.create(); Он создает объект аналогично и , но разница в том, что может принимать прототип в качестве параметра для наследования. {} 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; Теперь будет метод , найденный в , но важно знать, что указывает на как на свой прототип. Cat breathe Mammal Cat Mammal Объяснение: : Сначала мы определяем функцию и добавляем метод к ее прототипу. Mammal Blueprint Mammal breathe : Мы создаем функцию и устанавливаем в . Это делает прототип наследуемым от , но изменяет указатель на . Наследование Cat Cat Cat.prototype Object.create(Mammal.prototype) Cat Mammal constructor Mammal : Мы исправляем , чтобы он указывал обратно на , гарантируя, что объект сохраняет свою идентичность, наследуя методы от . Наконец, мы добавляем метод к . Исправление конструктора Cat.prototype.constructor Cat Cat Mammal meow Cat Такой подход позволяет объекту получать доступ как к методам (например, ), так и к методам его собственного прототипа (например, ). Cat Mammal breathe meow Нам нужно это исправить. Давайте создадим полный пример: 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.`); }; Чтобы понять , вам нужно знать об указателях. Когда мы наследуем от с помощью , он меняет указатель нашего прототипа на , что неправильно. Мы по-прежнему хотим, чтобы наш был отдельным индивидуумом, несмотря на наличие родителя . Cat.prototype.constructor = Cat Mammal Object.create Cat Mammal Cat Mammal Вот почему нам нужно это исправить. В этом примере наследуется от с помощью цепочки прототипов. Объект может получить доступ к методам и . Cat Mammal Cat breathe meow const myCat = new Cat("Misty", "Ragdoll"); myCat.breathe(); // Misty is breathing. myCat.meow(); // Misty is meowing. Мы можем создать собаку, также унаследовав ее от млекопитающего: 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. Мы создали базовое классическое наследование, но почему это важно? Я думал, мы рассмотрим исходный код! Да, верно, но прототипы — это ядро построения эффективных и гибких модулей, помимо наследования. Даже простые, хорошо написанные модули напичканы объектами-прототипами. Мы просто закладываем основы. Альтернативой наследованию является композиция объектов, которая грубо берет два или более объектов и объединяет их вместе, образуя «супер»-объект. Миксины позволяют объектам заимствовать методы из других объектов без использования наследования. Они удобны для обмена поведением между несвязанными объектами. Именно это и делает наше первое исследование: библиотека мы обещали рассмотреть в первую очередь. merge-descriptors Модуль Merge-Descriptors Мы уже видели, где и как это используется в Express. Теперь мы знаем, что это для композиции объектов. В строке 17 представлена наша первая библиотека: var mixin = require('merge-descriptors'); Использование в строках 42 и 43: mixin(app, EventEmitter.prototype, false); mixin(app, proto, false); Используя имеющиеся у нас знания, мы уже можем сделать вывод, что объединяет и в объект с именем . mixin EventEmitter.prototype proto app Мы вернемся к , когда начнем говорить об Express. app Это весь исходный код : 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; С самого начала всегда обращайте внимание на то, как используется функция и какие параметры она принимает: // definition mergeDescriptors(destination, source, overwrite = true) // usage var mixin = require('merge-descriptors'); mixin(app, EventEmitter.prototype, false); mixin(app, proto, false); — это наш пункт назначения. Мы знаем, что означает композицию объектов. Грубо говоря, этот пакет компонует исходный объект в целевой объект с возможностью перезаписи. App mixin Перезапись, по предположению, происходит, если (адресат) имеет точно такое же свойство, как и источник, при перезаписи, в противном случае оставить это свойство нетронутым и пропустить. app true Мы знаем, что объекты не могут иметь одно и то же свойство дважды. В парах ключ-значение (объектах) ключи должны быть уникальными. В Express перезапись выполняется . false Ниже приведены основные правила обслуживания, всегда обрабатывайте ожидаемые ошибки: if (!destination) { throw new TypeError('The `destination` argument is required.'); } if (!source) { throw new TypeError('The `source` argument is required.'); } Вот тут начинается самое интересное: строка 12. for (const name of Object.getOwnPropertyNames(source)) { Из вышесказанного мы знаем, что означает , поэтому явно означает получение ключей собственных свойств. OwnProperty getOwnPropertyNames const person = { // data name: "Jane", age: 0, // behavior grow() { this.age += 1; } }; Object.getOwnPropertyNames(person); // [ 'name', 'age', 'grow' ] Он возвращает ключи в виде массива, и мы перебираем эти ключи в следующем примере: for (const name of Object.getOwnPropertyNames(source)) { Далее проверяется, имеют ли пункт назначения и источник тот же ключ, по которому мы в данный момент просматриваем цикл: if (!overwrite && Object.hasOwn(destination, name)) { // Skip descriptor continue; } Если overwrite ложно, пропустите это свойство; не перезаписывайте. Именно это и делает — он переводит цикл на следующую итерацию и не запускает код ниже, который является следующим кодом: continue // Copy descriptor const descriptor = Object.getOwnPropertyDescriptor(source, name); Object.defineProperty(destination, name, descriptor); Мы уже знаем, что означает . Новое слово — . Давайте проверим эту функцию на нашем собственном объекте : 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 // } Он возвращает нашу функцию в качестве значения, а следующая строка не требует пояснений: grow Object.defineProperty(destination, name, descriptor); Он берет наш дескриптор из источника и записывает его в место назначения. Он копирует собственные свойства источника в наш объект назначения как свои собственные свойства. Давайте рассмотрим пример на примере нашего объекта : person const val = { value: function isAlien() { return false; }, enumerable: true, writable: true, configurable: true, }; Object.defineProperty(person, "isAlien", val); Теперь должно быть определено свойство . person isAlien Подводя итог, можно сказать, что этот часто загружаемый модуль копирует собственные свойства из исходного объекта в целевой с возможностью перезаписи. Мы успешно завершили работу над нашим первым модулем на этом , и нас ждет еще более интересное. уровне исходного кода Это было введение. Мы начали с изучения основ, необходимых для понимания модуля, и, как побочный продукт, понимания шаблонов в большинстве модулей, то есть композиции объектов и наследования. Наконец, мы прошлись по модулю . merge-descriptors Этот шаблон будет преобладать в большинстве статей. Если я считаю, что есть необходимые основы для освещения, мы рассмотрим их в первом разделе, а затем рассмотрим исходный код. К счастью, используется в Express, который является нашим фокусом в качестве стартового исследования исходного кода. Так что ждите больше статей об исходном коде Express.js, пока мы не почувствуем, что у нас достаточно хорошо получилось использовать Express, а затем переключимся на другой модуль или инструмент, например Node.js. merge-descriptors Что вы можете сделать в это время в качестве испытания, так это перейти к тестовому файлу в merge descriptors, прочитать весь файл. Чтение исходного кода самостоятельно важно, попробуйте выяснить, что он делает и тестирует, затем сломайте его, да и исправьте его снова или добавьте больше тестов! Если вас интересует более эксклюзивный практический и объемный контент для совершенствования навыков программирования, вы можете найти больше информации на . Ko-fi