Я почти 6 лет в индустрии фронтенда, несколько лет ловил рыбу в мидле, потерял много времени в зоне комфорта. Ведь это не малый срок.По личным ощущениям и опыту вот краткое изложение общего направления обучения фронтенд программистов для техники.
Немного скромное мнение, если что-то не так, укажите на это!
Серия общих знаний
алгоритм
Для веб-интерфейса алгоритм слишком неважен, по крайней мере, сейчас, например, редко удается написать правильную быструю сортировку вручную.
Поскольку существует слишком мало сценариев, в которых алгоритмы могут использоваться во фронтенд-проектах, если нет каких-то конкретных проектов, все считают, что алгоритмы не важны. И когда мы изучаем алгоритмы, мы не имеем в виду, что мы должны использовать их в проекте, но нам нужно научиться думать об алгоритмах.Существует много способов решить проблему, но как вы судите, является ли этот код лучшим способом для его реализации?Какой стандарт?
Временная сложность и пространственная сложность могут использоваться для количественной оценки качества программы.Чем ниже временная и пространственная сложность, тем выше производительность этого кода. Если вы не знаете временную сложность и пространственную сложность, как ее оптимизировать?
Изучение алгоритмов — это длительный процесс, не думайте о том, чтобы потратить полмесяца или месяц, чтобы сосредоточиться на преодолении алгоритмов, в будущем будут изобретены другие и лучшие алгоритмы. Но можно потратить полчаса каждый день на изучение знаний алгоритмов и выполнение вопросов по алгоритмам: например, почистить вопросы в литкоде, накопившиеся за долгий период времени, превзойдет большинство одноклассников, а знание алгоритмов тоже необходимо для интервью большой фабрики.
регулярное выражение
Регулярные выражения все еще относительно распространены, но очень немногие люди действительно изучают синтаксис регулярных выражений. Если вы сталкиваетесь с телефонными номерами, адресами электронной почты, паролями и т. д., которые требуют сопоставления с регулярными выражениями, их в основном ищут в Интернете.
Но освоение некоторых простых регулярных выражений во внешнем интерфейсе может быть очень эффективным в какой-то момент. Строки, например, имеют очень мощный метод: заменить. Обычно при использовании замены большинство из них непосредственно выполняют сопоставление строк и замену, но если параметр является обычной функцией суммы, функцию можно реализовать более лаконично и эффективно.
// 日期格式化
dataFormat(date: Date = new Date(), fmt: string = 'YYYY-MM-DD hh:mm:ss') {
let o: any = {
"Y+": date.getFullYear(), // 年份
"M+": date.getMonth() + 1, // 月份
"D+": date.getDate(), // 日
"h+": date.getHours(), // 小时
"m+": date.getMinutes(), // 分
"s+": date.getSeconds(), // 秒
"q+": ((date.getMonth() + 3) / 3) | 0, // 季度
"S": date.getMilliseconds() // 毫秒
}
for (let k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (a: string, b: number) => {
if (b !== 0 && String(o[k]).length < 2 && a.length === 2) return `0${o[k]}`
return o[k]
})
}
}
return fmt
}
/**
* 将不正规的json字符串替换成正规json字符串
* eg: str = `{ first: 'first value', 'second': true, "third": "third value"}`
*
* result: "{"first": "first value", "second": true, "third": "third value"}"
*/
str2JsonFormat(str: string) {
if (typeof str !== 'string') return str
str = str.replace(/[\{|,]\s*([a-zA-Z0-9_]+?)\s*:|'/g, (a: string, b: string) => {
if (a === "'") return '"'
return `${a[0]}"${b}":`
})
return str
}
битовая операция
Все числа в программе хранятся в двоичной форме в памяти компьютера. Битовая операция предназначена для непосредственной работы с двоичными битами целых чисел в памяти. Например, операция and изначально является логическим оператором, но операцию and также можно выполнять между целыми числами.
Знанием битовых операций легче пренебречь, чем алгоритмами, а читабельность программ с битовыми операциями очень недружелюбна для учащихся, не понимающих битовые операции. Но пока вы владеете простыми правилами побитовых операций, вы обычно можете оптимизировать свои проекты, писать элегантный код и использовать побитовые операции в некоторых интерфейсных фреймворках для повышения производительности.
Ниже приведен исходный код фреймворка vue3, который используется для маркировки и определения того, какие атрибуты узла необходимо обновить.
Пример:
// 没有结合位运算
function test(p1: string | undefined, p2: string | undefined, p3: string | undefined) {
if (
p1 && p2 && p3 || // 三个都有
!p1 && !p2 && !p3 || // 三个都没有
p1 && !p2 && !p3 || // 只有p1
!p1 && p2 && !p3 || // 只有p2
!p1 && !p2 && p3 || // 只有p3
!p1 && p2 && p3 || // 只没有p1
p1 && !p2 && p3 || // 只没有p2
p1 && p2 && !p3 // 只没有p3
) {
return null
}
}
// 修改 --> 结合位运算的代码
function test1(p1: string | undefined, p2: string | undefined, p3: string | undefined) {
let flag = 0
if (p1) flag |= 1
if (p2) flag |= 2
if (p3) flag |= 4
if (
flag == 0 || // 三个都没有
flag == 1 || // 只有p1
flag == 2 || // 只有p2
flag == 3 || // 只没有p3
flag == 4 || // 只有p3
flag == 5 || // 只没有p2
flag == 6 || // 只没有p1
flag == 7 // 三个都有
) {
return null
}
}
Вышеуказанные два метода эквивалентны, но приведенный выше явно более запутан, а следующий понятнее. И поскольку битовая операция является базовым вычислением, производительность хорошая.
Серия передовых знаний
Как работают браузеры
Все проекты, написанные для веб-интерфейса, выполняются в браузере, поэтому освоение принципа работы браузера является главным приоритетом для программистов, работающих с интерфейсом, и это неизбежная точка знаний на пути к обновлению.
- Компоненты браузера
- браузерный движок
- Интернет
- тайник
- загрузка ресурсов
- Перекомпоновать и перерисовать и т.д.
Принцип работы браузера — важное направление оптимизации проекта.
основы js
Базовые знания js должны быть краеугольным камнем для программистов, работающих с веб-интерфейсом.Для изучения базовых знаний мы должны не просто использовать их просто, но и изучить принцип их работы.Это также вечная точка знаний. чем раньше вы его освоите, тем лучше. Как бы ни итеративно обновлялся фронтенд-фреймворк, какой бы более популярный фронтенд-фреймворк не появлялся, его суть — более гибкое применение базовых знаний js. Хорошее понимание базовых знаний может обеспечить более эффективное чтение исходного кода фреймворка.
- цикл событий
- Сеть прототипов
- Закрытие
- наследовать
- это ключевое слово
- размах и т.д.
Исходный код фреймворка
Один из самых эффективных способов учиться — смотреть на код первоклассных программистов, изучать их мышление, организацию кода и т. д. Фреймворк может быть популярным, что уже означает, что его авторы фреймворка находятся на высшем уровне, а чтение их работ также является самым прямым способом обучения.
Теперь интервью старших программистов и выше будут в основном касаться исходного кода фреймворка. Это может напрямую отражать отношение человека к обучению, стремление к технологиям, а в проекте разработки разработчики, читавшие исходный код, и те, кто не читал исходный код, разрабатывают функции, и их логическая организация будет существенно различаться. Чтение исходного кода также является мощным инструментом для устранения ошибок.Поскольку я видел много студентов, я решил ошибку необъяснимым образом, но я не знал, почему.
Основы серверной части
Для front-end программистов, которые не разбираются в back-end, по-прежнему очень важно понимать логику back-end, роль back-end, а также основные операции и функции базы данных. При разработке он более удобен и может более эффективно взаимодействовать при совместной работе с серверной частью.
Еще один важный момент — понимать роль бэкенда, чтобы не нести лишние нагрузки, и не нужно было делать те функции, которые должен реализовывать бэкенд ^_^ !
метод исследования
Наконец, есть общая проблема с обучением технологиям: после изучения, если вы не используете его в течение длительного времени, вы скоро забудете его.
Я слышал, как один большой человек сказал: Все, чему ты научился и чему не научился, — это две разные сферы. Таким образом, мы все еще должны настаивать на обучении, но мы также должны учиться выборочно.Такие вещи, как основные принципы и общие алгоритмы, определенно не будут потерей, но не рекомендуется слепо следовать новым технологиям, потому что это может быть затратным и Урожай не пропорционален, приходится выбирать по своим условиям.
проверка результатов обучения, эффективный метод: после того, как вы выучили, расскажите об этом другому человеку.Если другой человек это понимает, это означает, что вы действительно освоили это.
записывать
Изучая что-то новое, обязательно делайте заметки.
Например, изучение исходного кода: с момента инициализации мы можем использовать инструмент processOn для записи изменений каждого шага, функции каждого шага и запоминать замечания блок-схемами. Например, следующая картинка:
Это очень быстро при последующем просмотре на основе предыдущих заметок.
вести блог
Также научитесь вести блог, сейчас существует много платформ для блогов: Nuggets, Zhihu, Jianshu, Blog Park и т.д. Не бойтесь плохого письма, потому что никто не может написать очень хорошо с самого начала, и это требует долгой практики. Есть много преимуществ ведения блога.Когда вы записываете то, что вы узнали, в статьи блога, вы будете думать более глубоко и подробно в процессе написания, как сделать его более понятным для людей; это также может углубить память и способствовать общению , и выработайте привычку делиться.
Участвуйте в проектах с открытым исходным кодом
Участие в проектах с открытым исходным кодом также является эффективным способом самосовершенствования.Если это относительно известный проект с открытым исходным кодом в отрасли, это очень приятный бонус в вашем резюме. Вот лишь некоторые из преимуществ:
- Непрерывное обучение и практика, а также совершенствование технологий вместе с другими отличными разработчиками
- Легче получить совет от больших парней
- Покажите свои способности и увеличьте свое влияние в отрасли
- Добавьте основные моменты в свое резюме
- Возможность большего дохода
- Расширяйте контакты в своих кругах
групповое исследование
Очень легко отказаться от обучения в одиночку.Фундаментальная причина в том, что стоимость самостоятельного обучения низка, и его никто не контролирует.Найдите одноклассников, чтобы заниматься вместе, контролировать и общаться друг с другом, и легче выстоять .