Я работаю уже полтора года с момента стажировки.В этот период я глубоко ощутил бурное развитие фронтенд-сферы.Я записал здесь свой собственный процесс роста,который является своего рода знанием.Я также надеюсь помощь новым ученикам. Стыдно сказать, в университете не было передовых знаний, я тогда очень запутался в своей должности и не знал, что делать после выпуска. Так что я вслепую записался на многие курсы, а также сдал экзамен на сертифицированного сетевого инженера Cisco.Хоть я и не выбрал сетевое направление, эти знания действительно очень помогли мне после работы.В конце концов, сеть — это основа .
В то время, в моем понимании, фронтенд был просто написанием страниц, выполнением взаимодействий и вырезанием картинок. В то время я не слышал о строительных лесах, инструментах сборки или даже ES6. ЧувствоватьjQueryЭто действительно как спаситель.
В первый день, когда я пришла в компанию, у меня было совсем другое настроение, хотя часов «Свинка Пеппа» в то время еще не было, я тоже чувствовала себя социальным человеком.
В первый день моей работы меня попросили сначала настроить среду разработки, и мне дали лист Excel, который представлял собой длинный список, установленный один за другим, затем вытащил код и выполнил множество команд. Что это за чертовщина? Совершенно не понимаю, что я делаю. Только не забывайте сообщать об ошибках, всяческих непонятных! Так или иначе, это заняло целый день, и я наконец получил это! Таким образом, с основания шлепков, я начал. В начале я не мог понять чужой код, делал все своими дикими идеями, начал сомневаться в своей жизни, когда писал код как запущенный аккаунт.
Пока однажды лидер не кивнул, прочитав кучу кода, который я написал, затем выбрал и удалил. Сразу после этого я нарисовал подчеркивание, десятичную точку и слово, после нескольких предложений код все еще мог работать нормально! Что за черт! Код все еще можно написать так! С тех пор я знаюUnderscoreа такжеlodash. Когда ES6 не используется, эта библиотека действительно является универсальным набором инструментов, который удобен для манипулирования данными.Пока вы понимаете структуру данных, остальное — вопрос одного предложения. В то время мне очень нравился процесс манипулирования данными. Но в настоящее время,babelВведение , код начал поддерживать синтаксис ES6, 7, многиеUnderscoreВысокочастотные функции в библиотеке реализованы нативно, в целях уменьшения размера кода такие библиотеки классов постепенно исчезают из поля зрения людей. Говоря об этом, я должен упомянуть «Вводный курс по ES6» Учителя Жуань Ифэна, который не только подробно знакомит с содержанием грамматики, но и дает большое количество вариантов использования и техник, которые можно назвать классическими.
Вскоре после прихода в компанию я познакомился с первым фронтенд фреймворкомAngular1.x, на основеyeomanЛеса интегрированныеgrunt, только тогда я узнал понятие фронтенда и конструкции. В сравнении сgruntнепонятные конфигурационные файлы,gulpИдея труб кажется более понятной. При использовании фреймворка сама страница меняется после обновления данных, и нет необходимости оперировать DOM. существуетgruntС помощью различных плагинов код также можно изменять и обновлять автоматически, вау! Действительно эффективно! Еще раз освежил мое представление о передке. Затем начните пополнять знания фреймворка, различных инструкций и различных сервисов, чтобы сделать процесс разработки проще и легче. Нам больше не нужно уделять внимание слишком многим оптимизациям типа делегирования событий, фреймворк сделает это сам, так что остается больше времени для самого бизнеса.Angular1.xОн не поддерживает рендеринг на стороне сервера, то есть не дружит с SEO, поэтому мы использовалиjadeЧтобы отобразить страницу, которая должна быть прямо с сервера, я смутно припоминаю, что строгий синтаксический отступ заставляет меня хотеть жить.
Sassа такжеlessи т.д. использовать, пустьcssстать сильнее, сотрудничатьpostcssиспользования, я больше не обращаю внимания на различия между разными браузерами. в тяжелой зависимостиbootstrap, наличие макетов сетки всегда так высоко. Позже я встретилflex, жизнь вроде наладилась!
После мы начали использовать компоненты пользовательского интерфейса для повышения эффективности. Можно сказать, что библиотеки компонентов пользовательского интерфейса расцветают повсюду. Со стороны ПКElement UIа такжеAnt Designявляется более мейнстримным. В реальном использовании по-прежнему необходимо совмещать собственный бизнес и сценарии использования, например, поддерживать лиssr. Позже я также использовал некоторые библиотеки компонентов для мобильных терминалов и небольших программ.Подводя итог, мы должны использовать долгосрочное обслуживание, а выпуск обновлений происходит быстрее, иначе будет очень хлопотно столкнуться с ямами, не спрашивайте меня, как я знать.
Позже я постепенно смог выполнять больше задач и начал участвовать в разработке визуализации данных, поэтому я увидел это сноваechartsа такжеd3.js. Говоря оd3.js, действительно дал мне отношения любви-ненависти. Чтобы нарисовать графику, которую я хочу, я восстановил математические знания, которые я вернул учителю.Каждый день похож на выполнение математических работ, кажется, что я вернулся в ту школьную эпоху! также положитьsvgа такжеcanvasОсновные понятия о. Статья Zhang Xinxu в формате svg очень хорошо написана и разрешила многие мои сомнения.
Когда апплет был впервые запущен в 2016 году, чтобы изучить бонус трафика, мы также хотели воспользоваться преимуществом этого первого запуска. В то время я помогал в разработке апплета. Я читал документ несколько раз, но до сих пор не мог понять идею апплета. А так как после первого релиза техническое обслуживание относительно невелико, так что баловаться больше нечем. В этом году мини-программа вдруг разразилась по-крупному. Я снова начал переделывать содержание мини-программы. Спустя почти год я снова открыл документ. Я не понял документ, который я читал в течение неделю, но я мог начать работу за два часа.Самостоятельно разработал полный апплет, возможно, это рост. Появляется также множество небольших программных рамок, таких как официальнаяwepy, Мэйтуанmpvue. ДобрыйvueИдея снова снижает стоимость обучения разработчиков. Это также довольно жарко для недавнего обжаривания.pwaДля приложений Hekuai личные рекомендации могут быть дополнены по мере необходимости.Если нет бизнес-требований, скорость роста относительно медленная и о ней легко забыть.
17 летVueБлестящий год, его экосистема росла как грибы.webpackЭто также, кажется, стало стандартной конфигурацией переднего плана.Vuexс помощьюFluxразработан с учетом идеи. Это изменило мое представление об управлении данными о состоянии. Перед лицом огромных приложений управление состоянием становится головной болью.VuexЦентрализованное управление – хорошее лекарство! поддерживатьSEO, я использовал в своем проектеNuxtРеализован фронтенд и бэкэнд изоморфизм. Впервые я услышал о концепции изоморфизма на Национальной конференции разработчиков интерфейсов в 2017 году. В то время я чувствовал себя очень далеко от себя. Оглядываясь назад, можно сказать, что многие материалы, представленные на встрече, развивались быстро и постепенно применялись в течение года. Поэтому по-прежнему необходимо участвовать в большем количестве обменов и сессий обмена.
Позже, когда я пытался что-то сделать сам, я стал привлекать знания о сервере и эксплуатации и обслуживании, и оптимизировал каждую ссылку по крупицам. Постепенно повышайте производительность. Начните с маленьких значков на странице. Вместо того, чтобы использовать множество маленьких изображений png, используйтеiconfont, сократить http-запросы, а вектор может обеспечить четкость отображения; код упаковывается, сжимается и объединяется, автоматически загружается в хранилище объектов, снижая нагрузку на сервер, и использует cdn для ускорения; использует код сжатия gzip для уменьшения передачи по сети ;nginxСделать обратный прокси и кэш;pm2сторожитьnodeпроцесс обеспечения доступности услуг; использованиеdockerСлужба развертывания образов упрощает процесс развертывания и позволяет избежать проблем, вызванных различиями в среде и т. д. Словом, каждая ссылка — это наука.
Лично я за последний год, помимо того, что узнал много нового, что более важно, научился получать новые знания, как открывать неизвестные области, как решать проблемы. В начале, если у вас возникнут проблемы, напрямую Baidu или ключевые слова Google, илиstackoverflowНайдите несколько и выберите ответ, получивший наибольшее количество голосов, который всегда может эффективно решить проблему. Однако во многих случаях точная причина неизвестна.
Под руководством коллег я постепенно стал уделять внимание документации. Сначала я подумал, что он просто пишет для новичков, скучно. Но на самом деле в документации указано большинство того, что нужно. Особенно документация сторонних плагинов, если проблему не решить, то пройтись по документации. Все еще не решил? Ну еще раз внимательно посмотри! Или не? Открытьgithub, перейти к плагинуissueСделайте поиск внутри, и если он все еще не работает, воспользуйтесь помощью поисковой системы. Если исходный код не сложный, посмотрите, как написан исходный код! Это более быстрый способ обнаружения и решения проблем, который я описал, и он был опробован и протестирован. При использовании готового плагина постарайтесь угадать принцип реализации кода и по возможности прочитать исходный код, что поможет избежать неправильного использования и облегчит самосовершенствование. Так называемый неправильный способ использования, позвольте мне объяснить это так, если вы обнаружите, что ваш код становится сложным и некрасивым, как запущенный аккаунт, то попробуйте реализовать его с другого ракурса, и всегда верьте, что в этом есть магия. код!
Сфера фронтенда быстро развивается, не обязательно владеть каждым фронтенд фреймворком, нужно понимать конструктивные идеи фреймворков и понимать их отличия. И как бы ни играла современная front-end технология, она со временем вернется кhtml,cssа такжеjavascriptпоявиться. Поэтому прочные базовые знания особенно важны!
cssОн непослушный ребенок, который всегда делает странные вещи! Г-н Чжан Синьсю десять лет оттачивал свой меч и изучал магию CSS, что показывает, насколько сложны технические детали. Конечно, у большинства разработчиков на это может не хватить столько времени и сил, но с большинством основных понятий все же необходимо досконально ознакомиться.javascriptЧто ж, выбери одну из двух классических книг в отрасли (Red Treasure Book, Rhino Book) (мне стыдно, я еще не дочитал ее)! А вот для новичков может больше подойти серия "головой вперед" Начав читать классику, вы неизбежно разочаруетесь. Когда я начинал, я также читал «Искусство программирования DOM на JavaScript», который также рекомендуется для начинающих.
Шаблон проектирования не является загадкой. По сравнению с бэкендом, фронтенд не использует много шаблонов проектирования. Знание большего облегчит вам понимание кода великого бога, а написанный вами код будет становиться все красивее и красивее. Здесь у Amway есть «Шаблоны проектирования и практика разработки JavaScript», написанные г-ном Зенг Таном.
Не буду много говорить о структурах данных, порекомендую книгу "Learning JavaScript Data Structures and Algorithms". Эта книга очень подходит для начинающих. Если вы продвинутый, можете порекомендовать ее мне.
http также является относительно важным знанием, таким как http-кеширование, я не буду говорить о важности кэширования. Я читал книгу «Иллюстрированный http» раньше, и ее легко понять, как читать комиксы.
Внезапно сообразил, что у Amway слишком много книг в статье, что немного заподозрило в рекламе. Не принимайте это как должное, все официальные лица, перечисленные здесь, являются теми, кого я прочитал и нашел полезными, так что каждый может принять их. Чтобы было ясно, я не продавец книг!
У меня есть привычка возвращаться, чтобы увидеть волну набранных JD и собеседования время от времени, не для того, чтобы сменить работу, а чтобы обратить внимание на то, какие таланты всем нужны в последнее время, и какие знания им нужно, чтобы дополнить себя . Знание себя и знание своего врага поможет вам выиграть сотню сражений! В будние дни я также люблю заходить на технический форум, чтобы посмотреть, в какую черную технику все играют. Если есть какие-то технические салоны, то я тоже изредка участвую, и мне приходится следить за развитием технологий и изучать решения крупных производителей.
Наконец, спасибо тем, кто помогал мне на этом пути!
Хорошо, это все на сегодняшнем обмене, если вы хотите узнать больше технических деталей, пожалуйста, слушайте следующую разбивку!