Об авторе Даниэль Ант Технологическая команда Financial Data Experience
В настоящее время в Интернете есть много статей, таких как «Анализ исходного кода XX», но объем этих статей для анализа исходного кода ограничен, и иногда содержание не является тем, что больше всего беспокоит читателей. В то же время я также заметил, что исходный код постоянно обновляется, а исходный код, написанный в статье, часто устарел. Из-за этих проблем многим студентам нравится читать исходный код самостоятельно, делать это самостоятельно и иметь достаточно еды и одежды.
В этой статье в основном рассказывается о некоторых советах по чтению исходного кода крупных интерфейсных проектов с открытым исходным кодом, таких как React, Vue, Webpack и Babel. Цель состоит в том, чтобы каждый мог быстрее находить код, который он хочет видеть, когда он сталкивается с проблемами, которые можно решить, только прочитав исходный код. Лучше научить человека ловить рыбу, чем научить его ловить рыбу.Я надеюсь, вы сможете узнать о точке входа, читая исходный код масштабных front-end проектов через этот блог. Когда вы столкнетесь с любопытным вопросом позже, вы можете изучить его самостоятельно.
Управляемость проблемой — не смотрите на исходный код ради того, чтобы посмотреть на исходный код
Прежде всего, мы должны прояснить, какова цель просмотра исходного кода?
Мое личное мнение, что просмотр исходного кода - это решение проблемы. В исходном коде проекта с открытым исходным кодом нет ничего особенного, это обычный код. Величина этих кодов, как правило, довольно велика.Если вы хотите узнать что-то из исходного кода, прямой просмотр всей кодовой базы, несомненно, ищет иголку в стоге сена.
Но если вы смотрите на исходный код с вопросами, например, вы хотите понять принцип синтетической системы событий React, что произошло до и после setState React или принцип системы плагинов Webpack. Также возможно, что вы столкнулись с ошибкой, которая предполагает проблему с фреймворком/инструментом. В таком случае просмотр исходного кода с определенной целью будет целенаправленным.
См. последнюю версию исходного кода
Раньше я встречал поговорку о том, что исходный код нужно смотреть с первого коммита проекта. Если это нужно для того, чтобы устранить путаницу с фреймворком/инструментами в предыдущей статье, это, естественно, зависит от версии фреймворка/инструментов, используемых в текущем проекте.
Если это для изучения исходного кода, я также рекомендую посмотреть последний исходный код. Потому что проект постоянно повторяется и рефакторинг. Это может быть полная переработка между версиями. Например, Vue 2.x и React 16. Рефакторинг привел к некоторым изменениям в структуре кода, Vue 2.x вводит виртуальный DOM, а метод обнаружения изменений данных Pull + Push делает структуру всего кода более понятной, поэтому код 2.x на самом деле лучше, чем этот. 1.x легче читать. React 16 переписал Reconciler, ввел понятие файбера, а структура всего репозитория кода стала более понятной, поэтому рекомендуется к прочтению.
предварительное условие
Глядя на исходный код, конечно, это не может быть шаттл.
Прежде чем смотреть исходный код, вам нужнопринципИметь базовое понимание. Так называемый принцип заключается в том, какие компоненты этого проекта, чтобы достичь конечного результата, какие шаги нужно пройти. Какие из этих процессов являются основными решениями в отрасли?
Например, в интерфейсной структуре уровня просмотра для визуализации пользовательского интерфейса компоненты должны пройти такие этапы, как монтирование, визуализация и т. д. Интерфейсная структура, управляемая данными, после подключения войдет в цикл, и пользовательский интерфейс будет обновляться, когда взаимодействие с пользователем вызывает изменение данных компонента. Существует два типа методов обнаружения данных: Push и Pull. Рендеринг пользовательского интерфейса может быть полной заменой строкового шаблона или дельта-обновлением DOM на основе виртуального DOM.
Другой пример — некоторые интерфейсные инструменты, такие как Webpack и Babel, основанные на плагинах. Основной рабочий процесс заключается в чтении файла, преобразовании кода в AST, вызове подключаемого модуля для преобразования AST и, наконец, генерации кода. Чтобы понять принцип Webpack, необходимо знать, что Webpack основан наtapableмодульная система.
Итак, как мы это понимаем? Чтобы понять это, вы можете перейти к серии «Анализ исходного кода XXX» на основных веб-сайтах и в блогах. Благодаря этим статьям мы можем получить общее представление о принципах фреймворка/инструментов, которые мы рассматриваем.
локальная сборка
Но в конце концов нам все равно придется смотреть непосредственно на исходный код. Первый шаг для автора, чтобы действительно посмотреть на исходный код, — это клонировать репозиторий кода проекта в локальный. Затем следуйте инструкциям по сборке в файле README проекта, чтобы собрать его локально.
Если это интерфейсный фреймворк, мы можем напрямую импортировать локально собранный umd-бандл в HTML (не забудьте использовать девелоперскую сборку, иначе код будет сжат и читабельность будет плохой), а затем написать простое демо и импортировать локальную сборку в демо. Если это инструмент на основе Nodejs, мы можем использовать ссылку npm, чтобы связать команду этого инструмента с локальным. Вы также можете напрямую просмотреть входной файл package.json проекта и запустить этот файл непосредственно с помощью node.
Здесь следует подчеркнуть, что большие проекты с открытым исходным кодом обычно имеют одинContribution Guide, цель состоит в том, чтобы позволить разработчикам, которые хотят внести свой код, быстрее приступить к работе. Есть разговоры о том, как собирать код локально.
Взяв React в качестве примера, ReactContributing GuideВот раздел о рабочем процессе разработки. В ней есть такой отрывок:
The easiest way to try your changes is to run yarn build core,dom --type=UMD and then open fixtures/packaging/babel-standalone/dev.html. This file already uses react.development.js from the build folder so it will pick up your changes.
Таким образом, fixs/packaging/babel-standalone/dev.html в репозитории React — удобная демонстрационная страница. Мы можем быстро увидеть изменения, которые мы внесли в код локально на этой странице.
Вы можете попробовать добавить журнал в файл входа проекта и посмотреть, сможете ли вы увидеть журнал в консоли/терминале. Если вы можете, поздравляю, теперь вы можете свободно играть с этим проектом!
Очистите структуру каталогов
Прежде чем смотреть конкретный код, нам нужно разобраться в структуре каталогов проекта, чтобы мы могли знать, где быстрее найти код связанной функции.
Давайте посмотрим на структуру каталогов React. React — это монорепозиторий. То есть репозиторий содержит несколько подрепозиториев. Мы можем увидеть множество отдельных пакетов в каталоге пакетов:
После React 16 код React разделен на три части: React Core, Renderer и Reconciler. Это связано с тем, что дизайн React позволяет нам отделить React Core от Reconciler, который сопоставляет данные с пользовательским интерфейсом, и Renderer, который отображает Virtual DOM для каждой конечной точки. React Core содержит определения классов React и некоторые API верхнего уровня. Большая часть логики рендеринга и отображения различий слоев находится в Reconciler и Renderer.
Babel также является монорепозиторием. Базовым кодом Babel является пакет babel-core.Babel открывает интерфейс, позволяя нам настраивать посетителя, который вызывается во время преобразования AST. Таким образом, репозиторий Babel также включает множество подключаемых модулей, и именно эти подключаемые модули действительно реализуют преобразование синтаксиса, а не ядро Babel.
Код Vuejs более типичен, основной код находится в каталоге src, разделенном по функциональным модулям. Поскольку Vue также поддерживает мультиплатформенный рендеринг, код, связанный с платформой, помещается в папку платформы, основная папка — это основной код Vue, а компилятор — это компилятор шаблонов Vue, который компилирует шаблоны в стиле HTML в функции рендеринга. .
Webpack, как и Babel, можно назвать системой, основанной на плагинах. Основной исходный код Webpack находится в каталоге lib, а файл webpack.js внутри — это входной файл.
Структура каталогов четырех проектов упоминалась выше, тогда, когда мы сталкиваемся с новым проектом с открытым исходным кодом, как мы должны понимать его структуру каталогов?
Если проект представляет собой монорепозиторий, сначала нам нужно найти пакет ядра, а затем посмотреть код внутри.
Если это не монорепозиторий, вообще говоря, если проект представляет собой инструмент CLI, каталог bin содержит входные файлы, относящиеся к интерфейсу командной строки, а lib или src — это основной код инструмента. Если проект представляет собой интерфейсную структуру уровня просмотра, структура каталогов аналогична Vue.
В качестве проверки вы можете взглянуть на инструмент упаковкиparcelи внешний вид библиотеки слоевmoonструктура каталогов. Структура каталогов часто похожа, и вы познакомитесь с ней после прочтения нескольких проектов.
отладчик && метод глобального поиска
После запуска локальной сборки и понимания структуры каталогов мы можем приступить к просмотру исходного кода! Как я уже говорил, нам нужно ориентироваться на проблемы, поэтому позвольте мне использовать в качестве примера проблему того, что происходит до и после того, как React вызывает setState.
Мы можем попасть в точку останова вместо setState. Сначала нам нужно найти, где находится setState. Вот где подготовительная работа перед этим пригодится. Мы знаем, что общий API React находится в пакете react. Мы ищем глобально в этом пакете. Мы обнаружили, что этот API определен в файле src/ReactBaseClasses.js.
Итак, мы достигли точки останова здесь:
Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object' ||
typeof partialState === 'function' ||
partialState == null,
'setState(...): takes an object of state variables to update or a ' +
'function which returns an object of state variables.',
);
debugger;
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
Затем запустите демо-страницу локальной сборки React, пусть компонент активирует setState, и мы увидим точку останова в Devtool.
Мы вошли в вызов this.updater.enqueueSetState и пришли к enqueueSetState в функции ReactFiberClassComponent, где вызываются enqueueUpdate и scheduleWork.Если мы хотим углубиться в процесс после setState, нам просто нужно нажать еще раз
Чтобы увидеть, что происходило до setState, нам просто нужно взглянуть на стек вызовов в правой части Devtool:
Нажмите на каждый кадр, чтобы перейти к соответствующей функции и восстановить контекст на тот момент.
В сочетании с пошаговой отладкой кода мы можем увидеть стек вызовов функций фреймворка. Для каждой важной функции мы можем искать исходный код в репозитории для дальнейшего изучения.
Метод отладки инструмента Node также аналогичен, мы можем добавить параметр --inspect при запуске команды узла. В частности, вы можете увидеть Debugging Node.js with Chrome DevToolsэтот блог.
На самом деле всем известен метод пошаговой отладки, но самое критичное — где остановиться. После того, как мы ознакомимся с принципами фреймворка, мы можемкритическая ссылкаТочки останова, такие как хук цикла объявления и метод рендеринга интерфейсной платформы уровня представления, а также подключаемая функция инструмента Node, — все эти коды являются необходимыми местами для запуска платформы и являются хорошими точками входа.
Если это нужно для того, чтобы понять конкретную проблему, вы можете прямо прервать ту точку, где, по вашему мнению, есть проблема. Затем запустите исходный код и найдите способ заставить код работать в этом месте. Мы можем видеть такую информацию, как локальные переменные в точках останова, что помогает обнаруживать проблемы.
Ресурсы от команды разработчиков
Фактически, команды разработчиков проектов с открытым исходным кодом также стремятся разрешить большему количеству людей участвовать в проекте и снизить порог для проекта. Таким образом, мы можем найти много ресурсов в Интернете от команды разработчиков. Эти ресурсы могут помочь нам понять принципы проекта.
Следите за основными разработчиками
В каждом проекте есть несколько основных разработчиков, таких как React.Dan Abramov, Andrew ClarkиSebastian Markbåge. веб-пакетTobias KoppersиSean Larkin. ВьюEvan You. Мы можем следить за ними в Твиттере, чтобы быть в курсе обновлений проекта.
Следите за официальным блогом и видео выступлений
Если мы обратим внимание на приведенных выше основных разработчиков, мы обнаружим, что они часто публикуют блоги или видео, связанные с исходным кодом/принципами проекта.
В официальном блоге React в последнее время появилось много блогов, связанных с разработкой проекта.
- Behind the Scenes: Improving the Repository InfrastructureВ этой статье представлена инфраструктура репозитория проекта React.
- Sneak Peek: Beyond React 16
Эндрю Кларк начал с введения в волоконную архитектуру.Документация. Недавняя презентация Дэна Абрамова на JSConf о некоторых новых функциях, которые появятся в React.Beyond React 16. в блоге РеакцииSneak Peek: Beyond React 16Это также введение в эту лекцию.
Evan You Расскажите о принципе обнаружения изменений данных во фронтенд-фреймворке.. Также в документах VueReactivity in DepthТакие главы знакомят с принципами.
Шон ЛаркинEverything is a plugin! Mastering webpack from the inside outПредставлен Tapable, основной компонент Webpack.
Джеймс КайлHow to Build a CompilerДавайте разберемся с основным процессом транспиляции кода Babel.
напиши в конце
Суть этой статьи в том, что целью просмотра исходного кода является решение проблемы. Мы призываем всех запускать исходный код крупномасштабных проектов локально, играть и учиться по своему желанию. Поскольку исходный код также является обычным кодом, пороговых значений не так уж много. Единственным порогом может быть информационная асимметрия между авторами проектов с открытым исходным кодом и рядовыми разработчиками, а рядовые разработчики недостаточно осведомлены о принципах и структуре каталогов проекта.
Мы можем получить ресурсы от разработчиков, а также прочитать больше статей об анализе исходного кода в сообществе, что поможет нам понять принципы проекта и заложить основу для последующего анализа исходного кода.
Если вам интересна наша команда, вы можете подписаться на рубрику и подписатьсяgithubИли отправьте свое резюме на 'tao.qit####alibaba-inc.com'.replace('####', '@'), люди с высокими идеалами могут присоединиться~
Оригинальный адрес:GitHub.com/proto team/no…