Эта статья в основном знакомит с некоторым опытом автора и способами просмотра исходного кода.Поскольку автор в основном читает интерфейсные проекты, конечно, я также видел некоторый исходный код в других областях, но не так много, поэтому контент в основном основан на фронтенд-проектах.
узнать и ознакомиться с
- При подготовке к просмотру исходного кода проекта с открытым исходным кодом сначала ознакомьтесь с проектом.задний план,Функциии соответствующийAPI. Этот шаг предназначен для подготовки к пониманию функций всего проекта, а также для подготовки к тому, на каких модулях следует сосредоточиться позже.
- Посмотреть проектREADME.mdдокумент. В некоторых проектах проектная документация и архитектурные схемы помещаются в файл md, что дает вам общее представление о некоторых концепциях. Напримерimmer
- Просмотр общей файловой структуры проекта. Например, некоторые файлы, которые необходимо проверить, перечислены ниже.
- package.json, вы можете увидеть весь проект из этого файлаВходной файл, компиляция разработки/тестирования/релизаВы также можете узнать о различных командах проектаЗависимые библиотеки и инструментыа такжеРамкаи Т. Д.
- Файл конфигурации webpack/gulp/rollup, из которого вы можете увидеть общую конфигурацию инструмента проекта, включаявходной файла такжескомпилированный файл кода, а также функции некоторых элементов конфигурации
- Знайте некоторые правила именования файлов по умолчанию, такие как
- dist, указывающий на скомпилированный исходный файл
-
src, файл исходного кода
- index.xx, который обычно используется в качестве входного файла внешнего интерфейса.
- app.xx, server.xx обычно используются в качестве входных файлов для серверной части.
- static, статические файлы, интерфейсные проекты обычно используются в качестве входных файлов для запуска браузеров.
-
test, папка тестового примера
- e2e, сквозное тестирование
- модуль, модульное тестирование
- ... В течение этого периода, даже если вы столкнулись с некоторыми файлами и не знаете, что это такое, есть 2 способа узнать о них.
- Ищите имя файла непосредственно в Google, и вы часто можете найти соответствующие ответы, такие как **.eslintrc.js**
- Зайди и посмотри содержимое файла, там обычно есть комментарии, если их нет, значит файл часто не очень важен, можешь его сначала проигнорировать
начать
После завершения предыдущих приготовлений у вас должно быть общее представление о проекте.Здесь вы можете кратко написать некоторые свои знания о проекте.путать,Пожалуйста, обрати внимание! ! ! Вопрос здесь важен, потому чтоГлядя на исходный код, вы должны смотреть на него с вопросами, иначе вы не сможете найти направление. Что касается вопроса здесь, вы можете сначала составить список, напримерmpvue
- Апплет не поддерживает импорт файлов библиотеки через npm, но поддерживает mpvue, как он это делает?
- И у апплета, и у vue есть свой жизненный цикл, как совместим фреймворк?
- Как mpvue позволяет апплету поддерживать однофайловые компоненты (.vue) .....
Тогда я могу начать смотреть на исходный код формально, позвольте мне сделать здесь отступление. Кто-то может начать с первогоcommitВроде бы потому, что исходный код первого коммита будет относительно простым и понятным, но мне это не нравится, потому что код первого коммита часто далек от существующей документации (если только проект не относительно новый) , и это невозможно понять. Общая структура, и код первого коммита, возможно, претерпел кардинальные изменения в архитектуре по сравнению с последним кодом, но вместо этого проделал какую-то бесполезную работу.
1. Входной файл, почти все проекты будут иметь входной файл.На самом деле, после того, как вы сделаете вышеуказанные приготовления, вы можете в основном найти входной файл.Это не что иное, как начало с двух аспектов
- package.json, поскольку это файл входа, обычно использует имя по умолчанию, например index.xx app.xx и тому подобное.
- Файл конфигурации инструмента, такой как поле ввода веб-пакета, путь к файлу, выполняемому gulp.src и т. д.
2. Начните читать с модулей как единое целое, возьмите подготовленные выше вопросы, снимите коконы и углубитесь. Вот небольшая хитрость, которой можно поделиться. Вы можете сначала разветвить следующий проект и продолжать добавлять свои собственные комментарии и пояснения в процессе чтения. Хороший проект часто имеет очень четкую структуру, например
Хороший исходный код может прямо из названия дать читателям некоторую информацию, удобную для чтения.
3. Когда вы глубоко читаете какой-то исходный код и не понимаете его, сначала попытайтесь выяснить, нет ли в Интернете какой-либо актуальной информации для изучения, если вы действительно не можете ее найти, вы можете ее пометить и поставить ...После того, как вы это увидите, вы можете оглянуться назад и посмотреть, не понимаете ли вы этого. Место может быть беспорядком.
Навык
1. В процессе чтения, если вы обнаружите, что некоторые фрагменты кода очень тонкие, вы можете записать их или попытаться увидеть, есть ли лучший способ добиться этого, возможно, вы стали участниками этого проекта.
2. Если вы не понимаете функции модуля, вы можете пойти и посмотретьпрецедент, особенно юнит-тест (юнит), тест-кейс включает в себя проверку ввода и вывода, из чего можно быстро понять роль модуля
3. Чтобы научиться ломать проект, в процессе чтения и запуска исходного кода проекта вывод информации о текущем выполняемом стеке через точку останова также очень полезен для понимания проекта.
предположение
Когда новички читают исходники на github, они могут начать с каких-то небольших проектов, например проектов, реализующих определенную функцию или компонент, не смотреть на какие-то большие и всеобъемлющие фреймворки, проще начать, когда накопишь Набравшись опыта, попробуйте посмотреть исходный код фреймворка. Кроме того, может быть лучше читать с некоторыми инструментами.Автор рекомендует некоторые инструменты для всех.
- Octotreeрасширение для браузера, которое отображает дерево кода на github, что очень полезно для понимания всей структуры проекта.
- webstorm, это зависит от личных предпочтений, я предпочитаю WS, главным образом потому, что инструменты в нем более полные, такие как поддержка typescript, babel и других инструментов, которые часто используются во внешнем интерфейсе.
- SourceTree, визуальный клиентский инструмент git, если вы хотите начать с первого коммита, то этот инструмент будет для вас более полезным. Взгляните, чтобы быстро понять содержимое, представленное каждой версией, и запись об изменении исходного кода. Раньше я предпочитал использовать это, но после того, как у WS появился собственный инструмент визуализации, он не использовался.
Суммировать
Изучение исходного кода проекта не делается в одночасье, и цикл часто бывает долгим, лучше всего сделать форк проекта, подготовить отдельную заметку и потихоньку изучить и записать часть опыта в процессе просмотра исходного кода , а затем вернитесь после прочтения в конце. Можете ли вы назвать его архитектуру и дизайн, тогда я думаю, что это обучение имеет смысл, поэтому я думаюКонечная цель чтения исходного кода — понять проект и, наконец, реализовать его.