【Перевод】Руководство по прокачке интерфейса

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

Переводчик: Front-end Xiaozhi

оригинал:medium.free код camp.org/from-zero-he… medium.free код camp.org/from-zero-he…

Чем больше вы знаете, тем больше вы не знаете

Ставьте лайк и смотрите снова, формируйте привычку


эта статьяГитхаб:GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

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

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

Чтобы облегчить понимание этого руководства, я разделил его на две части. Первая часть описывает, как разработать интерфейс с помощью HTML и CSS. Часть 2 будет посвящена Javascript, фреймворкам и шаблонам проектирования.

Основы HTML и CSS

Во фронтенд-разработке все начинается с HTM и CSS. HTML и CSS управляют тем, что вы видите на веб-странице. HTML представляет содержимое, а CSS обрабатывает стили и макет.

Во-первых, прочтите Mozilla Developer Network (MDN)HTMLиCSSруководство. MDN объясняет важные концепции HTML и CSS глава за главой. Кроме того, каждая глава занимает всего одну страницу с интерактивными демонстрациями, связанными с CodePen и JSFiddle.

После завершения этих руководств взгляните на CodeAcademy.Make a Websiteкурс. Это руководство займет всего несколько часов и является отличным вводным пособием по созданию веб-сайтов с помощью HTML и CSS. Если wq хочет узнать больше,Building web forms— это еще одно руководство от CodeAcademy, которое проведет вас через создание и оформление веб-форм.

Чтобы попрактиковаться в CSS, попробуйтеCSS Diner. Это забавная игра с вызовом CSS. Еще одним важным аспектом HTML и CSS является макет.LearnLayout— это интерактивный учебник, в котором показано, как создавать макеты с помощью HTML и CSS.

Кроме того, узнайте, как использовать трюки CSS.Гугл шрифтыизОсновы APIзнание. Типографика — это основной строительный блок интерфейса. Если у вас есть время, я настоятельно рекомендую прочитать эту бесплатную онлайн-книгу Донни Труонга.Professional Web TypographyОн научит вас всему, что вам нужно знать о типографике в качестве фронтенд-разработчика.

Не беспокойтесь слишком о памяти с этими ресурсами. Вместо этого основное внимание уделяется пониманию того, как HTML и CSS работают вместе.

Практикуйте основы HTML и CSS

Теперь, когда у вас есть базовые знания HTML и CSS, давайте повеселимся. В этом разделе есть две практики, предназначенные для того, чтобы дать вам практику создания веб-сайтов и интерфейсов. Я использую слово «практика», потому что на практике вы учитесь на неудачах не меньше, чем на успехах.

Практика 1

В нашей первой практике мы будем использоватьCodePen. CodePen — это интерфейсная платформа, на которой вы можете писать код HTML и CSS без необходимости локального хранения файлов. Он также обеспечивает предварительный просмотр в реальном времени, который можно обновить, как только код будет сохранен.

Используя CodePen, вы можете убить двух зайцев одним выстрелом. С одной стороны, вы практикуете HTML и CSS. С другой стороны, вы создаете базовую композицию прогресса. мы также будем использоватьDribbble, это веб-сайт, полный дизайнерского вдохновения.

Найдите на Dribbble дизайн, достаточно простой для написания кода за несколько часов. Для начала я выбрал несколько дизайнов:1,2,3,4и5. Я выбираю веб-дизайн для мобильных устройств, потому что он проще веб-дизайна для настольных компьютеров. Тем не менее, дизайн рабочего стола также свободен в выборе.

После того, как вы определились с дизайном, попробуйте написать его с помощью CodePen. Если вы застряли, помнитеStackOverflowтвой друг. Еще одна полезная практика — доступ к таким объектам, какMedium,AirBnBиDropboxТакие сайты, используйтеинструмент инспектораПосмотрите, как они реализуют различные макеты и стили. Кроме того, посмотрите наpens on CodePen. Я выбрал несколько хороших примеров:

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

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

практика 2

Надеюсь, эта первая практика придаст вам уверенности в написании HTML и CSS. Для практики 2 мы рассмотрим несколько веб-сайтов, а затем напишем несколько компонентов.

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

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

Лучшие практики HTML и CSS

Итак, вы изучили основы HTML и CSS. Следующим шагом является изучение лучших практик. Лучшей практикой является набор неформальных правил для улучшения качества кода.

семантическая разметка

Одной из лучших практик для HTML  и  CSS  является написание семантической разметки. Хорошая «сетевая» семантика означает использование соответствующих тегов «HTML» и осмысленных имен классов CSS для представления смысла структуры.

Например,h1Метка говорит нам, что текст, который она оборачивает, является важным заголовком. Другой примерfooterтег, который говорит нам, что элемент находится внизу страницы. Для дальнейшего чтения прочитайте CSSTricks.Правильная семантика HTML5иКаковы компоненты семантического имени класса.

Соглашение об именах CSS

Следующая важная передовая практика для CSS — это правильные соглашения об именах. Хорошие соглашения об именах, такие как семантические теги, передают смысл и помогают сделать наш код предсказуемым, читабельным и удобным в сопровождении. вы можете найти это в этомOOCSS, ACSS, BEM, SMACSS: что это такое, что использовать?Узнайте о различных соглашениях об именах.

В общем, я предлагаю вам попробовать некоторые простые соглашения об именах, которые вам интуитивно понятны. Со временем вы обнаружите, что лучше всего работает для вас. Чтобы узнать, как такие компании, как Medium, используют соглашения об именах, такие как BEM, прочитайтеCSS Medium на самом деле чертовски хорош.. В этом посте вы также узнаете, что разработка действительного набора соглашений CSS — это итеративный процесс.

Сброс CSS

У каждого браузера есть небольшие несоответствия стиля, от полей до высоты строки. Следовательно, CSS необходимо сбросить.MeyerWebявляется приветственным сбросом. Если вы хотите узнать больше, вы можете прочитатьCreate Your Simple Reset.css File.

Кроссбраузерная поддержка

Кроссбраузерная поддержка означает, что ваш код поддерживает новейшие браузеры. рисунокtransitionТакие свойства CSS требуютпрефикс поставщикакорректно работать в разных браузерах. В этой статье я могу узнать больше о префиксах поставщиков, т.е.Префикс поставщика CSS. Самое главное, вы должны протестировать свой веб-сайт в нескольких браузерах, включая Chrome, Firefox и Safari.

Препроцессор CSS против постпроцессора CSS

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

Препроцессоры CSS — это расширения языка CSS, добавляющие некоторые дополнительные функции, такие как переменные, примеси и наследование. Два основных препроцессора CSS:SassиLess. В 2016 году Sass стал использоваться более широко. Bootstrap, популярный адаптивный CSS-фреймворк, также переходит с Less на Sass. И когда большинство людей говорят о Sass, они на самом деле имеют в видуSCSS.

Постпроцессоры CSS вносят изменения в CSS после того, как они были написаны вручную или скомпилированы препроцессором. Например,PostCSSНекоторые постпроцессоры имеют плагины, которые автоматически добавляют префиксы поставщиков браузеров.

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

Сеточная система и отзывчивость

Система сетки — это структура CSS, которая позволяет размещать элементы по горизонтали и вертикали.

Bootstrap,SkeletonиFoundationПлатформы сетки, такие как Grid, предоставляют таблицы стилей, которые управляют строками и столбцами в макете. Хотя фреймворки сетки полезны, также важно понимать, как работают сетки.Понимание системы сетки CSSиНе переусердствуйте с сеткамиЭти две статьи являются хорошими обзорами.

Одной из основных целей системы сеток является повышение отзывчивости вашего веб-сайта. Отзывчивость означает, что размер вашего сайта изменяется в соответствии с шириной окна. Много раз ответ выполняется с использованиемCSS медиа-запросыРеализовано, правила CSS применяются только к экранам определенной ширины.

Для получения знаний и расширения медиа-запросов вы можете ознакомиться со следующими статьями:

Практикуйте лучшие практики HTML и CSS

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

Практика 3

Для практики 3 выберите проект, над которым вы работали раньше, и используйте полученные знания для рефакторинга кода. Рефакторинг означает написание кода, чтобы сделать его более легким для чтения и простым.

Умение эффективно проводить рефакторинг кода — важный навык для фронтенд-разработчиков. Написание высококачественного кода — это итеративный процесс.Архитектура CSS: рефакторинг вашего CSSпредставляет собой вводное руководство по рефакторингу кода.

При рефакторинге кода следует задать себе несколько вопросов.

* Двузначно ли название вашего класса? По прошествии 6 месяцев вы все еще понимаете, что означает название вашего класса?

*  Являются ли ваши HTML и CSS семантическими?Можете ли вы быстро распознать значение структур и взаимосвязей при просмотре кода?

  • Используете ли вы один и тот же шестнадцатеричный код цвета снова и снова в своем коде?переменные SassЭто имеет больше смысла?

  • Ваш код работает одинаково в Safari и Chrome?

  • Можете ли вы использовать что-то вродеSkeletonСистема сетки для замены кода макета?

  • ты часто используешь!importantлоготип? Как это исправить?

Практика 4

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

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

Во-первых, следите за статьей Адама Данауэя.Простой рабочий процесс для проектирования и разработки веб-сайта портфолио

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

идти в ногу со временем

Хотя HTML и CSS не выйдут из моды в ближайшее время, важно идти в ногу с эволюцией интерфейсной среды.

Ниже приведен список веб-сайтов, блогов и форумов, которые интересно и познавательно читать.

учиться на примере

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

гид по стилю

Руководство по веб-стилю — это набор компонентов и шаблонов CSS, которые можно повторно использовать на веб-сайте. Главное, что следует отметить в этих руководствах по стилю, — это то, как компонентный подход к HTML и CSS позволяет повторно использовать код для поддержания его чистоты (DRY).

Стандарты кодирования

Соглашения о кодировании делают код читабельным и удобным для сопровождения. Некоторые из этих ссылок (например,CSS Guidelines) — это руководство по написанию лучших HTML и CSS, а другие ссылки (например,Github internal CSS toolkit and Guidelines) являются примерами высококачественного кода.

резюме

Надеемся, что к концу этой статьи вы будете знакомы с HTML и CSS и у вас будет несколько проектов. Лучший способ изучить интерфейс — создавать проекты и практиковаться. Помните, что каждый фронтенд-разработчик должен с чего-то начинать. Лучше начать сегодня, чем завтра.

Эта статья является первой в серии из двух частей. Во второй статье рассказывается, как использовать Javascript и библиотеки/фреймворки Javascript для добавления интерактивности, поощрения и совместного прогресса.

Основы JavaScript

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

язык

Прежде чем научиться применять JavaScript в Интернете, вы должны сначала понять сам язык. Во-первых, прочитайте Mozilla Developer NetworkУскоренный курс по основам языка. Этот учебник научит вас основным языковым конструкциям, таким как переменные, условия и функции.

Затем прочитайте MDNРуководство по JavaScriptв следующих частях:

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

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

интерактивность

Теперь, когда у вас есть общее представление о синтаксисе JavaScript, следующим шагом будет его применение в Интернете. Чтобы понять, как JavaScript взаимодействует с веб-сайтами, сначала вы должны понятьОбъектная модель документа (DOM).

DOM — это структура представления HTML-документов. Это древовидная структура, состоящая из объектов JavaScript, соответствующих узлам HTML. Чтобы узнать больше о DOM, прочтите статью CSSTricks."Что такое ДОМ". Он обеспечивает простое и понятное объяснение DOM.

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

var container = document.getElementById(“container”); 
container.innerHTML = 'New Content!';

Не волнуйтесь, это всего лишь простой пример. Манипулируя DOM в JavaScript, вы можете сделать гораздо больше. Чтобы узнать больше о том, как взаимодействовать с DOM с помощью JavaScript, прочитайте MDN.«Объектная модель документа»раздел ниже для рекомендаций.

Опять же, смысл в том, чтобы понять концепции, а не синтаксис, надеюсь, ответив на следующие вопросы:

  • Что такое ДОМ?
  • Как запрашивать элементы
  • Как добавить прослушиватель событий?
  • Как изменить свойства узла DOM?

Список распространенных взаимодействий JavaScript DOM см. в PlainJS.Функции и помощники JavaScript. Сайт предоставляет несколько примеров того, как стилизовать HTML-элементы и подключать прослушиватели событий клавиатуры. Если вы хотите копнуть глубже, вы всегда можете прочитать, что говорит Eloquent.JavaScriptв разделе о ДОМ.

экзамен

Для отладки JavaScript в браузере мы используем встроенные в браузер инструменты разработчика. Большинство браузеров предоставляютinspectorпанель, позволяющая просматривать исходный код веб-страницы. Вы можете отслеживать выполнение JavaScript, выводить операторы отладки на консоль и просматривать такие вещи, как сетевые запросы и ресурсы.

Есть учебник по использованию Chrome DevToolsруководство. Если вы используете Firefox, вы можете просмотреть эторуководство.

Практическая основа

На данный момент еще многое предстоит узнать о JavaScript. Однако последний раздел содержит много новой информации. Думаю, нам пора сделать перерыв и немного потренироваться. Они помогают закрепить некоторые понятия, которые вы только что изучили.

Практика 1

Для практики 1 перейдите кAirBnB, откройте в браузереинспектор страниц, а затем щелкните вкладку Консоль. Здесь вы можете выполнить JavaScript на странице. Что мы собираемся сделать, так это повеселиться, манипулируя некоторыми элементами на странице. Посмотрите, сможете ли вы выполнить все следующие манипуляции с DOM.

  • Выберите тег заголовка с уникальным именем класса и измените текст

  • Выберите любой элемент на странице и удалите его

  • Выберите любой элемент и измените одно из его свойств CSS.

* Выберите метку определенной области и переместите ее вниз на 250 пикселей.

*  Выберите любой компонент, например панель, и отрегулируйте его прозрачность

  • Определите функцию с именем doSomething, определите ее в функции jalert (“Hello world”)затем выполните его

  • Выберите определенный знак абзаца, чтобы зарегистрироватьclickсобытие и запускать каждый раз, когда событие запускаетсяdoSomething

Если вы застряли, см.Руководство по функциям и помощникам JavaScript. На его основе основано большинство этих задач. Вот пример того, как выполнить первый пункт списка:

var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop'

Основная цель этой практики — немного узнать о JavaScript и манипулировании DOM и увидеть их в действии.

практика 2

Используя CodePen, напишите базовую практику JavaScript, которая использует манипуляции с DOM и требует выполнения некоторой программной логики. Смысл этой практики в том, чтобы объединить некоторые вещи, которые вы узнали в части 1 Руководства по прокачке внешнего интерфейса, с JavaScript. Вот несколько справочных примеров, которые могут послужить источником вдохновения.

Больше JavaScript

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

язык

По мере того, как вы будете больше работать с JavaScript, вы столкнетесь с некоторыми концепциями более высокого уровня. Ниже приведен список некоторых из этих понятий. Если у вас есть время, внимательно прочитайте каждый пункт.Кроме того, если вы хотите узнать что-то еще,Eloquent JavaScriptБольшая часть контента закрыта.

императивное и декларативное

Есть два подхода к тому, как JavaScript взаимодействует с DOM.:命令式和声明式. С одной стороны, декларативное программирование фокусируется на том, что происходит. С другой стороны, императивное программирование связано с тем, что и как этого достичь.

var hero = document.querySelector('.hero')
hero.addEventListener(‘click’, function() {
  var newChild = document.createElement(‘p’)
  newChild.appendChild(document.createTextNode(‘Hello world!’))
    newChild.setAttribute(‘class’, ‘text’)
    newChild.setAttribute(‘data-info’, ‘header’)
    hero.appendChild(newChild)
 })
}

Это пример императивного программирования, когда мы вручную запрашиваем элемент и сохраняем состояние пользовательского интерфейса в DOM. Другими словами, сосредоточьтесь на том, как чего-то достичь. Самая большая проблема с этим кодом заключается в том, что он ненадежен. Если человек, работающий с кодом, меняет имя класса в HTML сheroизменить наvillain, прослушиватель событий больше не будет срабатывать, потому что нетheroсвоего рода.

Декларативное программирование решает эту проблему. Вам не нужно выбирать элемент, но оставьте его используемой платформе или библиотеке. Это позволяет сосредоточиться на том, что делать, а не на том, как это сделать. Чтобы узнать больше, проверьтеСостояние JavaScript — переход от императивного к декларативному,а такжеВеб-разработка: декларативная и императивная.

Ajax

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

Например, когда вы отправляете форму на веб-сайте, он собирает ваши данные и делает HTTP-запрос, отправляя данные на сервер. Когда вы публикуете твит в Твиттере, ваш клиент Твиттера отправляет HTTP-запрос к API-интерфейсу сервера Твиттера и обновляет страницу с ответом сервера.

Чтобы узнать об Ajax, см. Что такоеAjax. Если вы все еще не до конца понимаете концепцию AJAX, взгляните наОбъясните, как будто мне 5, что такое Ajax. Если этого недостаточно, вы также можете прочитать о HTTPГлава о JavaScript.

Сегодня стандартом браузера для HTTP-запросов являетсяFetch. Вы можете прочитать больше о Fetch в этой статье Дэна Уолша. В нем объясняется, как работает Fetch и как его использовать. вы также можетездесьНайти Fetch с документациейpolyfill.

jQuery

До сих пор вы использовали JavaScript для манипулирования DOM. На самом деле существует множество библиотек для работы с DOM, которые предоставляют API для упрощения написанного вами кода.

Одной из самых популярных библиотек для работы с DOM являетсяjQuery. Помните, jQuery — императивная библиотека. Он был написан до того, как интерфейсные системы стали такими сложными, как сегодня. Сегодня это декларативные фреймворки и библиотеки, такие как Vue, Angular и React, которые управляют сложными пользовательскими интерфейсами. Тем не менее, я все же рекомендую вам изучить jQuery, так как вы, скорее всего, столкнетесь с ним в своей карьере фронтенда.

Чтобы изучить основы jQuery, ознакомьтесь сУчебный центр jQuery. Он проходит через некоторые важные концепции, такие как анимация и обработка событий. Если вы хотите больше практических руководств, ознакомьтесь с Codecademy.курс jQuery.

ES5 vs. ES6

Еще одна важная концепция для понимания  JavaScript  — это  ECMAScrip t и как это связано с  JavaScript . Сегодня вы обычно видите две основные разновидности  JavaScript : ES5  и  ES6. ES5  и  ES6  — это стандарты ECMAScript, используемые  JavaScript . Вы можете думать о них как о версиях JavaScript. Окончательный проект ES5 находится на2009Прошли годы, вы использовали его до сих пор.

ES6, также известный как ES2015, — это новый стандарт, который привносит в JavaScript новые языковые конструкции, такие какпостоянный,своего родаистрока шаблона. Стоит отметить, что ES6 привносит новые языковые функции, но по-прежнему определяет их семантически, используя ES5. Например, классы в ES6 — это просто JavaScript.прототипное наследованиеизсинтаксический сахар.

Знание ES5 и ES6 очень важно, потому что сегодня вы увидите приложения, использующие оба подхода.ES5, ES6, ES2016, ES Далее: Далее: Что происходит с управлением версиями JavaScriptЭто хорошее введение в знания, связанные с ES6, Дэна УолинаНачало работы с ES6 — что будет в следующей версии JavaScript. После этого вы можетеОсобенности ES6См. полный список изменений с ES5 на ES6 в . Если вы хотите больше, посмотрите этот с функциями ES6.Репозиторий на гитхабе.

больше практики

Если вы зашли так далеко, поздравляем себя. Вы уже много знаете о JavaScript. Давайте применим кое-что из того, что вы узнали, на практике.

Упражнение 3

В упражнении 3 ваши знания HTML и CSS сочетаются с вводным курсом JavaScript. В этой лабораторной работе вы создадите часы собственного дизайна и заставите их взаимодействовать с JavaScript. Перед началом рекомендую прочитатьУчебник по разделению HTML, CSS и JavaScript, чтобы узнать об основных соглашениях об именах классов CSS при смешивании JavaScript. Я также подготовил список ручек на CodePen, которые вы можете использовать в качестве справочного материала для этого упражнения. Дополнительные примеры ищите на CodePenclock.

Вы можете провести этот эксперимент двумя способами. Вы можете сначала проектировать и создавать макеты с помощью HTML и CSS, а затем добавлять интерактивность с помощью JavaScript. Или вы можете сначала написать логику JavaScript, а затем перейти к макету. Кроме того, вы можете использовать jQuery, но не стесняйтесь использовать чистый JavaScript.

Фреймворк JavaScript

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

Я не буду описывать все фреймворки JavaScript, но вот краткий обзор некоторых из них:Angular,React + Flux,Ember,Aurelia,VueиMeteor. Вам не нужно изучать каждый фреймворк. Выберите один и усердно учитесь. Не гонитесь за фреймворками, вместо этого разберитесь в основных философиях и принципах программирования, на которых основаны фреймворки.

архитектурный узор

Прежде чем рассматривать фреймворки, важно понять некоторые архитектурные шаблоны, которые обычно используют фреймворки:MVC (модель-представление-контроллер),MVVM (модель-представление-представление)в и вMVP (модель-просмотр-ведущий). Эти шаблоны предназначены для создания четкихразделение интересов.

Разделение ответственности — это принцип проектирования, основная идея которого состоит в том, чтобы разделить приложение на разные слои, относящиеся к предметной области. Например, вместо HTML, хранящего состояние приложения, вы можете использовать объекты JavaScript (часто называемые моделями) для хранения состояния.

Чтобы узнать больше об этих режимах, сначала прочтитеChrome DevelopersМВК. После этого прочитайтеПонимание MVC и MVP (для разработчиков JavaScript и Backbone). В этой статье не беспокойтесь о том, что вы не сможете научиться или понять, просто поймите некоторые концепции MVC и MVP.

Эдди Осман также писал о MVVM.Руководство разработчика JavaScript по пониманию MVVM. Чтобы понять происхождение MVC и почему, прочитайте статью Мартина Фаулера.Архитектура графического интерфейсастатья. Наконец, прочитайтеJavaScript MV* PatternsРаздел «Изучение шаблонов проектирования JavaScript». Изучите шаблоны проектирования JavaScriptотличная бесплатная онлайн-книга.

Шаблоны проектирования

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

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

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

AngularJS

AngularJS  — это JavaScriptMVC  рамка и иногдаMVVMРамка. Он поддерживается Google и покорил сообщество JavaScript, когда был впервые выпущен в 2010 году.

Angular — это декларативный фреймворк. Одна из самых полезных статей, которая помогла мне понять, как перейти от императивного к декларативному программированию на JavaScript, находится на StackOverflow.Чем AngularJS отличается от jQuery.

Если вы хотите узнать больше об Angular, ознакомьтесь с Angular.Документация. Они также обеспечиваютAngular CatУчебники помогут вам разобраться в программировании. Тим Джейкоби вРепозиторий на гитхабеБолее полное руководство по обучению Angular доступно в формате . Кроме того, ознакомьтесь с этим исчерпывающим руководством по стилю от John Papa.

React + Flux

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

Facebook разработал React и Flux, чтобы устранить некоторые недостатки MVC и проблемы его масштабирования. Посмотрите их знаменитое демоПуть взлома: переосмысление разработки веб-приложений FacebookОтправить. Он превосходит Flux, где он возник.

Чтобы начать изучать React и Flux, сначала изучите React. Хороший праймер этоРеагировать на документацию. После этого см.React.js Introduction For People Who Know Just Enough jQuery To Get By, чтобы помочь вам перейти от мышления jQuery.

Когда у вас будет базовое понимание React, начните изучать Flux. Хорошей отправной точкой являетсяОфициальная документация Flux. После этого см.Awesome React, который представляет собой тщательно подобранный список ссылок, которые могут помочь вам в дальнейшем обучении.

Упражнения и рамки

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

Упражнение 4

Упражнение 5 состоит в декомпозиции и рефакторинге приложения Todo MVC с использованием независимого от фреймворка JavaScript. Цель этого упражнения — показать вам, как работает MVC, не смешивая синтаксис, специфичный для фреймворка.

Первый вTodoMVCСм. окончательный результат выше. Первый шаг — создать новый проект локально и сначала настроить три компонента MVC. Поскольку это сложный эксперимент, см.Репозиторий на гитхабеПолный исходный код в формате . Ничего страшного, если вы не можете точно воспроизвести проект или у вас нет времени. скачатьrepoКодируйте и экспериментируйте с различными компонентами MVC, пока не поймете взаимосвязь между ними.

Упражнение 5

Упражнение 5 — хорошее упражнение по применению MVC, а понимание MVC — важный шаг в изучении фреймворков JavaScript. Упражнение 5 — следовать руководству Scotch.io по созданию клона Etsy с помощью Angular.

Создайте клон Etsy с помощью Angular, Stamplay научит вас, как создавать веб-приложения с помощью Angular, как создавать интерфейсы с помощью API и как структурировать большие проекты. После завершения этого урока вы сможете ответить на следующие вопросы.

  • Что такое веб-приложение?
  • Как MVC/MVVM применяется к Angular?
  • Что такое API и что он делает
  • Как организовать и структурировать большую кодовую базу
  • Каковы преимущества разделения пользовательского интерфейса на директивные компоненты?

Если вы хотите попробовать создать больше веб-приложений Angular, вы можете попробовать использоватьAngularJS и Firebase для создания приложения для обновления статуса в реальном времени.

Будьте в курсе текущих дел

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

Ниже приведен список веб-сайтов, блогов и форумов, которые интересно и информативно читать.

учиться на примере

Как всегда, лучший способ учиться — брать пример.

гид по стилю

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

Библиотека кода

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

Суммировать

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

Ваши лайки - моя мотивация продолжать делиться хорошими вещами, ставьте лайки!

Коммуникация (приглашаем вступить в группу, группа будет присылать красные конверты по рабочим дням, технология интерактивного обсуждения)

Статьи из серии галантереи резюмируются следующим образом: если вы чувствуете себя хорошо, нажмите «Звезда», добро пожаловать в группу, чтобы учиться друг у друга.

GitHub.com/QQ449245884…

Я Сяо Чжи, автор официального аккаунта "Moving the World",Продолжайте знакомить энтузиастов с передовыми технологиями. Я буду часто делиться тем, что я узнал и увидел, На пути продвижения, давайте подбадривать друг друга!

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

Каждый раз организую статью, обычно не ложусь спать до 2 часов, примерно 4 раза в неделю, очень тяжело, надеюсь на поддержку и поощрение

Категории