Всем привет, я Ханцао😈, травяная обезьяна🐒. Прерывистая кровь 🔥, сплошная скульптура из песка 🌟
Если вам нравятся мои статьи, вы можете подписаться на ➕ Ставьте лайки и развивайтесь вместе со мной~
добавь меня в WeChat:hancao97, приглашаем вас присоединиться к группе, учиться и общаться вместе и стать лучшим инженером~

Введение 📚

Привет всем, я написал эту статью два месяца назад:В статье «Организация за 30 дней | 2W Words» разъясняется маршрут обучения переднего плана и создается система знаний 🌿, в основном рассказывает о моем пути обучения фронтенду и огромной карте системы знаний фронтенда, завершенной в ходе обсуждения с большими парнями.

Если вам нужна полная карта системы знаний о внешнем интерфейсе, вы можете перейти к концу этой статьи, чтобы получить ее. потому что нет денегxmindЧлен, поэтому я хочу пойти в версию водяного знака или добавить моего друга, я дам вам личную проблему ~

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

• Проанализировать мои личные способности и планы на будущее
• По результатам анализа и полной карте знаний я разберусь со своим дальнейшим маршрутом обучения

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

• упражняться: Начни планировать с меня, чтобы передать опыт всем
• Сопровождать рост: Я надеюсь, что вы также можете пройти обучение по системе и расти вместе с моей компанией.
• систематический: Весь маршрут обучения должен быть как можно более систематическим, чтобы сделать систему знаний достаточно полной.

А теперь, пожалуйста, наслаждайтесь вступительной частью этой серии:

从零构筑属于自己的知识体系 🌿

Если у меня нет общего понимания интерфейсной системы, я все же надеюсь сначала прочитать ее:В статье «Организация за 30 дней | 2W Words» разъясняется маршрут обучения переднего плана и создается система знаний 🌿, такие как название, это путь переобучения интерфейсу, и для этого все еще необходимо иметь определенное базовое понимание.

самоанализ 🎵

Прежде всего, когда мы хотим установить наши собственные долгосрочные цели обучения, мы можем сначала проанализировать свои собственные способности и планы на будущее. Например, сначала дайте себе краткую позицию:

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

Мое позиционирование себя - вышеприведенная фраза.Я многое знаю в глаза, но у меня нет глубоких исследований, я не прошу глубокого понимания, и фундамент не является прочным. Итак, для меня на данном этапе мой учебный план на будущий период времени таков:

Заново изучите интерфейсную систему знаний, закрепите основу и углубите принцип.

Я хочу, чтобы у меня было много одноклассников, которые находятся на том же этапе, что и я, поэтому я также могу попытаться следовать моим шагам, чтобы изучить интерфейс в будущем. Конечно, будет и много студентов, которые находятся на более высокой ступени и хотят углубленно изучать определенные направления.Как говорится, у людей разные радости и горести, поэтому здесь я могу поклоняться только большому парню.

Долгий путь обучения 🌊

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

Порядок обучения сверху вниз~

Общая способность

• shell
• git
• общие команды линукса
• Обычный

html

• canvas
• Аудио и видео

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

css

• Селектор
• BFC
• коробочная модель
• CSS-анимация
• поплавок/позиция/макет

js

• синтаксис es6+
• Стандарт ES (глубокое понимание js)
• ES5 реализует синтаксический сахар ES6+
• модульность js
• выборка API && ajax и библиотека запросов на основе инкапсуляции ajax
• переменное продвижение
• Закрытие
• всплывающее окно событий
• Цепочка прототипов и наследование
• Микрозадачи и макрозадачи и очереди событий
• этот указатель
• Надмножество: машинопись

Современный популярный фреймворк Vue

Из-за стека технологий, который я сейчас использую, Vue, я собираюсь вникнуть в него, а затем рассмотреть возможность изучения реакции.

Принцип, связанный:

• Отзывчивые принципы
• виртуальный дом
• алгоритм сравнения
• Компиляция шаблона
• принцип слота

связанные с vue3:

• composition API
• Сходства и различия с vue2
  • использовать
  • Принцип реализации

Фронтенд-инжиниринг

• Node
• упаковочный инструмент
  • webpack
  • rollup
  • vite
    • Использование и принцип
• предварительная обработка
  • babel
  • современный css
    • less
    • sass
• управление зависимостями
  • npm
  • yarn
• CI/CD
• Шаблоны проектирования
• eslint
• nginx
• микро интерфейс
  • single-spa
  • qiankun
  • qp

браузер

• отладка
• Принцип рендеринга в браузере
• v8
• webworker
• вывоз мусора

Интернет

• Семиуровневая сетевая модель ISO-OSI
• код состояния
• спецификация API
  • restful
  • graphql
• протокол
  • http & https & http2
  • grpc
  • tcp
  • udp

разработка js-сервера

• nestjs
• mysql
• Развертывание производственной среды
  • pm2
  • forever

Разработка плагина

• Плагин vscode
• хром плагин

Я также разработал множество плагинов vscode, вы можете прочитать мои предыдущие статьи~

внешний интерфейс

• low code
• deno

Мне всегда было любопытно, что такое дено, изучайте и изучайте его~

структура данных

• множество
• куча
• очередь
• связанный список
• Дерево
• картина

алгоритм

• Сложность времени и сложность пространства
• Общие алгоритмы
  • обход дерева
  • Алгоритм сортировки
• Алгоритмическое мышление
  • Исчерпывающий метод
  • рекурсия
  • рекурсия
  • разделяй и властвуй
  • как дела
  • динамическое программирование
  • Итерационный метод
  • метод ветвей и границ
  • Возвращение
• Классический алгоритм
  • kmp

Принцип составления

• Государственный аппарат
• язык программирования и его реализация
  • язык низкого уровня
  • язык высокого уровня
• структура компилятора
  • Внешний интерфейс (аналитическая часть)
    • лексический анализ
    • Разбор
    • Семантический анализ
    • Генерация промежуточного кода
  • Бэкенд (интегрированная часть)
    • Оптимизация кода
    • генерация кода

Я уже писал статью о принципе компиляции, в которой более подробно~

операционная система

• что такое операционная система
• процессы и потоки

Принципы компьютерной композиции

• основные компоненты компьютера
• Компьютерные инструкции и операции
  • компьютерные инструкции
  • работа компьютера
• дизайн процессора
  • Исключения и прерывания
  • сборочная линия
• дизайн памяти
  • иерархия памяти

Дорога к славе ✨

Таким образом, мой полный систематический маршрут обучения на определенный период времени в будущем выглядит следующим образом:

Вывод 🔥

На этом содержание данной статьи заканчивается. Пожалуйста, продолжайте с нетерпением ждать моих последующих статей~

剧透一下，按照上面的流程我尽量保证一周一篇文章，当然下周就是 shell 啦～

когда ты в темноте
Не сдавайся в поисках света
Потому что на пути к свету
Ты тоже можешь быть светом

-to be continued-

Вы можете добавить меня в WeChat:hancao97, приглашаем вас присоединиться к группе, учиться и общаться вместе, а также стать лучшим фронтенд-инженером~