автор
Я ssh, добро пожаловать, чтобы подружиться со мной, WeChat:sshsunlight, Мне нравится делиться передовыми тенденциями и интересными вещами в интерфейсе.
Обратите внимание на общественный номер»Передняя часть от продвинутого до допуска», выберите супер качественные статьи, которые помогут вам стать богом во фронтенде.
предисловие
Какое-то время я был очень сбит с толку.После того, как я узнал о фактической разработке и применении Vue и React, я, кажется, столкнулся с некоторыми узкими местами и не знаю, что делать дальше. Я считаю, что это также распространенная проблема, с которой сталкиваются многие фронтенд-инженеры с годовым или двухлетним опытом.В этой статье автор хочет разобраться в некоторых маршрутах, основываясь на собственном опыте роста, чтобы помочь младшим и инженеры по интерфейсу среднего уровня делают меньше обходных путей.
В этой статье будет упомянуто множество маршрутов и ссылок для обучения.路线图, и работать в этом направлении в будущем.
Я не говорю, что эта статья - единственный путь для продвинутых старших инженеров.Если вы усердны в своем деле или можете хорошо общаться во всех аспектах и сотрудничать со всеми аспектами проекта, чтобы сделать проект красивым, тогда вы также может иметь это звание. Эта статья — просто краткое изложение моего собственного пути роста.
Аудитория этой статьи — опыт разработки1到3年的初中级前端工程师, Я надеюсь иметь сердце с вами.
Студенты, которые были переведены на продвинутый интерфейс, могут оставить свой опыт в области комментариев, чтобы дополнить некоторые из моих недостатков и недостатков.
Сам автор окончил обычный бакалавриат в 2017 г. В июне 2020 г., когда у него было три года стажа, он успешно прошел собеседование и поступил на крупную фабрику.Звание – старший фронтенд-разработка.
мой адрес на гитхабе, добро пожаловать, я буду продолжать обновлять некоторые проекты, достойные вашего внимания.
адрес моего блога, он будет обновляться здесь, нажмите на звездочку, чтобы оставаться на связи! ✨
мой публичный аккаунтПередняя часть от продвинутого до допуска, обновляйте качественные статьи впервые за долгое время и приветствую вас в группе по обмену с хорошей технической атмосферой.
Базовая способность
Я собрал основные возможности стека технологий для промежуточного интерфейса,Промежуточные читы на собеседовании для подруги. Конечно, стек технологий, описанный в этой статье, нужно основательно освоить.
Конечно, вы не всегда будете довольны тем, что являетесь интерфейсом среднего уровня, если вы очень мотивированы, мы должны продолжать совершенствоваться, получать продвижение по службе и повышать заработную плату, а также выйти замуж за Бай Фумей!
JavaScript
Серия нативных js
В этом блоге г-на Ю Ю вы должны быть в состоянии освоить все, кроме части без подчеркивания. И его можно гибко использовать в разработке.
Углубленные серии по JavaScript, тематические серии по JavaScript, серии по ES6
Полностью владеет eventLoop.
tasks-microtasks-queues-and-schedules
Promise
-
Вам нужно прочитать спецификацию Promise A+, обратить внимание на детали и гибко применять ее в разработке.
Документация на английском языке Promise A+ -
Вам нужно следовать отличному учебнику, чтобы написать промис, глубоко подумать о деталях и интегрировать детали асинхронного ожидания, обработки ошибок и т. д. в свое мышление при разработке.
Проанализируйте внутреннюю структуру Promise, шаг за шагом, чтобы реализовать полный класс Promise, который может пройти все тестовые случаи. -
Наконец, для ядра промисов, асинхронного связывания, вы должны быть в состоянии написать упрощенную версию кода.
Простейшая реализация Promise, поддерживающая асинхронные связанные вызовы (20 строк)
Отступление, уточнение этих 20 строчек действительно меня затянуло надолго 😂, но когда я разобрался, то вдруг пришло осознание. Технику этой асинхронной очереди необходимо освоить.
async await
Мы очень хорошо знакомы с Promise и расширяем его до асинхронного ожидания, который является очень, очень распространенным методом асинхронной обработки в текущей разработке.Нам лучше всего ознакомиться с исходным кодом, скомпилированным с помощью Babel.
Простейшая реализация рукописного асинхронного ожидания (20 строк)
Babel очень хорошо разбирается в асинхронных функциях ожидания и генератора. Мы должны изучить эту идею здесь. Как рекурсивно обрабатывать цепочку последовательных обещаний?
Этот трюкисходный код аксиомыЕсть и приложения. Обычно используемый перехватчик представляет собой последовательное выполнение серии промисов.
Конечно, если у вас все еще есть свободное время, вы можете продолжить более подробное изучение исходного кода функции-генератора, скомпилированного Babel. Это не обязательно, ведь генераторные функции очень редко использовались в разработке.
Как выглядит Babel из серии ES6, компилирующий Generator
Обработка исключений
Вы должны уметь обрабатывать ошибки в асинхронных сценариях, что является необходимым навыком для старших инженеров.Было бы смешно, если бы исключения в разработке были проглочены библиотекой, которую вы написали.
Эволюция генератора обещаний обратного вызова Async-Await и обработка исключений
Механизм плагина
Вам необходимо иметь общее представление о различных интерфейсных библиотеках.插件Как механизм реализован, вы также можете интегрировать свой собственный подходящий механизм плагинов, когда вы разрабатываете некоторые библиотеки самостоятельно.
Смущают ли промежуточное ПО Koa onion, промежуточное ПО Redux и перехватчики Axios? Для достижения упрощенной версии это полностью понятно.
Шаблоны проектирования
Для некоторых сложных сценариев ваша разработка больше не может бытьif elseПосле вложения челнока вам нужно внимательно изучить режим проектирования и выбрать соответствующий режим проектирования в соответствующей сцене. Здесь я рекомендую буклет Nuggets, я верю, что этот буклет заставит вас工程能力Получите качественный скачок, например, используемый в исходном коде Vue观察者模式,发布订阅模式,策略模式,适配器模式,发布订阅模式,工厂模式,组合模式,代理模式,门面模式и т.п.
И если вы не изучили эти шаблоны проектирования, вам может быть трудно придумать, как применить их в инженерии, но если вы их изучите, это станет вашим внутренним миром.工程能力, в более крупном масштабе это также может быть架构能力часть.
В книге «Шаблоны проектирования» мы упомянули, что даже в быстро меняющейся области фронтенда есть некоторые знания с характеристиками «выучил один раз — пользуйся всю жизнь». С инженерной точки зрения я рекомендую вам сосредоточиться на шаблонах проектирования. -Модификация
Здесь рекомендуются Nuggets XiuyanБуклет с шаблонами проектирования.
развивать идеи
Иногда композиция лучше наследования.Не только объектно-ориентированное программирование может добиться повторного использования, но в некоторых сценариях идея композиции может быть более лаконичной и элегантной.
"...проблема с объектно-ориентированными языками заключается в том, что у них есть вся эта неявная среда, которую они носят с собой. Вы хотели банан, но получили гориллу, держащую банан и все джунгли." ~ Джо Армстронг — «Кодеры за работой»
Проблема с объектно-ориентированными языками в том, что они привносят все эти неявные среды. Вы хотите банан, а получаете гориллу с бананом и целые джунгли.
спецификация кода
Вы должны быть знакомы с clean-code-javascript и глубоко интегрировать его в свою повседневную разработку, создавая свои собственные спецификации на основе сценариев вашей группы.
clean-code-javascript
алгоритм
Алгоритмы Я не рекомендую здесь различные брошюры, заметки и посты в блогах. Поскольку, судя по моему собственному опыту изучения алгоритмов, в принципе трудно читать и понимать статью без слишком большого количества алгоритмической основы, здесь я рекомендую только г-на Бобо с MOOC.com.Курс LeetCode «Реальные вопросы», В этом курсе мастер алгоритмов бобо очень тщательно превратит каждый алгоритм в движущуюся карту и объяснит вам настоящие вопросы различных категорий LeetCode от мелкого до глубокого. Это один из самых полезных курсов, которые я прошел за последнее время.
Поскольку в этом курсе в качестве основного языка используется C++ (это не влияет на понимание курса), я также поддерживаю соответствующийJavaScript-версия склада решения проблем, В Выпуске пояснения к каждому типу вопросов также отсортированы в соответствии с классификацией меток, добро пожаловать Звездочка ✨.
Важны ли алгоритмы для интерфейса? Может быть, вы думаете, что задавать вопросы бесполезно, но после того, как я отвечаю на вопросы и разбираю идеи и решения каждого типа вопросов по категориям, я действительно чувствую, что мои способности кодирования быстро улучшаются.
Для многих студентов, которые считают, что они недостаточно умны, чтобы изучать алгоритмы, я рекомендую эту статью учителя Бобо.«Рожденный не умным», и именно эта статья вдохновила меня начать свое путешествие по изучению алгоритмов.
Вот список базовых знаний об алгоритмах, которыми должен овладеть интерфейс, надеясь дать вам маршрут:
- Анализ сложности алгоритма.
- Алгоритмы сортировки, их отличия и оптимизации.
- Двойной указатель в массиве, идея скользящего окна.
- Используйте Map и Set для решения проблем с интерполяционными таблицами.
- Различные проблемы со связанными списками.
- Решайте задачи с бинарными деревьями, используя рекурсию и итерацию.
- Стек, очередь, DFS, BFS.
- Поиск с возвратом, жадные алгоритмы, динамическое программирование.
Алгоритмы — это основа нижнего слоя, заложив прочный фундамент, вы получите большую пользу в своей последующей карьере.
Я также рекомендую свои интегрированные статьи здесьРасширенное руководство по интерфейсным алгоритмам.
Рамочные статьи
Для старших инженеров у вас должен быть фреймворк, который у вас под рукой, это как острый меч в руке, позволяющий перерезать тернии и убить всевозможные проекты.
Ниже я разделюVueа такжеReactПодробно обсуждаются два аспекта.
Vue
Что касается Vue, я в основном учусь у г-на Хуан И и серьезно следую за ним.По сути, во Vue вы можете быть практически непобедимым.
Умелое использование
-
Для Vue вы должны очень хорошо его использовать, и вам в основном нужно пройти через все API на официальном сайте. И вам нужно использовать некоторые продвинутые API для достижения умной инкапсуляции. Приведите несколько простых примеров.
-
вам нужно знать, как использовать
slot-scopeСделайте некоторую инкапсуляцию, которая разделяет данные и пользовательский интерфейс. кvue-promisedВозьмите эту библиотеку в качестве примера. Компонент Promised не заботится о том, как выглядит ваше представление, он просто помогает вам управлять асинхронным процессом и передаватьslot-scope, отправляет вам данные в нужное время и помогает отображать представление, которое вы передали.
<template>
<Promised :promise="usersPromise">
<!-- Use the "pending" slot to display a loading message -->
<template v-slot:pending>
<p>Loading...</p>
</template>
<!-- The default scoped slot will be used as the result -->
<template v-slot="data">
<ul>
<li v-for="user in data">{{ user.name }}</li>
</ul>
</template>
<!-- The "rejected" scoped slot will be used if there is an error -->
<template v-slot:rejected="error">
<p>Error: {{ error.message }}</p>
</template>
</Promised>
</template>
- Вы должны быть опытным
Vue.extends, сделайте что-нибудь с проектом命令式apiупаковка. И знать, почему это работает именно так. (требуется знание исходного кода)подтвердить компонент
export const confirm = function (text, title, onConfirm = () => {}) {
if (typeof title === "function") {
onConfirm = title;
title = undefined;
}
const ConfirmCtor = Vue.extend(Confirm);
const getInstance = () => {
if (!instanceCache) {
instanceCache = new ConfirmCtor({
propsData: {
text,
title,
onConfirm,
},
});
// 生成dom
instanceCache.$mount();
document.body.appendChild(instanceCache.$el);
} else {
// 更新属性
instanceCache.text = text;
instanceCache.title = title;
instanceCache.onConfirm = onConfirm;
}
return instanceCache;
};
const instance = getInstance();
// 确保更新的prop渲染到dom
// 确保动画效果
Vue.nextTick(() => {
instance.visible = true;
});
};
-
вы хотите начать использовать
JSXПриходите писать сложные компоненты в свой проект.Например, в моем облачном музыкальном проекте Netease я столкнулся ссложные требования к музыкальной форме, который поддерживает подсветку текста поиска, динамическое скрытие столбцов и многое другое.
Конечно, для текущей версии Vue JSX по-прежнему не очень удобен в использовании, там много свойств, которые нужно прописывать во вложенных объектах, что доставит массу лишних хлопот, например, нет возможности напрямую передать реквизиты, переданные из внешних компонентов, таких как React. В rfc Vue3 упоминается, что атрибуты узлов vnode будут еще больше сглажены. Мы с нетерпением ждем возможности получить идеальный опыт разработки JSX, близкий к React. -
Вы должны иметь глубокое понимание принципа nextTick в Vue и знать, почему очереди микрозадач лучше очередей макрозадач, а также глубоко размышлять над своими знаниями цикла событий. наконец в твоем
异步合并优化в систему знаний.
Подробное объяснение исходного кода NextTick Vue: MutationObserver — это просто облако, а микрозадача — это ядро! -
Вы должны уметь понимать компоненты высшего порядка в Vue. Что касается вопроса, почему слот-прицел не работает в этой статье, вы не можете прочитать его статью, чтобы объяснить это. (Необходимо знание исходного кода)
Исследуйте компоненты высшего порядка Vue | HcySunYang -
Я рекомендую статью о высокоуровневых компонентах Vue, которую я обобщил сам, которая включает в себя некоторые расширенные возможности использования.
Vue advanced должен изучить высокоуровневые компоненты HOC -
Вы должны быть очень опытными в использовании Vuex, знать, когда использовать Vuex, знать, как писать плагины Vuex в соответствии с вашими потребностями, и разумно использовать функцию подписки Vuex для завершения некоторой инкапсуляции глобального измерения.Например, я слишком ленив, чтобы обрабатывать обработка ошибок действий в Vuex. go one by one
try catch, который инкапсулируетvuex-error-plugin. Код простой, важно понять, почему он работает. используется здесьmonkey patchПрактика не является хорошей практикой, только в качестве введения. -
Вы должны быть очень опытны в использовании vue-router и знать, какие хуки маршрутизатора вам нужно использовать, чтобы вы могли провести большой проект.Я думаю, что передовые китайские документы на официальном складе на самом деле очень хороши, я не знаю, почему кажется, что нет на официальном сайте.
vue-router-advanced -
Поймите суть виртуального DOM, обязательно ли виртуальный DOM быстрее реального? Это ответ You Yuxi.После прочтения этого ответа, я думаю, вы лучше поймете и поймете виртуальный DOM.
В Интернете говорят, что работа с настоящим DOM медленная, но результаты тестов быстрее, чем у React.Почему?
Подробный исходный код
-
Вам нужно не только уметь пользоваться Vue, но и потому, что исходный код Vue очень красиво написан и его не очень сложно читать, многие люди предпочитают читать исходный код Vue. Видеокурс здесь рекомендует курс исходного кода Vue г-на Хуан И. Исходный код для Vuex и vue-router также включен сюда.
Всесторонний углубленный анализ исходного кода Vue.js (включая анализ исходного кода Vue3.0) -
Рекомендуется анализировать Vue of HcySunYang построчно, вам необходимо загрузить репозиторий git и переключиться на ветку Elegant, чтобы запустить его локально.
Построчный анализ исходного кода Vue -
Конечно же, ветка master этого репозитория тоже является сокровищем, это авторские статьи серии рендереров, которые не в кадре объясняют суть алгоритмов vnode и diff.
Природа компонентов
Внешний вид Vue3
- Vue3 выпустил бета-версию, вы можете узнать заранее
Hookсоответствующий режим развития. Здесь я рекомендую это введение, связанное с Vue3, которое я написал:
Что такого хорошего в Vue3? (Подробное сравнение с React Hook)
Исходный код Vue3
Что касается отзывчивой части, если вы уже хорошо знакомы с принципом отзывчивости Vue2, то принцип отзывчивости Vue3 не должен быть для вас слишком сложным. Даже во время обучения вы будете сравнивать друг друга, узнавая, почему Vue3 лучше, какие части Vue2 нужно улучшить и т. д.
Vue3 фактически заменяет реализацию на более мощный Proxy и делает адаптивную часть более абстрактной, можно даже сказать, что адаптивная модель Vue3 ближе.响应式类库ядро, дажеreact-easy-stateБиблиотека управления отзывчивым состоянием React также сделана на этом же ядре.
Опять же, очень, очень рекомендуется изучить Vue3.@vue/reactivityэтот субподряд.
Давайте подтолкнем волну вашей собственной статьи, в которой подробно объясняется основной процесс отзывчивости Vue3.
После изучения поставил@vue/reactivityПакет легко интегрируется в React, создавая библиотеку управления состоянием, что с другой стороны доказывает степень абстракции этого пакета:
40 строк кода для интеграции отзывчивости Vue3 в React для управления состоянием
React
React вступил в стадию хуков, и различные библиотеки в сообществе также активно используют хуки.Хотя у него все еще есть много подводных камней и недостатков, это в основном будущее направление. В этой статье я уменьшу упоминание навыков разработки компонентов класса, ведь многие хорошие компании полностью внедрили хуки.
Квалифицированное приложение
-
Вы должны освоить все приемы, упомянутые на официальном сайте, и даже если вы не использовали их раньше, вы, вероятно, должны знать, где их использовать.
-
Рекомендовать книгу React.Хотя многие API в книге были обновлены, основные идеи дизайна не изменились.
Маленькая книга React.js -
Что касается квалифицированного применения, в буклете Nuggets на самом деле есть несколько сокровищ.
-
Брошюра системы управления уровня предприятия искреннего босса (скажу вам тихо, его ранг очень высок), код в этом проекте очень глубокий, и он безупречен в абстракции и оптимизации, и абстрагирует его сам по себе
aclсистема управления правами иrouterуправление маршрутом и представилreselectЧтобы сделать оптимизацию производительности, когда я впервые прочитал это год назад, я был невежествен во многих местах.В этом году я также обработал комплект ремней с нуля.aclа также权限路由Только после того, как он разработал систему управления, он понял, насколько сильны его способности к абстракции. На самом делеКогда я впервые услышал это, я не знал смысла песни, но когда я услышал это снова, это уже был человек в песне.
-
React Hooks и Immutable data stream от Sanyuan помогут вам реализовать музыкальный проигрыватель простым языком. Все знают Сан Юаня, верно? Это Бог. Бог приведет вас к написанию прикладных проектов. Можете ли вы что-то понять, если не научитесь этому?React Hooks и неизменяемый поток данных в действии
-
-
Глубокое понимание React.
key
understanding-reacts-key-prop -
React официальные члены команды для
派生状态Мышление:
you-probably-dont-need-derived-state
React Hook
Вы должны владеть навыками Hook, в дополнение к официальной документации сайта:
-
Порекомендуйте блог Дэна, он один из настоящих авторов кода Хука, посмотрите, что он говорит достаточно авторитетно? Вот продуманная китайская версия.
Полное руководство по использованию эффектов
Прочитав это, введитедомашняя страница блога Дэна, узнайте все, что связано с крючком, все интенсивное чтение! -
Рекомендовать еженедельную серию интенсивного чтения Хуан Цзыи
096. Интенсивное чтение "Полное руководство по использованию эффекта".md
Уведомление! Не просто прочтите эту, а прочтите все статьи о React Hook в этом репозитории и проанализируйте их своими мыслями. -
Серия ловушек с крючками Это все-таки статья брата Дэна, в которой подробно объясняется так называемая
闭包陷阱Причины и компромиссы в дизайне.
Чем функциональные компоненты отличаются от компонентов класса? -
Найдите в сообществе несколько нестандартных зацепок, чтобы увидеть, можно ли их идеи разработки и дизайна интегрировать в вашу повседневную разработку.
Интенсивное чтение "Извлечение хуков - исходный код swr"
Umi Hooks — помогите освоить React Hooks
Один из системных дизайнов React Hooks — Layering
Реагировать на оптимизацию производительности
Оптимизация повторного рендеринга компонентов в React, вот несколько скрытых знаний.
optimize-react-re-renders
Как оптимизировать функциональные компоненты React для повышения производительности? Эта статья очень подробная, и ее стоит внимательно прочитать.Как оптимизировать функциональные компоненты React
Реагировать модульные тесты
-
использовать
@testing-library/reactТестовые компоненты, причина, по которой эта библиотека лучше, чем ферменты, заключается в том, что она больше фокусируется наС точки зрения пользователятестировать компонент, а не компонентдетали реализации.
Introducing The React Testing Library
Testing Implementation Details -
использовать
@testing-library/react-hooksТестировать пользовательские хуки
how-to-test-custom-react-hooks
Сочетание React и TypeScript
-
Этот репозиторий очень подробно описывает, как сочетать React и TypeScript, и дает несколько примеров расширенного использования, это стоит посмотреть!
react-typescript-cheatsheet -
Эта статья была написана студентами из Департамента технологии обработки данных Ant Financial, На самом деле, помимо технических статей здесь, студенты из Ant Financial также наглядно объяснили нам, как старший студент, работающий с фронтендом, отправился в сообщество, чтобы найти решения. Я искренне восхищаюсь тем, как придумать и реализовать это в проекте.
Практика управления React + Typescript Engineering -
Большой парень из Microsoft возьмет вас с собой, чтобы написать типобезопасный компонент, который очень глубокий и очень приятный...
Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript) -
React + TypeScript 10 шаблонов ошибок, которых следует избегать.
10-typescript-pro-tips-patterns-with-or-without-react
Абстрактное мышление в коде React
-
Когда следует разбивать код на компоненты?
when-to-break-up-a-component-into-multiple-components -
Тщательно продумайте, куда следует поместить состояние в вашем приложении React, будь то сам компонент, повышенный до родительского компонента, или локальный контекст и избыточность, которые помогут повысить производительность и удобство обслуживания приложения.
state-colocation-will-make-your-react-app-faster -
Тщательно продумайте, как следует управлять состоянием в компонентах React, расставьте приоритеты с использованием производных состояний и оптимизируйте их с помощью таких библиотек, как useMemo, reselect и т. д., когда это уместно.
dont-sync-state-derive-it -
В пользовательском хуке React Hooks показано, как использовать режим редуктора для обеспечения более гибкого управления данными, позволяя пользователям контролировать данные.
the-state-reducer-pattern-with-react-hooks
TypeScript
С появлением Vue3 TypeScript внезапно стал популярным. Это хорошая вещь, подталкивающая интерфейс к изучению строго типизированных языков и более строгой разработке. А добавление поддержки типа ts стороннего пакета избавляет нас от необходимости открывать документ и во многих случаях проводить пальцем по API.
Что касается изучения TypeScript, на самом деле, несколько месяцев назад я ничего не знал об этом надмножестве JavaScript.После двух-трех месяцев медитации я смог понять некоторые относительно сложные типы.
Можно сказать, что изучение TypeScript полностью отличается от изучения библиотеки или изучения фреймворка.
начиная
-
В дополнение к официальной документации есть несколько хороших вводных руководств по китайскому языку.
Руководство по началу работы с TypeScript -
TypeScript Deep Dive Очень качественное вводное обучение английскому языку.
TypeScript Deep Dive -
Генераторы инструментов очень часто используются в повседневной разработке, и их необходимо освоить.
Использование и реализация некоторых дженериков инструментов в TS -
Видеокурс все еще от Huang Yi, и этот курс очень полезен для модульного тестирования, интерфейса рукописного ввода и принципов сетевых запросов.
Рефакторинг аксиом с нуля на основе TypeScript
Передовой
-
С помощью многих случаев эти пять статей объясняют нам некоторые продвинутые способы использования ts.Пожалуйста, обязательно попробуйте снова и снова в ide, поймите и вовремя вернитесь к документации для концепций, которые вы не понимаете.
Всего пять статей из серии TypeScript. -
Очень важный момент продвижения TS, условные типы, многие родовые производные должны использовать его силу.
conditional-types-in-typescript -
И все статьи TS в блоге этого большого парня выше.
mariusschulz.com
настоящий бой
-
Практический бой с упрощенными параметрами требует много дополнительных очков знаний.
- 🎉Расширенный тип для TypeScript
- 🎉Условные типы
- 🎉Распределительные условные типы
- 🎉Сопоставленные типы
- 🎉 Перегрузка функций
Параметры TypeScript упрощают бой
-
Реализация упрощенной версии Vuex также полна знаний.
- 🎉 Расширенные типы для TypeScript (Advanced Type)
- 🎉Обратный вывод типов с использованием дженериков в TypeScript. (Generics)
- 🎉Сопоставленные типы
- 🎉Распределительные условные типы
- 🎉Практическое применение Infer в TypeScript (Очень важное использование infer в исходном коде Vue3)
Упрощенная версия Vuex для TS для реализации интеллектуального вывода типов.
преднамеренное обучение
Это почти новый язык (в мире типов), и чтобы хорошо его выучить, нужно приложить немало усилий.
Мой совет по изучению TypeScript на самом деле является ключевым словом:刻意训练, при рассмотрении основных понятий потрудитесьvscodeНажми, пойми, подумай. После того, как основные понятия закончены, поищите практические статьи, такие как моя выше进阶а также实战Некоторые рекомендуемые статьи, продолжение刻意训练, вы должны накопить количество кода, изучение нового языка невозможно добиться успеха, читая документацию.
Я создам репозиторий для записи того, с чем я столкнулсяИнтересный код на TypeScript, выбейте его сами, и разберитесь в нем досконально.
Оценка способностей
Фактически, возможности TypectScript также разделены на два уровня. Для ежедневного написания бизнеса вы определяете некоторые интерфейсы и сотрудничаем с официальными встроенными типами, такими как Rect.fc. Нет ничего особенно сложного.
А как насчет изготовления колес? Если вы сами пишете библиотеку инструментов, и тип ее более сложный, можете ли вы гарантировать ее вывод? Или возьмем в качестве примера Vue3, ref — очень сложный вложенный тип,
Если мы определим такое значениеconst value = ref(ref(2)), для вложенных ссылок Vue3 сделает слой拆包, то есть фактическиref.valueбудет 2,
Итак, как это заставляет TS подсказать, что тип стоимости номер?
Если вы видите этот код в исходниках, если у вас есть только основы, вы гарантированно запутаетесь.
Vue3 следует за You Yuxi, чтобы изучить тип TypeScript Ref с нуля
// Recursively unwraps nested value bindings.
export type UnwrapRef<T> = {
cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : T
ref: T extends Ref<infer V> ? UnwrapRef<V> : T
array: T
object: { [K in keyof T]: UnwrapRef<T[K]> }
}[T extends ComputedRef<any>
? 'cRef'
: T extends Array<any>
? 'array'
: T extends Ref | Function | CollectionTypes | BaseTypes
? 'ref' // bail out on types that shouldn't be unwrapped
: T extends object ? 'object' : 'ref']
разработчик бизнеса
Если ваши требования к себе в краткосрочной перспективе заключаются в том, чтобы иметь возможность начать бизнес, то вы понимаете основы TypeScript.interfaceа такжеtypeОбычного использования записи и обобщений (которые можно понимать как передачу параметров функции в системе типов) также достаточно.
Рамочный разработчик
Но долгосрочный, если ваша цель - написать какой-то тип идеальной библиотеки или структуры, или вы играете в компании前端架构师,轮子专家В ожидании ролей вам часто нужно написать несколько низкоуровневых библиотек для использования вашими друзьями, поэтому вы должны тщательно изучить их, чтобы предоставить пользователям идеальную работу с вашим фреймворком.
вопросы интервью
Я не вижу много вопросов на собеседовании, связанных с TypeScript, но力扣中国Вопросы на собеседовании у ТС довольно сложные, среди них есть вопрос на собеседовании у ТС, который можно назвать и практичным, и сложным, проще говоря, распаковывающим.
// 解开参数和返回值中的Promise
asyncMethod<T, U>(input: Promise<T>): Promise<Action<U>>
↓
asyncMethod<T, U>(input: T): Action<U>
// 解开参数中的Action
syncMethod<T, U>(action: Action<T>): Action<U>
↓
syncMethod<T, U>(action: T): Action<U>
Я смог относительно легко решить эту проблему после двух или трех месяцев интенсивного изучения ТС. Я считаю, что это также показывает, что мой путь обучения не сбился с пути.映射类型а такжеinferупотребление).
Лекция вопросы интервью
качество кода
стиль кода
-
Интегрируйте Prettier + ESLint + Руководство по стилю Airbnb в проектintegrating-prettier-eslint-airbnb-style-guide-in-vscode
высококачественная архитектура
- Как провести рефакторинг проекта с открытым исходным кодом, получившего более 10 000 звезд — BetterScroll, от босса DidiДжи ЧжиТак совпало, что эта статья не только знакомит с обеспечением качества кода, процессом тестирования и процессом непрерывной интеграции, которые должен выполнять квалифицированный проект с открытым исходным кодом, но также отражает некоторую глубину его мышления, которую очень стоит изучить.
Как провести рефакторинг проекта с открытым исходным кодом, получившего 10 000 звезд — BetterScroll
Информация о коммите Git
-
Многие новички пишут очень небрежно, отправляя информацию в Git, например:
fix,test,修复, Если вы так одурачены, вы будете побиты лидером!Спецификация Git-Commit-Log (спецификация Angular)
commitizenИнструмент фиксации, который стандартизирует процесс, и стандартный формат фиксации также позволит инструменту помочь вам создавать дружественные
changelog
инструменты для сборки
- Основы и оптимизация WebPack
Углубленный веб-пакет - Серии углубленного анализа исходного кода webpack от фронтенд-инженера Didi очень хороши.
Обзор одной из серий webpack - Серия основных веб-пакетов ByteDance Fan Wenjie:[Обзор из 10 000 слов] Узнайте об основных принципах Webpack в одной статье
оптимизация производительности
-
Рекомендовано мудрецомБрошюра по оптимизации производительности, это действительно объясняется простым языком, от
webpackприбыть网络прибытьdom操作, вы можете провести всестороннюю оптимизацию производительности. Когда я читал этот буклет, я действительно не мог остановиться Стиль Сюяня был одновременно беззаботным и юмористическим. Но то, что объясняется, может принести вам много пользы. -
Излишне говорить, что глава Google Developers по оптимизации производительности, верно? Очень авторитетный. Левая часть строки меню и более релевантный контент, может выбрать для изучения спроса.
user-centric-performance-metrics -
Давайте подробно поговорим о слое синтеза. Синтез слой далеко и рядом с нами. Это может быть вызвано одним из ваших небрежных операций.
层爆炸, конечно нужно внимательное отношение. По крайней мере, когда производительность ограничена, вы можете открыть хромlayerпанель, чтобы увидеть, как ваша страница распределена по слоям.
Подробно о композиции слоя (композита) -
Руководство по оптимизации производительности Лю Боуэна ясно объясняет несколько важных моментов оптимизации веб-страницы.
Сделайте ваши веб-страницы более плавными
обсуждение в сообществе
Как квалифицированный фронтенд-инженер, вы должны активно углубляться в сообщество, чтобы понимать последние тенденции, например, вtwitterСледите за своими любимыми разработчиками технологий, такими как Dan, Yuxi You.
Кроме того, многие вопросы на Github также являются сокровищами для обсуждения.Я просто приведу несколько примеров, основанных на моем недавнем изучении Vue3.
Почему Vue3 не требует разделения времени?
Вы, Юси, объяснили, почему функция разделения времени React не была добавлена в Vue3? И подробно разобрал некоторые отличия между React и Vue3, и пустил волну Vue3 (любовь-любовь).
Why remove time slicing from vue3?
vue3composition-apiГде это находится?
RFC, относящийся к функциональному API Vue3, особенно к конфуцианству, объясняет идеи дизайна Vue3 и так далее.
Amendment proposal to Function-based Component API
Vue3composition-apiдокументация из первых рук
Документ rfc vue-composition-api, когда внутренняя информация не полная, я пошел читать его
vue-composition-api-rfcАнглийская версия документа потрясает идеями дизайна, и я почерпнул много отличных идей.
Короче говоря, для вашего любимого репозитория вы можете зайти в его выпуск, чтобы посмотреть, есть ли интересные обсуждения, и вы узнаете много нового. И можно синхронизироваться с идеями автора, что бывает очень редко.
Некоторые высадки о крючках
Я поглощаю большую волну Vue3composition-apiПосле объяснения дизайнерских идей Vue3 и сравнения старого и нового режимов эта статья представляет собой мое мнение о новом режиме Vue3.
Vue3 Composition-Api + TypeScript + исследование нового режима управления состоянием.
В Vue2 вы можете передатьpluginпервый опытcomposition-api, перехватите небольшую часть кода в реальном боевом проекте, соответствующем этой статье:
<template>
<Books :books="booksAvaluable" :loading="loading" />
</template>
<script lang="ts">
import { createComponent } from '@vue/composition-api';
import Books from '@/components/Books.vue';
import { useAsync } from '@/hooks';
import { getBooks } from '@/hacks/fetch';
import { useBookListInject } from '@/context';
export default createComponent({
name: 'books',
setup() {
const { books, setBooks, booksAvaluable } = useBookListInject();
const loading = useAsync(async () => {
const requestBooks = await getBooks();
setBooks(requestBooks);
});
return { booksAvaluable, loading };
},
components: {
Books,
},
});
</script>
<style>
.content {
max-width: 700px;
margin: auto;
}
</style>
Этот фактический бой соответствует складу:
И из-за этого иReact HookВо многом мышление тоже очень похоже, что даже для меня вReact HookИспользование вышеперечисленного также приносит большую пользу, например идея организации кода,
при первом использованииHookПри разработке большинство людей могут по-прежнему сохранять свои прежние идеи и вкладыватьstateЦентрализуйте определение в первом большом разделе кода, поместитеcomputedЦентральное определение во втором абзаце, поставитьmutationОпределение находится в третьем абзаце.Если вы не читали объяснение дизайнерских идей Ю Да, я всегда этим занимался.
Но почему Logical Concerns лучше, чем Option Types для Vue2 и React Class Component? прочитай этоdetailed-designВы поймете эту главу, и она станет неотъемлемой частью вашего ежедневного развития.
Короче говоря, прочитав эту статью, я решительно извлек код первого экранного компонента в компании прямо в n пользовательских хуков, а повышение эффективности обслуживания — это как полет на ракете.
Конечно, в сообществе определенно есть более ценные темы, я перечислил лишь некоторые, но они значительно расширили мое техническое видение и действительно интегрировались в бизнес-практику компании.具有业务价值из. Я надеюсь, что у вас выработается привычка следить за выпусками и не отставать от английского сообщества, Чисто техническая атмосфера обсуждения в выпусках Github действительно сравнима с немногими местными сообществами.
function AppInner({ children }) {
const [menus, setMenus] = useState({});
// 用户信息
const user = useUser();
// 主题能力
useTheme();
// 权限获取
useAuth({
setMenus,
});
// 动态菜单也需要用到菜单的能力
useDynamicMenus({
menus,
setMenus,
});
return (
<Context.Provider value={user}>
<Layout routers={backgrounds}>{children}</Layout>
</Context.Provider>
);
}
можно увидеть,HookОн имеет уникальные преимущества в организации кода, и даже каждый模块Передача значений между ними настолько естественна, это просто функция передачи параметров.
Короче говоря, сообщество запустило что-то новое, что всегда решает некоторые из предыдущих проблем. Давайте последуем за идеей босса, и должно быть мясо.
Проблема встряхивания дерева
Статья Мастера СянаВаш Tree-Shaking бесполезен, а также подробно описал его副作用Некоторые процессы разведкиПроблемы с UglifyJSЯ нашел окончательный ответ в , а затем внес свой вклад в китайское сообщество. Сначала это содержимое не будет отображаться ни в одном китайском сообществе, и его изучение и обнаружение зависит только от вас.
Изменения в методах обучения
От начального и промежуточного фронта до продвинутого фронта есть очень важный момент, то есть во многих случаях материалов которые можно найти в отечественном сообществе не хватает, а много качественных материалов а также переводы из вторых и третьих рук от иностранных сообществ.Качество перевода также не гарантируется.
Это приводит к первому пункту нашего передового,Начать принимать английский.
Многие студенты здесь сказали, что мои знания английского недостаточно хороши, чтобы понять. На самом деле хочу сказать, что владение английским языком у автора тоже очень общее.С прошлого года я поставила себе цель, то есть с трудом начать читать англоязычные статьи и материалы, а когда встречаю слова не понимаю не пойму, вытащу и прочитаю... Двумя глазами (не проговаривая намеренно), встретив это слово в пятый или шестой раз, я почти вспомнил, что оно означает.
Примерно через полгода (вероятно, поддерживая объем чтения более 3 статей в неделю) я невооруженным глазом чувствую, что мои знания английского улучшаются. Во многих случаях я могу прочитать статью полностью, не используя слово «перевод». плагин.
Вот некоторые записи о моем чтении качественных статей на английском языке в то время,
Чтение технических статей на английском языке
Позже чтение на английском постепенно стало более естественным занятием, поэтому я специально не записывала его, я могу использовать этот метод, чтобы мотивировать себя на раннем этапе.
Порекомендуйте два англоязычных сайта, там много качественных фронтенд статей.
Medium может потребовать некоторых научных инструментов для просмотра, но членские взносы и поощрения авторов внутри делают статьи очень качественными. Войдите в свою учетную запись Google, чтобы стать участником. На начальном этапе некоторые статьи, связанные с внешним интерфейсом, могут быть не рекомендованы для размещения на главной странице. Вы можете выполнять поиск по ключевым словам, таким какVue,React,Webpackлюбой интерфейсный стек технологий, который вас интересует, не займет много времени, прежде чем на вашей домашней странице появится рекомендованный интерфейсный контент. Наслаждайтесь этим высококачественным англоязычным сообществом.
О практике
В сообществе есть много воротил, которые очень сильны, но они насмехаются над вновь написанным кодом, думая, что естьanyне называетсяTypeScript, думаю нет单元测试Не имеет права размещать его на Github. На самом деле они не виноваты в подобных высказываниях, они лишь параноики в отношении требований открытого программного обеспечения. Но для новичков такого рода замечания могут легко задеть всех, поэтому они не осмеливаются писать т.с. и не осмеливаются публиковать то, что пишут. На самом деле, вам не нужно.工业聚Я опубликовал очень хорошее мнение по этим вопросам, что меня глубоко тронуло.То есть в начале этой статьи я медленно преобразовывал старый проект с помощью ts и медленно продвигался вперед.
После того, как Vue 3.0 выставит код...
Суммировать
Эта статья является абстрактным изложением моего опыта обучения за последний год, и я буду добавлять в эту статью много вещей одну за другой.
Я надеюсь, что вы можете получить что-то, как вы начинаете с первичного промежуточного инженера. Если вы можете вам помочь, это мое самое большое удовлетворение.
Продолжение ... непрерывное обновление.
❤️ Всем спасибо
1. Если эта статья была вам полезна, пожалуйста, поддержите ее лайком, ваш "лайк" - движущая сила моего творчества.
2. Подпишитесь на официальный аккаунт »Передняя часть от продвинутого до допуска», выберите супер качественные статьи, которые помогут вам стать богом во фронтенде.