Совершенствуйте свои навыки JavaScript, читая чужой код

В этой статье мы расскажем, как использовать чужой код для улучшения своих знаний и навыков программирования на JavaScript. На примере Redux продемонстрируем, как лучше всего подходить к изучению библиотек.

Преимущества чтения исходного кода

Когда я начал изучать исходный код фреймворка Mithril, у меня было смутное представление о том, что такое виртуальный DOM. Когда я закончил, то понял, что виртуальный DOM - это метод, включающий в себя создание дерева объектов, которые описывают, как должен выглядеть пользовательский интерфейс. Затем это дерево превращается в элементы DOM с помощью таких API-интерфейсов, как document.createElement.

Еще одним преимуществом чтения чужого кода является обучение созданию правильной архитектуры приложений. Например, структура React отражает его новую архитектуру. Авторы отделили модуль, отвечающий за обновление пользовательского интерфейса (react-reconciler), от модуля, отвечающего за отображение элементов DOM (react-dom). Благодаря этому подходу разработчикам стало проще писать средства визуализации, подключаясь к пакету react-reconciler.

Вскоре исходный код, который вы читаете, приведет вас к спецификации JavaScript.

Изучение чужого кода облегчило мне понимание официальной спецификации JavaScript. Когда я первый раз читал спецификацию, то исследовал разницу между throw Error и throw new Error . Я заметил, что фреймворк Mithril использовал throw Error в реализации функции m. И задался вопросом о пользе использования throw new Error.

С тех пор я узнал, что логические операторы && и || не обязательно возвращают логические значения. А также нашел правила, управляющие тем, как  оператор равенства == приводит значения.

Методы чтения исходного кода

Изучение исходников лучше всего начать с определения метода из выбранной библиотеки и документирования того, что происходит при его вызове.

Таким образом я исследовал ReactDOM.render и многое узнал о React Fiber. Поскольку React является популярным фреймворком, я нашел множество статей, написанных на эту же тему, и это ускорило процесс изучения.

Это также познакомило меня с концепциями  методом window.requestIdleCallback и реальным примером связанных списков (React обрабатывает обновления, помещая их в очередь, которая является связанным списком приоритетных обновлений). При этом желательно создать простое приложение с использованием изучаемой библиотеки.

Если я не провожу глубокое исследование, то открываю папку /node_modules (в проекте, над которым работаю) или перехожу в репозиторий GitHub. Это происходит, когда я сталкиваюсь с ошибкой или интересной функцией.

Менее сложный способ чтения исходного кода я называю метод «беглого взгляда». В самом начале изучения кода я установил фреймворк express.js, открыл его папку /node_modules и просмотрел все зависимости. Если из файла  README я не получал понимания кода, то переходил к чтению исходника. Благодаря этому мне удалось сделать следующие выводы:

• js зависит от двух модулей, которые объединяют объекты, но делают это по-разному. merge-descriptors только добавляет свойства, найденные в исходном объекте, а также объединяет свойства. utils-merge только перебирает перечисляемые свойства объекта. А также свойства, найденные в его цепочке прототипов. merge-descriptors использует Object.getOwnPropertyNames() и Object.getOwnPropertyDescriptor(), тогда как utils-merge использует for..in.
• Модуль setprototypeof обеспечивает кроссплатформенные установки прототипа из созданного объекта.
• escape-html- это модуль, предназначенный для экранирования строки, чтобы ее можно было преобразовать в HTML-контент.

Для тестирования front-end кода используйте инструменты отладки, встроенные в браузер. Также они позволяют остановить программу в любое время, проверить ее состояние и пропустить выполнение функции.

Подойдите к отладке так же, как к любому приложению. Сформируйте гипотезу, а затем проверьте ее.

Пример: функция подключения Redux

React-Redux - это библиотека для управления состоянием React-приложений. Знакомство со столь популярными платформами я начинаю с поиска статей, которые рассказывают об их реализации.

connect является функцией React-Redux, которая связывает компоненты React с хранилищем Redux-приложения. Как? Согласно официальной документации, она делает следующее:

«... возвращает новый класс связанного компонента, который оборачивает переданный компонент».

Следующим шагом является создание простого примера приложения, которое использует connect. Но в данном случае я решил использовать новое React- приложение, которое мы создадим в Limejump. Так я хотел изучить возможности connect в создании приложений.

Компонент, с которым я работал:

class MarketContainer extends Component {
 // здесь код пропущен для краткости
}

const mapDispatchToProps = dispatch => {
 return {
   updateSummary: (summary, start, today) => dispatch(updateSummary(summary, start, today))
 }
}

export default connect(null, mapDispatchToProps)(MarketContainer);

Это компонент контейнера, который объединяет четыре связанных компонента. В файле, экспортирующем метод connect, указано, что он реализует шаблон проектирования типа фасад. В конце файла мы видим, что connect экспортирует вызов функции с именем createConnect. Ее параметры – это набор значений, используемых по умолчанию, которые были структурированы следующим образом:

export function createConnect({
 connectHOC = connectAdvanced,
 mapStateToPropsFactories = defaultMapStateToPropsFactories,
 mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
 mergePropsFactories = defaultMergePropsFactories,
 selectorFactory = defaultSelectorFactory
} = {})

Здесь мы сталкиваемся с другим обучающим моментом: экспорт вызванных функций и деструктурирование аргументов функций, используемых по умолчанию. Это обучающий момент, потому что код был написан следующим образом:

export function createConnect({
 connectHOC = connectAdvanced,
 mapStateToPropsFactories = defaultMapStateToPropsFactories,
 mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
 mergePropsFactories = defaultMergePropsFactories,
 selectorFactory = defaultSelectorFactory
})

Его выполнение вызвало бы ошибку «Uncaught TypeError: Cannot destructure property 'connectHOC' of 'undefined' or 'null'». Это связано с тем, что у функции нет аргумента, используемого по умолчанию, к которому можно обращаться.

createConnect сама по себе ничего не делает в теле функции. Она возвращает вызванную функцию connect:

export default connect(null, mapDispatchToProps)(MarketContainer)

Она принимает четыре обязательных аргумента. Первых три из них аргумента проходят через функцию match, которая помогает определить их поведение в соответствии с наличием аргументов и типом их значения.

Второй аргумент функции match является одной из трех функций, импортированных функцией connect, я должен решить, какому потоку следовать.

После функций сопоставления мы переходим к функции connectHOC, которая принимает компонент React и подключает его к Redux. Это еще один вызов функции, которая возвращает функцию wrapWithConnect. Она отвечает за обработку соединения компонента с хранилищем.

Заключение

Чтение исходного кода поначалу затруднительно. Но со временем становится легче.

Его цель не в том, чтобы понять все, а найти другую точку зрения. Например, функция isPlainObject использует if (typeof obj !== 'object' || obj === null) return false, чтобы проверить, что данный аргумент является простым объектом. Я удивился, почему она не использует Object.prototype.toString.call(opts) !== '[object Object]'. В этом случае используется меньше кода и происходит обработка входящих данных по типам объектов. Но дальнейшее чтение кода показало, что эта проблема решается проверкой Object.getPrototypeOf(obj) === null.

Еще одна особенность работы функции isPlainObject скрывалась в приведенном ниже коде:

while (Object.getPrototypeOf(baseProto) !== null) {
 baseProto = Object.getPrototypeOf(baseProto)
}

Поиск в Google привел меня к обсуждению проблем Redux. В нем объясняется, как этот код обрабатывает проверку объектов, которые происходят из iFrame.