Некоторые предложения по предварительному обучению (включая классические вопросы для самопроверки)

предисловие

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

Хотя эта статья заняла много времени, у нее определенно есть свои ограничения; я надеюсь, что вы не стесняетесь указать на это.

Введите вопрос

Мы чувствуем, что позиция фронтенда теперь превратилась в одну из самых важных должностей R&D, поэтому требования к нам становятся все выше и выше. Так что учиться нужно не толькоCSS & HTML & JavaScript. Но эти три вещи всегда были фундаментальными для внешнего интерфейса, и это никогда не менялось. Из этих трехJavaScriptОпять высший приоритет.

Далее я дам некоторые конкретные предложения по маршруту обучения переднему концу, основанные на моем опыте.

содержание

• Три вещи, которым нужно научиться
• библиотечный инструмент
• Изучение фронтенд фреймворка (MVVM)
• Основы работы с браузером и компьютером
• Фронтенд-инжиниринг
• оптимизация производительности
• Nodejs
• Структуры данных и алгоритмы
• По тыквенной росписи

Три вещи, которым нужно научиться

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

Друзья, которые только начинают, я не думаю, что вам следует изучать такие вещи, какVue、TypeScript、Webpackи другие знания. следует сосредоточиться наCSS & HTML & JavaScriptизучение основ.

CSS & HTML

Для тех, кто только начинает, я все же рекомендуюCSS(3) & HTML(5)Очки знаний тщательно изучаются в стороне. На пути к обучению лучше всего вводить код после изучения части, чтобы углубить свою память.

Конечно, при желании рекомендуется сымитировать статическую страницу веб-сайта (Nuggets, Zhihu и т. д.), а также понять ее реальную сцену реализации с некоторыми атрибутами.

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

Некоторые вещи, которые вам нужно знать о CSS(3)

• Блочная модель (стандартная и IE)
• Понимание flex, float, Normal Flow и т.д.
• Общие селекторы CSS
• Разница между встроенным, внутренним и внешним стилями
• Каскадные правила CSS
• Понимание BFC и IFC
• Понимание использования преобразования CSS3, перехода, анимации и других свойств.
• Понимание адаптивного макета
• ...

CSS легко сказать и легко сказать, от сложного к сложному, потому что CSS всегда может вас удивить.

HTML(5) Некоторые сведения, которые вам необходимо знать

Говоря о HTML, я думаю, что многие людиdivшаттл. так какdivЭто здорово, не беспокойтесь о стиле по умолчанию.

Некоторые люди говорят, что у HTML есть много преимуществ, таких как четкая структура страниц, хорошая SEO-оптимизация, простота разработки и поддержки команды; я признаю все это, но мне все равно нравится.divшаттл.

• Семантика HTML (не совсем понимаю, почему интервью всегда спрашивают)
• canvas
• Локальное хранилище (понимание localStorage, sessionStorage, cookies)
• Использование видео и аудио
• Кэш приложения (манифест кеша)
• ...

JavaScript

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

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

JavaScriptТам действительно много базовых знаний, так что «Расширенное программирование на JavaScript» написано более 700 страниц, но когда у вас есть прочная основа JS, вы обнаружите, что вы изучите фреймворк или исходный код фреймворка. будет намного легче.

JavaScript (ES6+) Некоторые моменты, которые вам нужно знать

• преобразование типов
• this
• Область действия (цепочка областей действия)
• Цепочка прототипов и наследование
• Понимание замыканий
• Динамическая область видимости и лексическая область видимости
• Механизм выполнения JavaScript
• promise & async
• ...

сказано вышеCSS & HTML & JavaScriptВам не нужно понимать все основные пункты знаний, как только вы начнете; некоторые из них являются базовыми, но они также имеют свои трудности. Даже продвинутый человек не посмеет сказать, что он все это освоил.Есть очень хорошая поговорка - прочитай книгу сто раз, и сам увидишь.

Мы не можем все понять с первого раза, но, по крайней мере, это может произвести на меня впечатление. Через некоторое время, чтобы изучить эту точку знания, у вас обязательно появится новое понимание. Обучение — это только одна задача, которая должна быть постоянно в сети, и повторное обучение может помочь вам оставаться конкурентоспособными.

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

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

CSS, HTML и JavaScript Рекомендуемые книги/веб-сайты

0. _ Веб-руководство W3C по CSS и HTML
1. Полное руководство по CSS
2. Демистификация CSS
3. Продвинутое программирование на JavaScript
4. «JavaScript, которого вы не знаете», том 1
5. _ Начало работы с ECMAScript 6

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

Далее мы можем изучить некоторые библиотеки инструментов.

библиотечный инструмент

Для библиотечных инструментов мы обычно используем JQuery, underScore, zepto, Moment и т. д.

• JQuery: упростите манипулирование DOM для разработчиков.
• UnderScore: Предоставляет служебные функции
• Zepto: упрощенная версия JQuery
• Момент: библиотека манипулирования датой и временем

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

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

• Например, пусть вы сами реализуете функцию дросселирования, как бы вы ее реализовали.
• Как должны быть реализованы фильтрующие объекты
• ...

Разве нет ответа на этот вопрос в исходном коде Underscore?

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

Изучение фронтенд фреймворка (MVVM)

Самыми популярными фреймворками на данный момент должны быть React и Vue.Если существование JQuery должно сделать нам более удобным работу с DOM, то фреймворк MVVM теперь освобождает нас от сложной операции ручного обновления DOM.

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

некоторые проблемы

• Каковы основные принципы отзывчивости
• Понимание модели публикации-подписки
• Понимание виртуального DOM
• Принцип реализации front-end маршрутизации
• Принцип реализации nextTick/setState
• алгоритм сравнения
• Принципы, преимущества и недостатки одностраничных приложений (SPA)
• ...

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

Vue или React, что выбрать?

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

Если вам интересно, ознакомьтесь с этой статьей:
React or Vue: Which Javascript UI Library Should You Be Using?

Ниже приведены абстрактные идеи из текста:

Преимущества Vue:

• Гибкий выбор шаблонов и функций рендеринга
• Простой синтаксис и конфигурация проекта
• Более быстрый рендеринг и меньший размер

Преимущества React:

• Лучше для больших приложений и лучшей тестируемости
• Работает как с веб-приложениями, так и с нативными
• Большая экосистема, больше поддержки и лучшие инструменты

Информация, связанная с Vue

Для некоторых учебных материалов по структуре я лично предпочитаю рекомендовать официальные документы.В официальных документах много проблем.Официальные документы сделали это очень ясно. Некоторые книги на рынке являются продолжением официальных документов (не исключено, что есть отличные работы).

1. Официальный сайт Вью & Официальный сайт Vue Router & Официальный сайт Векс
2. Анализ внутренней работы Vue.jsБрошюра о наггетсах
3. Раскрыта технология Vue

Основы работы с браузером и компьютером

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

Браузер всегда был самой важной средой размещения JavaScript, поэтому мы должны понимать, как JavaScript выполняется в браузере.

Мы должны больше всего контактировать с фронтенд-разработкой браузера, я помню, что самая головная боль в первый год работы — это разобраться с совместимостью IE. Многие проблемы в работе связаны с браузерами, поэтому я считаю, что очень важно понимать, как работают браузеры.

Зачем изучать, как работают браузеры?

1. Точная оценка жизнеспособности проектов веб-разработки
2. Посмотрите на страницу из более высокого измерения
3. Решите подавляющее большинство проблем с браузером, возникающих на собеседованиях

Основы компьютера

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

Некоторые вещи, которые нужно знать

• Механизм кеширования браузера
• Механизм выполнения JavaScript в браузере
• принцип отрисовки страницы
• Проблемы безопасности браузера
• Почему браузеры пересекают домены?
• Как систематически оптимизировать страницу
• Разница между HTTP и HTTPS
• протокол TCP/IP
• Три рукопожатия и четыре волны
• Роль и принцип CDN
• Особенности прямого прокси и обратного прокси
• ...

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

Основы браузера и сети Рекомендуемые книги/материалы

1. "Принцип работы браузера и практикаСтолбец
2. «Иллюстрированный HTTP»
3. «Как подключен Интернет»

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

Если вы немного дольше занимаетесь фронтенд-разработкой, у вас обязательно возникнет такое ощущение — фронтенд-разработка становится все более инженерной и сложной.

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

Немного о фронтенд-инжиниринге

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

• Как организовать эффективное сотрудничество нескольких человек?
• Как обеспечить ремонтопригодность проекта?
• Как улучшить качество разработки проекта?
• Как снизить риск производства проекта?

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

модульный

• Модульность JavaScript
• CSS модульный
• Модуляризация ресурсов

составной

Каждая законченная структурная единица, содержащая шаблон (HTML) + стиль (CSS) + логика (JS), отделенная от пользовательского интерфейса, называется компонентом.

То есть разделение сложных страниц на несколько независимых компонентов по функциям.

нормализовать

• Стандарты кодирования
• спецификация интерфейса
• спецификация использования git
• CodeReview
• Спецификация элемента пользовательского интерфейса

Некоторые знания фронтенд-инжиниринга

• Понимать роль таких инструментов, как Babel, ESLint, webpack и т. д. в проекте.
• Основные принципы Babel
• Принцип компиляции Webpack, процесс сборки, принцип горячего обновления
• Базовое понимание nginx
• Понимание рабочего процесса Git
• Смысл и преимущества Mock

оптимизация производительности

Когда речь заходит об оптимизации производительности, что первое приходит вам на ум? Первое, что пришло мне в голову, это вопрос интервью:

Конкретный процесс от ввода URL до завершения загрузки страницы

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

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

Нам нужно сосредоточиться на оптимизации производительности в двух направлениях:

1. оптимизация времени выполнения
2. Оптимизация во время разработки

Оптимизация производительности, некоторые очки знаний

• Метрики производительности интерфейса, мониторинг производительности (производительность, LightHouse)
• Каковы общие решения по оптимизации производительности
• Оптимизация производительности схемы SSR
• Решение для оптимизации производительности Webpack
• Фреймворки, такие как React и Vue, используют решения для оптимизации производительности.
• Оптимизация на сетевом уровне
• Схема оптимизации на уровне рендеринга страницы
• Схема оптимизации белого экрана
• ...

Рекомендуемая информация

• «Практика оптимизации производительности крупных веб-сайтов»
• Буклет Nuggets «Принципы и методы оптимизации производительности внешнего интерфейса»

Nodejs

Мы знаем, что фронтенд-разработка пережила новый подъем благодаря Nodejs. JS может начать задействовать серверную область, и возможности JS еще больше.

Некоторые точки знаний Nodejs

• Роль Nodejs в приложении
• Разница между Экспрессом и Коа
• Основной принцип работы Nodejs, а также сходства и различия между браузерами.
• Принцип реализации неблокирующего механизма Nodejs
• ...

Структуры данных и алгоритмы

Я также слаб в этом вопросе, поэтому я не буду распространяться об этом. Для этой части вы можете прошить leetcode.

Еще одна книга «Изучение структур данных и алгоритмов JavaScript» (третье издание)

По тыквенной росписи

В процессе разработки проекта мы можем столкнуться со многими отличными библиотечными инструментами или библиотеками пользовательского интерфейса. Например, lodash, underscore, moment, element-ui, дизайн и т. д.

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

Это также очень полезная техника для обучения.

Наконец

Вы можете подписаться на мой одноименный публичный аккаунт [Xiaosheng Fangqin], где я буду делиться качественными статьями, и мы вместе добьемся прогресса.

Если вы хотите присоединиться к [большой группе обмена интерфейсом], нажмите «Добавить групповой обмен», чтобы немедленно присоединиться.