Содержание

Как просмотреть js-код определенного эффекта веб-страницы (эффект анимации может быть js и css) (страница может видеть исходный код js) …

1. Резюме

1. Эффект анимации может быть реализован с помощью CSS или JS.

2. Возможна прямая отладка Chrome F12, на странице можно увидеть исходный код js.

 

Во-вторых, как просмотреть js-код определенного эффекта веб-страницы.

проблема:

Как просмотреть js-код определенного эффекта на веб-странице ~? Например, есть эффект анимации при наведении курсора мыши.Как просмотреть соответствующий код js?

 

ответ:

css также может создавать эффекты анимации

Ответьте на первый вопрос:
Эффект анимации может быть реализован с помощью CSS или JS.
Если это реализовано с помощью CSS, просто просмотрите элементы
Если это реализовано с помощью JS, функцию привязки событий обычно можно найти путем глобального поиска идентификатора или класса элемента.

 

Метод удаления:

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

 

chrome:Event Listeners

F12 в браузере Chrome имеет эту функцию «Слушатели событий»
Вы также можете попробовать использовать закладку «Визуальное событие»

Плагин для firequery firebug

 

 

Chrome — элемент обзора — сеть:

Щелкните блок кода js на веб-странице, которую вы хотите отладить (я не очень подробно это описываю, вероятно, это то, что это означает), и появится ссылка на js.

 

Вы можете увидеть это прямо на странице
Щелкните веб-страницу правой кнопкой мыши и просмотрите исходный файл, еслиКод JSНаписано прямо вHTML файлТаким образом, вы можете увидеть это, еслиКод JSНаходится во внешнем файле, то изHTML кодНайдите URL-адрес внешнего файла js, затем загрузите его, и вы увидите его.
Элементы в инструментах разработчика

Используйте Chrome, Firefox и т. Д. (Операция аналогична другим браузерам), после открытия браузера нажмите F12. Или откройте инструменты разработчика, вы можете просмотреть соответствующий html, css, js и другой контент.

 

 

 

 

 

Перепечатано по ссылке: https://www.cnblogs.com/Renyi-Fan/p/9094814.html

Добавить кастомный js-код на сайт (различные метрики и др.)

Довольно часто у владельцев сайтов возникает потребность разместить на сайте кастомный js-код. Это могут быть различные метрики или вспомогательные скрипты. Рассмотрим наиболее популярные варианты.

 

Способ 1: кастомный блок

  1. Идем в «Схему блоков -> Пользовательские блоки»
  2. Создаем новый блок
  3. Переключаем редактор в режим «источник» и размещаем код
  4. Идем в «Схему блоков» и размещаем блок в регион

Плюсы данного метода:

  • Прост как 5 копеек, любой контентщик/сайтбилдер справится

Минусы данного метода:

  • Скрипты, добавленные таким образом, не будут сжиматься (агрегироваться). При большом обилии таких скриптов не ждите 100 баллов в google pagespeed
  • Контентщик/сайтбилдер может случайно удалить блок и скрипт пропадет (были такие случаи)
  • Некоторые форматы ввода или визуальные редакторы могут съедать код.

 

Способ 2: правка шаблона темы оформления

  1. Идем в каталог с шаблонами темы оформления
  2. Редактируем шаблон, например html.html.twig
  3. Добавляем в шаблон необходимый код

Плюсы данного метода:

  • Возможность быстро добавить скрипты на все страницы сайта и не переживать что контентщик/сайтбилдер случайно удалит их

Минусы данного метода:

  • Скрипты, добавленные таким образом, не будут сжиматься (агрегироваться). При большом обилии таких скриптов не ждите 100 баллов в google pagespeed
  • Контентщик/сайтбилдер не сможет самостоятельно добавить/удалить эти скрипты без привлечения разработчика

 

Способ 3: модуль интеграции

  1. Ищем на https://drupal.org необходимый модуль интеграция
  2. Устанавливаем и настраиваем его

Плюсы данного метода:

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

Минусы данного метода:

  • Он всего один. Модуля-интеграции для вашего скрипта может и не быть

 

Способ 4: программный

  1. Описываем наш .js файл в файле MYTHEME|MYMODULE.libraries.yml
  2. Включаем его на нужных страницах добавив ['#attached']['library'][]=... в любом удобном хуке.

Плюсы данного метода:

  • Скрипты, добавленные таким образом, будут сжиматься (агрегироваться)
  • Можно очень тонко настроить на каких страницах скрипт будет подключаться

Минусы данного метода:

  • Нужно немножко уметь программировать (или хотя бы копипастить) на PHP.

 

Способ 5: Google Tag Manager

  1. Ставим Google Tag Manager (хоть этим модулем или этим, хоть в теме)
  2. И уже там добавляем все скрипты без программиста и затрагивания кода сайта.

Плюсы данного метода:

  • Контентщик/сайтбилдер сможет самостоятельно добавить/удалить эти скрипты без привлечения разработчика

Минусы данного метода:

  • Нужно иметь аккаунт Google

18 способов сократить JS код · GitHub

18 способов сократить JS код · GitHub

Instantly share code, notes, and snippets.

18 способов сократить JS код

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
// 1
const num = 42
// let result
//
// if (num > 20) {
// result = ‘More than 20’
// } else {
// result = ‘Less than 20’
// }
const result = num > 20 ? ‘More than 20’ : ‘Less than 20’
// 2
let variable = ‘variable’ // undefined
let variable2
// if (variable) {
// variable2 = variable
// } else {
// variable2 = ‘some value’
// }
variable2 = variable || ‘some value’
// console.log(variable2)
// 3
// let x
// let y
// let z = 42
// let x, y, z = 42
// 4
let isSame = true
if (isSame === true) {}
if (isSame) {}
if (isSame !== true) {}
if (!isSame) {}
// 5
const names = [‘Igor’, ‘Elena’, ‘Olga’]
for (let i = 0; i < names.length; i++) {
// names[i]
}
for (let name of names) {}
for (let index in names) {}
function logArrayItems(el, index, array) {
console.log(`names[${index}] = ${el}`)
}
// names.forEach(logArrayItems)
// 6
// let port
// if (process.env.PORT) {
// port = process.env.PORT
// } else {
// port = 4200
// }
const port = process.env.PORT || 4200
// 7
// for (let i = 0; i < 1000000; i++) {}
// for (let i = 0; i < 10e6; i++) {}
// 8
const a = 1, b = 2
const myObj = {a, b}
// 9
// setTimeout(function() {
// console.log(‘After 2 seconds’)
// }, 2000)
//
// function tripple(num) {
// return num * 3
// }
// setTimeout(() => console.log(‘After 2 seconds’), 2000)
// const tripple = num => num * 3
// 10
// function rgb(r, g, b) {
// if (r === undefined) {
// r = 0
// }
//
// if (g === undefined) {
// g = 255
// }
//
// return `rgb(${r}, ${g}, ${b})`
// }
const rgb = (r = 0, g = 255, b) => `rgb(${r}, ${g}, ${b})`
// 11
// function createUrl(base, domain) {
// return ‘http://’ + base + ‘.’ + domain
// }
function createUrl(base, domain) {
return `http://${base}.${domain}`
}
// 12
// const alert = window.alert
// const confirm = window.confirm
// const prompt = window.prompt
// const {alert, prompt, confirm} = window
// 13
const arr = [1, 2, 3]
// const nums = [4, 5, 6].concat(arr)
// const cloned = nums.concat()
const nums = [4, …arr, 5, 6]
const cloned = […nums]
// console.log(nums)
// 14
// console.log(Math.floor(9.7) === 9)
// console.log(~~9.7 === 9)
// 15
// console.log(Math.pow(2, 3))
// console.log(Math.pow(2, 4))
// console.log(Math.pow(4, 3))
//
// console.log(2 ** 3)
// console.log(2 ** 4)
// console.log(4 ** 3)
// 16
// const int = parseInt(’42’)
// const float = parseFloat(‘42.42’)
const int = +’42’
const float = +’42.42′
// console.log(typeof int, typeof float)
// 17
if ([1, 2, 3].indexOf(3) > -1) {}
if (~[1, 2, 3].indexOf(3)) {} // найдено
if (!~[1, 2, 3].indexOf(3)) {} // не найдено
if ([1, 2, 3].includes(3)) {}
// 18
const car = {
model: ‘Ford’,
year: 2019,
color: ‘red’
}
console.log(Object.entries(car))
console.log(Object.values(car))
console.log(Object.keys(car))
You can’t perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

7 рекомендаций по оформлению кода на JavaScript | by Nikita | WebbDEV

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

Код гораздо легче читать, когда при его написании используют понятные, описательные имена функций и переменных. Вот не очень понятный код:

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

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

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

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

Признаком того, что функцию можно разбить на две, является возможность использования слова «and» в её имени.

Пишите хорошую документацию к своему коду — тогда тот, кто столкнётся с ним в будущем, поймёт, что и почему в этом коде делается. Вот пример неудачной функции. Здесь используются некие «магические числа», их смысл нигде не пояснён.

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

Этот код — всего лишь пример. Вероятно, в подобной ситуации, вместо введения собственной константы, хранящей число Пи, лучше будет воспользоваться стандартным свойством Math.PI.

Комментарии к коду должны отвечать на вопрос «почему».

Обратите внимание на то, что для целей документирования кода имеет смысл воспользоваться специальными инструментами и соответствующими им правилами комментирования кода. В применении к Python мне нравится Google Style Docstrings, в применении к JavaScript — JSDoc.

Сэнди Метц отлично программирует на Ruby, делает интересные доклады и пишет книги. Она сформулировала четыре правила написания чистого кода в объектно-ориентированных языках. Вот они.

  1. Классы не должны быть длиннее 100 строк кода.
  2. Методы и функции не должны быть длиннее 5 строк кода.
  3. Методам следует передавать не более 4 параметров.
  4. Контроллеры могут инициализировать лишь один объект.

Рекомендую посмотреть её выступление, касающееся этих правил.

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

Обратите внимание на то, что данные правила — это лишь рекомендации, но их использование позволит сделать ваш код значительно лучше.

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

Рекомендую применять руководство по стилю кода и линтер, который позволяет приводить код к выбранному стандарту. Например, мне, для JavaScript, нравятся правила Standard JS, для Python — правила PEP8.

На самом деле, главное здесь — найти правила оформления кода и их придерживаться.

Одна из первых идей, которую стараются донести до того, кто хочет стать программистом, звучит так: «не повторяйся» (Don’t Repeat Yourself, DRY). Если вы замечаете в своих проектах повторяющиеся фрагменты — используйте такие программные конструкции, которые позволят сократить повторы одного и того же кода. Я часто советую моим ученикам поиграть в игру SET для того, чтобы улучшить их навыки по распознаванию шаблонов.

Однако если вы приметесь фанатично применять принцип DRY или решите абстрагировать неудачно выбранные шаблоны, читаемость кода может серьёзно ухудшиться, и, позже, вам может понадобиться чаще прибегать к созданию копий одних и тех же конструкций. У Сэнди Метц, кстати, есть отличная статья, посвящённая тому, что дублирование кода — это меньшее зло, нежели неудачная абстракция.

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

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

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

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

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

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

Получение и анализ кода JavaScript, подключенного на странице сайта

24.08.18 JavaScript 5612

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

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

Процедура получения кода JavaScript обычно сводится к следующему:

  • открыть исходный код страницы сайта и обратить внимание на подключение скриптов. Обычно скрипты подключаются либо в верхней части страницы, либо внизу – делается это при помощи тега script;
  • скопировать адрес, указанный в атрибуте src тега script;
  • адреса обычно указываются относительные, поэтому далее необходимо подставить в начало к полученному адресу скрипта домен рассматриваемого сайта;
  • после этого достаточно подготовленный адрес вставить в строку адреса браузера в новой вкладке, в результате на странице будет выведен весь код из файла;
  • скопировать код и вставить в редактор с подсветкой синтаксиса.

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

Когда исходный код получен, можно сделать анализ кода JavaScript:

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

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

Как писать современный JavaScript код

Хочешь проверить свои знания по фронтенду?

Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!

Решать задачи ×

Себастьян Кастель, JavaScript-разработчик из Франции, поделился мыслями о том, как должен выглядеть ваш JS-код в 2017 году. Редакция techrocks.ru публикует адаптированный перевод материала.


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

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

Используйте линтер для форматирования кода

Хорошей практикой сегодня является использование линтера. Он используется для проверки, соблюдается ли в вашем коде единый стиль. Это позволит сделать код консистентным во всех ваших .js файлах. Особенно полезно использовать линтер в командах — это позволит сделать стиль кода единым среди всех разработчиков.

Более того, линтер может вносить исправления в ваш код, где это возможно. ESLint, например, делает это очень хорошо (используйте настройку —fix) и он отлично интегрируется со всеми популярными IDE.

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

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

Используйте современные правила для вашего линтера

Если вы не знаете, какой набор правил использовать для вашего кода, берите StandardJS. Это очень строгий линтер, который не позволит вам отступить от правил, но каждое из них одобрено сообществом JS разработчиков. Вот несколько примеров:

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

StandardJS может устанавливаться в виде отдельного Node модуля. Если вы хотите использовать его уже на существующем проекте с большой кодовой базой и отключить некоторые правила — используйте ESLint predefined config. Например, я отключил правила no-mixed-operators и import/no-webpack-loader-syntax.

Используйте новые фишки ES2015+

Если вы разрабатываете на JavaScript, то, скорее всего, слышали об изменениях в ES2015+ (или ES6, ES7…). Вот несколько, без которых я больше не могу жить 🙂

  • Arrow functions: новый синтаксис для функций в JS ( x => x*2 )
  • Классы: перестаньте использовать прототипы, классы гораздо круче 🙂
  • Новые методы для работы с массивами и объектами
function doSomething() {
  const a = doSomethingElse()
  const b = doSomethingWithA(a)
  const otherResults = { c: '?', d: '?' }
  return { a, b, ...otherResults } // equivalent to { a: a, b: b }
}
const { a, c, ...rest } = doSomething() // Also works with arrays!
// `rest` looks like { b: ..., d: '?' }
  • Понятный синтаксис для промисов (async/await)
// Please try to write the same code with classic promises ;)
async function doSomething() {
  const a = await getValueForA()
  const b = await getValueForBFromA(a)
  const [c, d] = await Promise.all([
    // parallel execution
    getValueForC(), getValueForDFromB(b)
  ])
  const total = await calculateTotal(a, b, c, d)
  return total / 1000
}

Используйте функциональное программирование

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

Во-первых, прекратите использовать циклы for. В большинстве случаем они вам не нужны. Например:

const arr = [{ name: 'first', value: 13 }, { name: 'second', value: 7 }]

// Instead of:
const res = {}
for (let i = 0; i < arr.length; i++) {
  const calculatedValue = arr[i].value * 10
  if (calculatedValue > 100) {
    res[arr[i].name] = calculatedValue
  }
}

// Prefer:
const res = arr
  .map(elem => ({ name: elem.name, calculatedValue: elem.value * 10 }))
  .filter(elem => elem.calculatedValue > 100)
  .reduce((acc, elem) => ({
    [elem.name]: calculatedValue,
    ...acc
  }), {})

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

const enrichElementWithCalculatedValue =
  elem => ({ name: elem.name, calculatedValue: elem.value * 10 })
const filterElementsByValue = value =>
  elem => elem.calculatedValue > value
const aggregateElementInObject = (acc, elem) => ({
  [elem.name]: calculatedValue,
  ...acc
})
const res = arr
  .map(enrichElementWithCalculatedValue)
  .filter(filterElementsByValue(100))
  .reduce(aggregateElementInObject, {})

Мы определили 3 функции названия которых указывают на то, что эти функции делают.

Во-вторых, создавайте локальные функции (даже внутри существующих) — подбирая для них грамотные названия, вы можете документировать ваш код без комментариев!

Обратите внимание, что эти три локальные функции не меняют контекст, в котором выполняются. Не меняют внешние переменные, не обращаются к внешним сервисам… В функциональном программировании такие функции называют pure functions (чистые функции). Их преимущества:

Их легко тестировать, потому что одни и те же входные данные всегда будут давать один и тот же результат, сколько раз бы функция не вызывалась;

Они гарантированно дадут один и тот же результат вне зависимости от состояния приложения;

Они не меняют состояние приложения.

Поэтому мой третий совет: используйте такие функции как можно чаще!

Несколько советов в завершение
  • Привыкайте работать с асинхронным кодом, чаще используйте промисы, посмотрите на observales в RxJS (вот отличный туториал по функциональному реактивному программированию)
  • Пишите тесты! Звучит банально, но я знаю кучу проектов с кодом, не покрытым тестами. В конце концов, тестирование JavaScript не так трудно, как кажется.
  • Используйте последние фишки языка: например, прекратите писать arr.indexOf(elem) !== -1. Замените это arr.includes(elem).
  • Читайте больше технических статей: JavaScript сабреддит — отличное место, где можно узнать много нового о языке.

И, главное — всегда занимайтесь рефакторингом! Улучшайте ваш старый код. Найдите время, чтобы заменить var на const, перепишите функции с использованием нового синтаксиса. Это позволит упростить код — а работать с простым и понятным кодом всегда приятнее 🙂

Основные библиотеки и фреймворки JavaScript, которые вы должны знать

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

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

Введение

Среда JavaScript стала огромной. Она имеет собственную экосистему библиотек, фреймворков, инструментов, менеджеров пакетов и новых языков, которые компилируются в JavaScript. Интересно, что npm, который является де-факто-менеджером пакетов для JavaScript, также является крупнейшим в мире реестром программного обеспечения. Вот выдержка из публикации, опубликованной на Linux.com еще в январе 2017 года.

В более чем 350 000 пакетов содержит реестр npm, что  более чем вдвое больше, чем следующий наиболее популярный реестр пакетов (который является репозиторием Apache Maven). Фактически, в настоящее время это самый крупный реестр пакетов в мире.

Перенеситесь вперед на восемь месяцев, и в настоящее время в реестре npm есть около 500 000 пакетов. Это огромный рост по сравнению с другими репозиториями пакетов.

Источник: ModuleCounts.com

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

Библиотеки

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

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

React

React — это библиотека JavaScript, созданная разработчиками Facebook и Instagram. Согласно опросу Stack Overflow Survey 2017, React был признан самой популярной технологией среди разработчиков. React также имеет честь быть самым популярным проектом JavaScript, согласно количеству звезд на GitHub.

Так почему React получает все внимание? С помощью React можно создать интерактивный интерфейс с использованием декларативного подхода, в котором вы можете контролировать состояние приложения, говоря: «Представление должно выглядеть так». Он использует компонентную модель, в которой компоненты являются повторно используемыми элементами пользовательского интерфейса, и каждый компонент имеет свое собственное состояние.

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

Если вы считаете, что «React» — это лучшая вещь, и вы хотели бы изучить « React», ознакомьтесь с нашей учебной серией «React Crash Course for Beginners».

JQuery

jQuery — это библиотека, которая сделала JavaScript более доступным а DOM-манипуляцией проще, чем раньше. Плавная кривая обучения jQuery и простой синтаксис породили на стороне клиента новое поколение новых разработчиков. Несколько лет назад jQuery считался прочным решением для создания надежных веб-сайтов с поддержкой кросс-браузерности. Основные функции jQuery, такие как манипулирование DOM на основе селекторов CSS, обработка событий и создание вызовов AJAX, подпитывали его популярность.

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

D3: Документы, управляемые данными

D3 (или D3.js) — мощная библиотека JavaScript для создания интерактивных визуализаций с использованием веб-стандартов, таких как SVG, HTML и CSS. В отличие от других библиотек визуализации, D3 предлагает лучший контроль над окончательным визуальным результатом.

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

Если вы хотите создать простые визуализации, не вкладывая слишком много времени в это, вы должны обратить внимание на Chart.js. У нас есть вводная серия про Chart.js, которая охватывает большинство визуализаций, которые вы можете создать с помощью Chart.js

Фреймворки


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

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

Angular

AngularJS когда-то была самой популярной технологией JavaScript среди разработчиков интерфейсов. Он был поддержан Google и сообществом частных лиц и корпораций. Несмотря на популярность, у AngularJS была своя доля недостатков. Команда Angular провела два года работы над новой версией Angular, которая была наконец выпущена в сентябре 2016 года.


Выпуск Angular 2 был переделкой AngularJS. Некоторые из функций Angular 2 включают:

  • TypeScript над JavaScript как язык по умолчанию
  • компонентная архитектура
  • улучшенная производительность как на мобильных, так и на веб-платформах.
  • лучшие инструменты и варианты исходных каркасов

Тем не менее, модернизация от Angular 1.x до Angular 2 является дорогостоящей, потому что Angular 2 — совершенно другой зверь. Это одна из причин, почему Angular 2 не был так сразу же принят, как свой предшественник. Но Angular и AngularJS по-прежнему относятся к числу наиболее часто используемых технологий в соответствии со Stack Overflow (2017). Проект Angular имеет около 28 000 звезд в GitHub.

Vue.js

Vue.js — это легкий JavaScript фреймворк, который активно развивается в этом году. Это самый популярный JavaScript  фреймворк на GitHub с точки зрения звезд GitHub. Vue утверждает, что это менее упрямый фреймворк и, таким образом более удобный в использовании. Синтаксис шаблона на основе HTML Vue связывает отрисовываемый DOM с данными экземпляра.


Фреймворк предлагает опыт, похожий на React, с его виртуальными DOM и компонентами повторного использования, которые можно использовать для создания как виджетов, так и целых веб-приложений. Кроме того, вы также можете использовать синтаксис JSX для непосредственного написания функций рендеринга. Когда состояние изменяется, Vue.js использует систему реактивности, чтобы определить, что изменилось и перерисовывает минимальное количество компонентов. Vue.js также поддерживает интеграцию других библиотек во фреймворк без особых хлопот.

Ember.js

Ember.js является фронт-енд фреймворком на основе шаблона Model-View-ViewModel (MVVM). Фреймворк использует стандартный подход к конфигурации, который популярен среди серверных фреймворков таких как Ruby on Rails и Laravel. Ember.js включает в себя общие идиомы и лучшие практики фреймворков, чтобы вы могли получать приложение без особых усилий.

Стек Ember обычно включает:

  • Ember CLI: предоставляет основные варианты каркаса приложения и поддерживает сотни надстроек.
  • Ember Data: библиотека сохранения данных, которая может быть настроена для работы с любым сервером.
  • Ember Inspector: расширение доступное для Chrome и Firefox.
  • Liquid Fire: дополнение для переходов и анимаций.

Инструменты

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

Инструменты: выполнение общих задач

Инструменты, выполняющие общие задачки — это инструменты, используемые для автоматизации определенных повторяющихся задач. В число самых популярных  входят:

Gulp

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

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

Grunt

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

npm

Gulp и Grunt требуют, чтобы вы потратили время на изучение и освоение нового инструмента, что требует времени. Ввод дополнительных зависимостей в ваш проект можно избежать, выбирая альтернативу, которая уже связана с Node.js. Хотя npm более известен как менеджер пакетов, сценарии npm можно использовать для выполнения основной части вышеупомянутых задач.

Инструменты: тестирование

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

Jest

Jest — это относительно новый фреймворк для тестирования, созданный в Facebook и хорошо принятый сообществом React. Существует распространенное заблуждение, что Jest специально разработан для работы с React; однако, согласно документации Jest:

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

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

Jest имеет функцию под названием snapshot testing, которая позволяет гарантировать, что пользовательский интерфейс приложения неожиданно не изменится. Разработчики в Facebook и другие участники недавно вложили много работы в этот проект, поэтому не удивительно, что Jest окажется самой популярной тестовой платформой для JavaScript в ближайшие годы.

Mocha

Mocha — это фреймворк для тестирования JavaScript, который предоставляет поддержку браузера, асинхронные вызовы, включая обещания, отчеты о тестовом покрытии и JavaScript API для запуска тестов. Mocha часто используется с библиотекой утверждений, такой как Chai, should.js, expect.js  или better-assert, потому что у нее нет собственной библиотеки утверждений.


Jasmine

Jasmine — это фреймворк для тестирования JavaScript, ориентированный на поведение. Jasmine стремится стать браузером, платформой и независимым от платформы набором тестов. У Jasmine есть своя собственная библиотека утверждений, называемая matchers, которая дает ему чистый и легко читаемый синтаксис. Jasmine не имеет встроенной команды для выполнения тестов, и вам, возможно, придется использовать какую-нибудь общую, например, Karma.


Резюме

JavaScript, язык Интернета, остался актуальным со времен его создания еще в 1995 году. Вероятно, он останется таким же, пока браузеры не решат отказаться от него в пользу какого-нибудь другого языка. Несмотря на то, что существует множество других языков, которые скомпилируются с использованием JavaScript, нет другого языка сценариев, который заменит JavaScript в обозримом будущем. Почему? Потому что JavaScript стал слишком популярным, чтобы его можно было заменить.

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

Среда JavaScript определенно развивается, что видно из текущих тенденций в веб-разработке. Старые библиотеки и фреймворки были заменены новыми технологиями. jQuery, которая когда-то была наиболее популярной библиотекой JavaScript, испытывает спад с точки зрения привлекательности, использования и популярности. Новое поколение фронт-енд библиотек, фреймворков и инструментов набирает силу и получает всеобщее признание.

Привыкание к новым тенденциям в технологии также имеет свои преимущества. Задачи по написанию кода, требующие знания React, имеют одни из самых высоких зарплат в отрасли со средней зарплатой в размере 105 000 долларов США в соответствии с Stack Overflow (2016). Поэтому вам нужно продолжить обучение и экспериментировать с новейшими инструментами и фреймворками, чтобы максимально использовать JavaScript.

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

Дальнейшее чтение

Как программировать на JavaScript

Как программировать на JavaScript

  • Лиза Тальяферри

  • JavaScript — это высокоуровневый объектно-ориентированный динамический язык сценариев, популярный как инструмент для создания интерактивных веб-страниц.

    Опубликовано 29 июня 2017 г. · Обновлено 20 августа 2021 г.

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

    Опубликовано 30 июня 2017 г. · Обновлено 20 августа 2021 г.

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

    Опубликовано 2 августа 2017 г. · Обновлено 23 августа 2021 г.

    Из этого туториала вы узнаете, как создать приветствие «Hello, World!» программа на JavaScript. Чтобы сделать программу более интересной, мы изменим традиционное «Hello, World!» программу так, чтобы она запрашивала у пользователя его имя. Затем мы будем использовать это имя в приветствии.Когда вы закончите с этим учебным пособием, у вас будет интерактивный «Hello, World!» программа.

    Опубликовано 5 июля 2017 г. · Обновлено 23 августа 2021 г.

    В этом руководстве мы рассмотрим многие правила и соглашения синтаксиса и структуры кода JavaScript.

    Опубликовано 20 июня 2017 г. · Обновлено 30 августа 2021 г.

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

    Опубликовано 1 июня 2017 г. · Обновлено 23 августа 2021 г.

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

    Опубликовано 11 июля 2017 г. · Обновлено 24 августа 2021 г.

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

    Опубликовано 14 июля 2017 г. · Обновлено 24 августа 2021 г.

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

    Опубликовано 15 августа 2017 г. · Обновлено 24 августа 2021 г.

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

    Опубликовано 20 февраля 2018 г. · Обновлено 24 августа 2021 г.

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

    Опубликовано 20 июля 2017 г. · Обновлено 24 августа 2021 г.

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

    Опубликовано 5 февраля 2021 г. · Обновлено 24 августа 2021 г.

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

    Опубликовано 28 июля 2017 г. · Обновлено 24 августа 2021 г.

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

    Опубликовано 10 августа 2017 г. · Обновлено 25 августа 2021 г.

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

    Опубликовано 14 августа 2017 г. · Обновлено 25 августа 2021 г.

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

    Опубликовано 15 августа 2017 г. · Обновлено 25 августа 2021 г.

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

    Опубликовано 24 августа 2017 г. · Обновлено 25 августа 2021 г.

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

    Опубликовано 19 октября 2017 г. · Обновлено 25 августа 2021 г.

    JavaScript поставляется со встроенным объектом Date и связанными с ним методами.В этом руководстве будет рассказано, как форматировать и использовать дату и время в JavaScript.

    Опубликовано 19 июня 2018 г. · Обновлено 25 августа 2021 г.

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

    Опубликовано 9 декабря 2016 г. · Обновлено 25 августа 2021 г.

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

    Опубликовано 29 августа 2017 г. · Обновлено 25 августа 2021 г.

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

    Опубликовано 11 сентября 2017 г. · Обновлено 26 августа 2021 г.

    Условные операторы — одна из наиболее полезных и распространенных функций всех языков программирования. «Как писать условные операторы в JavaScript» описывает, как использовать…

    Опубликовано 27 сентября 2017 г. · Обновлено 26 августа 2021 г.

    Автоматизация — это способ заставить систему работать автоматически; в программировании мы используем циклы для автоматизации повторяющихся задач.Циклы — одна из самых полезных функций языков программирования, и в этой статье мы узнаем о while и do…while…

    Опубликовано 2 октября 2017 г. · Обновлено 26 августа 2021 г.

    Циклы используются в программировании для автоматизации повторяющихся задач. В этом руководстве мы узнаем об операторе for, включая операторы for…of и for…in, которые являются важными элементами языка программирования JavaScript.

    Опубликовано 9 октября 2017 г. · Обновлено 26 августа 2021 г.

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

    Опубликовано 12 января 2018 г. · Обновлено 26 августа 2021 г.

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

    Опубликовано 4 мая 2018 г. · Обновлено 26 августа 2021 г.

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

    Опубликовано 3 августа 2018 г. · Обновлено 26 августа 2021 г.

    Объекты в JavaScript представляют собой наборы пар ключ/значение. Значения могут состоять из свойств и методов и могут содержать все другие типы данных JavaScript, такие как строки,…

    Опубликовано 3 октября 2019 г. · Обновлено 26 августа 2021 г.

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

    Опубликовано 12 февраля 2020 г. · Обновлено 27 августа 2021 г.

    Карты в JavaScript, представленные в ECMAScript 2015, представляют собой упорядоченные наборы пар ключ/значение, а наборы — наборы уникальных значений.В этой статье вы ознакомитесь с объектами Map и Set, что делает их похожими или отличными от объектов и массивов, какие свойства и методы им доступны, а также примеры некоторых практических применений.

    Опубликовано 28 февраля 2020 г. · Обновлено 27 августа 2021 г.

    В ECMAScript 2015 в языке JavaScript появились генераторы. Генератор — это процесс, который можно приостанавливать и возобновлять, и который может выдавать несколько значений. Они могут поддерживать состояние, предоставляя эффективный способ создания итераторов, и способны работать с бесконечными потоками данных.В этой статье мы расскажем, как создавать функции-генераторы, как перебирать объекты-генераторы, разницу между yield и return внутри генератора и другие аспекты работы с генераторами.

    Опубликовано 31 марта 2020 г. · Обновлено 27 августа 2021 г.

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

    Опубликовано 12 мая 2020 г. · Обновлено 27 августа 2021 г.

    Представленные в ECMAScript 2015 (ES6) деструктуризация, остаточные параметры и синтаксис распространения обеспечивают более прямой доступ к членам массива или объекта и могут упростить работу с структуры данных быстрее и кратче.В этой статье вы узнаете, как деструктурировать объекты и массивы в JavaScript, как использовать оператор распространения для распаковки объектов и массивов и как использовать остальные параметры в вызовах функций.

    Опубликовано 30 июня 2020 г. · Обновлено 27 августа 2021 г.

    В выпуске спецификации ECMAScript (ES6) 2015 г. в язык JavaScript добавлены литералы шаблонов. Литералы шаблонов — это новая форма создания строк в JavaScript, добавляющая множество новых мощных возможностей, таких как создание многострочных строк, использование заполнителей для встраивания выражений в строку и анализ динамических строковых выражений с помощью тегированных литералов шаблонов.В этой статье вы узнаете о различиях между строками в одинарных/двойных кавычках и литералами шаблонов.

    Опубликовано 31 июля 2020 г. · Обновлено 27 августа 2021 г.

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

    Опубликовано 10 сентября 2020 г. · Обновлено 27 августа 2021 г.

    Чтобы избежать блокировки кода при разработке JavaScript, необходимо использовать методы асинхронного кодирования для операций, которые занимают много времени, таких как сетевые запросы, сделанные из веб-API, таких как Fetch. В этой статье будут рассмотрены основы асинхронного программирования, вы узнаете о цикле событий, оригинальном способе работы с асинхронным поведением с помощью обратных вызовов, обновленном добавлении промисов ECMAScript 2015 (ES6) и современной практике использования async/await.

    Опубликовано 23 октября 2020 г. · Обновлено 27 августа 2021 г.

    По мере роста важности JavaScript в веб-разработке возрастает потребность в использовании стороннего кода для выполнения общих задач, в разбиении кода на модульные файлы и во избежание загрязняя глобальное пространство имен. Чтобы учесть это, ECMAScript 2015 (ES6) представил модули для языка JavaScript, которые позволяли использовать операторы импорта и экспорта. В этом руководстве вы узнаете, что такое модуль JavaScript и как использовать импорт и экспорт для организации кода.

    Next.js от Vercel — React Framework

    Next.js дает вам лучший опыт разработки со всеми функциями, которые вам нужны для производства:


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

    Web SDK

    В Next.js есть все инструменты, необходимые для создания Интернета. Быстрее.

    Оптимизация изображения

    <Изображение> и автоматическая оптимизация изображения с мгновенными сборками.

    Интернационализация

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

    Аналитика Next.js

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

    Zero Config

    Автоматическая компиляция и объединение. Оптимизирован для производства с самого начала.

    Гибрид: SSG и SSR

    Предварительный рендеринг страниц во время сборки (SSG) или во время запроса (SSR) в одном проекте.

    Инкрементная статическая регенерация

    Добавляйте и обновляйте статически предварительно обработанные страницы постепенно после завершения сборки.

    Поддержка TypeScript

    Автоматическая конфигурация и компиляция TypeScript.

    Fast Refresh

    Быстрое и надежное редактирование в реальном времени, подтвержденное масштабами Facebook.

    Файловая система Маршрутизация

    Каждый компонент в каталоге страниц становится маршрутом.

    Маршруты API

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

    Встроенная поддержка CSS

    Создание стилей на уровне компонентов с помощью модулей CSS.Встроенная поддержка Sass.

    Разделение кода и объединение

    Оптимизированный алгоритм разделения пакетов, созданный командой Google Chrome.

    И многое другое: Поддержка переменных среды, режим предварительного просмотра, пользовательские теги head , автоматические полифиллы и многое другое.

    Кто использует Next.js

    Мы гордимся тем, что некоторые из самых талантливых креативщиков создали Next.js

    Посмотреть витрину

    Узнать Next.js

    Узнать дальше.js шаг за шагом и зарабатывайте баллы ✨.

    Next.js становится лучше с каждым днем ​​— не пропустите все самое интересное.

    Подпишитесь на информационный бюллетень Next.js и будьте в курсе новых выпусков и функций, руководств и тематических исследований.

    Введение в React — React

    В этом руководстве не предполагается наличие каких-либо знаний о React.

    Прежде чем мы начнем обучение

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

    Наконечник

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

    Учебник разделен на несколько разделов:

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

    Что мы строим?

    В этом уроке мы покажем, как создать интерактивную игру в крестики-нолики с помощью React.

    Здесь вы можете увидеть, что мы будем строить: Окончательный результат . Если код вам непонятен или вы не знакомы с его синтаксисом, не волнуйтесь! Цель этого руководства — помочь вам понять React и его синтаксис.

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

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

    Предпосылки

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

    Если вам нужно просмотреть JavaScript, мы рекомендуем прочитать это руководство. Обратите внимание, что мы также используем некоторые функции из ES6 — последней версии JavaScript. В этом руководстве мы используем стрелочные функции, классы, операторы let и const . Вы можете использовать Babel REPL, чтобы проверить, во что компилируется код ES6.

    Настройка для учебника

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

    Вариант настройки 1: запись кода в браузере

    Это самый быстрый способ начать работу!

    Сначала откройте этот Starter Code в новой вкладке. На новой вкладке должно отображаться пустое поле для игры в крестики-нолики и код React. В этом уроке мы будем редактировать код React.

    Теперь вы можете пропустить второй вариант настройки и перейти к разделу «Обзор», чтобы получить обзор React.

    Вариант установки 2: локальная среда разработки

    Это совершенно необязательно и не требуется для этого урока!


    Необязательно: Инструкции по локальному выполнению с использованием предпочитаемого текстового редактора

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

    1. Убедитесь, что у вас установлена ​​последняя версия Node.js.
    2. Следуйте инструкциям по установке приложения Create React, чтобы создать новый проект.
      npx создать-реагировать-приложение мое-приложение  
    1. Удалить все файлы в папке src/ нового проекта

    Примечание:

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

      cd мое приложение
    компакт-диск источник
    
    
    гм -ф *
    
    
    дель *
    
    
    кд ..  
    1. Добавьте файл с именем index.css в папку src/ с этим кодом CSS.
    2. Добавьте файл с именем index.js в папку src/ с этим кодом JS.
    3. Добавьте эти три строки в начало index.js в папке src/:
      импорт React из 'реагировать';
    импортировать ReactDOM из 'react-dom';
    импорт './index.css';  

    Теперь, если вы запустите npm start в папке проекта и откроете http://localhost:3000 в браузере, вы должны увидеть пустое поле крестики-нолики.

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

    Помогите, я застрял!

    Если вы застряли, обратитесь к ресурсам поддержки сообщества. В частности, Reactiflux Chat — отличный способ быстро получить помощь. Если вы не получили ответ или если вы по-прежнему застряли, сообщите о проблеме, и мы поможем вам.

    Обзор

    Теперь, когда вы настроили, давайте рассмотрим React!

    Что такое реакция?

    React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Он позволяет создавать сложные пользовательские интерфейсы из небольших и изолированных фрагментов кода, называемых «компонентами».

    React имеет несколько различных типов компонентов, но мы начнем с подклассов React.Component :

      класс ShoppingList расширяет React.Составная часть {
      оказывать() {
        возврат (
          

    Список покупок для {this.props.name}

    <ул>
  • Инстаграм
  • Ватсап
  • Окулус
  • ); } }

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

    Здесь ShoppingList — это класс компонента React или тип компонента React . Компонент принимает параметры, называемые props (сокращение от «properties»), и возвращает иерархию представлений для отображения с помощью метода render .

    Метод render возвращает описание того, что вы хотите видеть на экране. React берет описание и отображает результат. В частности, render возвращает элемент React , который представляет собой упрощенное описание того, что нужно визуализировать.Большинство разработчиков React используют специальный синтаксис под названием «JSX», который упрощает написание этих структур. Синтаксис

    преобразуется во время сборки в React.createElement('div') . Пример выше эквивалентен:

      return React.createElement('div', {className: 'список покупок'},
      React.createElement('h2', ),
      React.createElement('ul', )
    );  

    См. полную расширенную версию.

    Если вам интересно, createElement() более подробно описан в справочнике по API, но мы не будем использовать его в этом руководстве.Вместо этого мы будем продолжать использовать JSX.

    JSX обладает всеми возможностями JavaScript. Вы можете поместить 90 346 любых 90 347 выражений JavaScript в фигурные скобки внутри JSX. Каждый элемент React — это объект JavaScript, который вы можете хранить в переменной или передавать в своей программе.

    Компонент ShoppingList выше отображает только встроенные компоненты DOM, такие как

    и
  • . Но вы также можете создавать и отображать собственные компоненты React.Например, теперь мы можем обратиться ко всему списку покупок, написав . Каждый компонент React инкапсулирован и может работать независимо; это позволяет создавать сложные пользовательские интерфейсы из простых компонентов.

    Проверка стартера Код

    Если вы собираетесь работать с учебным пособием в браузере, откройте этот код в новой вкладке: Стартовый код . Если вы собираетесь работать над учебником локально, вместо этого откройте src/index.js в папке вашего проекта (вы уже трогали этот файл во время установки).

    Этот стартовый код является основой того, что мы строим. Мы предоставили стили CSS, чтобы вам нужно было сосредоточиться только на изучении React и программировании игры в крестики-нолики.

    Изучив код, вы заметите, что у нас есть три компонента React:

    Компонент Square отображает одну <кнопку> , а Board отображает 9 квадратов. Компонент Game отображает доску со значениями-заполнителями, которые мы изменим позже.В настоящее время нет интерактивных компонентов.

    Передача данных через свойства

    Чтобы намочить ноги, давайте попробуем передать некоторые данные из нашего компонента Board в наш компонент Square.

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

    В методе Board renderSquare измените код, чтобы передать реквизит с именем value в Square:

      class Board расширяет React.Составная часть {
      визуализировать квадрат (я) {
        вернуть <Квадратное значение={i}/>; }
    }  

    Изменить метод Square render , чтобы отобразить это значение, заменив {/* TODO */} на {this.props.value} :

      класс Square расширяет React.Component {
      оказывать() {
        возврат (
          <кнопка className="квадрат">
            {this.props.value} 
        );
      }
    }  

    До:

    После: Вы должны увидеть число в каждом квадрате в отрендеренном выводе.

    Посмотреть полный код на этом этапе

    Поздравляем! Вы только что «передали реквизит» из родительского компонента Board в дочерний компонент Square. Передача реквизита — это то, как информация передается в приложениях React от родителей к детям.

    Создание интерактивного компонента

    Давайте заполним компонент Square знаком «X», когда щелкнем по нему. Во-первых, измените тег кнопки, возвращаемый функцией render() компонента Square, на этот:

    .
      класс Square расширяет React.Составная часть {
      оказывать() {
        возврат (
          

    Если вы сейчас нажмете на квадрат, вы должны увидеть «щелчок» в консоли devtools вашего браузера.

    Примечание

    Чтобы не вводить текст и избежать запутанного поведения this , мы будем использовать синтаксис стрелочной функции для обработчиков событий здесь и далее:

      класс Square расширяет React.Составная часть {
     оказывать() {
       возврат (
         

    Обратите внимание, что с onClick={() => console.log('click')} мы передаем функцию в качестве реквизита onClick . React будет вызывать эту функцию только после клика. Забыть () => и написать onClick={console.log('click')} — распространенная ошибка, которая будет срабатывать каждый раз при повторном рендеринге компонента.

    В качестве следующего шага мы хотим, чтобы компонент Square «запомнил», что по нему щелкнули, и заполним его отметкой «X». Чтобы «запомнить» вещи, компоненты используют состояние .

    Компоненты React могут иметь состояние, установив this.state в своих конструкторах. this.state следует рассматривать как приватное для компонента React, в котором он определен. Давайте сохраним текущее значение Square в this.state и изменим его при нажатии Square.

    Сначала мы добавим в класс конструктор для инициализации состояния:

      класс Square расширяет React.Component {
      конструктор (реквизит) { супер (реквизит); this.state = {значение: null,}; }
      оказывать() {
        возврат (
          

    Примечание

    В классах JavaScript необходимо всегда вызывать super при определении конструктора подкласса.Все классы компонентов React, имеющие конструктор , должны начинаться с вызова super(props) .

    Теперь мы изменим метод рендеринга Square , чтобы отображать текущее значение состояния при нажатии:

    • Замените this.props.value на this.state.value внутри тега
    • Замените обработчик события onClick={...} на onClick={() => this.setState({value: 'X'})} .
    • Поместите свойства className и onClick в отдельные строки для лучшей читабельности.

    После этих изменений тег ); } }

    Вызывая this.setState из обработчика onClick в методе Square render , мы сообщаем React повторно отображать этот Square всякий раз, когда нажимается его ); } }

    При щелчке по квадрату вызывается функция onClick , предоставляемая Board. Вот обзор того, как это достигается:

    1. Свойство onClick во встроенном компоненте DOM
    2. Когда кнопка нажата, React вызовет обработчик события onClick , который определен в методе Square render() .
    3. Этот обработчик событий вызывает this.props.onClick() . Правление определило реквизит Square onClick .
    4. Поскольку Board передал onClick={() => this.handleClick(i)} в Square, Square вызывает handleClick(i) Board при нажатии.
    5. Мы еще не определили метод handleClick() , поэтому наш код дает сбой.Если вы сейчас щелкнете квадрат, вы должны увидеть красный экран с ошибкой, говорящий что-то вроде «this.handleClick не является функцией».

    Примечание

    Атрибут onClick элемента DOM

    Когда мы пытаемся щелкнуть квадрат, мы должны получить сообщение об ошибке, потому что мы еще не определили handleClick . Теперь мы добавим handleClick в класс Board:

    .
      класс Board расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        это.состояние = {
          квадраты: Массив(9).заполнить (нулевой),
        };
      }
    
      handleClick(i) { const squares = this.state.squares.slice(); квадраты [i] = 'X'; this.setState({квадраты: квадраты}); }
      визуализировать квадрат (я) {
        возврат (
          <Квадрат
            значение={this.state.squares[i]}
            onClick={() => this.handleClick(i)}
          />
        );
      }
    
      оказывать() {
        const status = 'Следующий игрок: X';
    
        возврат (
          <дел>
            
    {status}
    {это.визуализировать квадрат (0)} {это.renderSquare(1)} {это.renderSquare(2)}
    {это.renderSquare(3)} {это.renderSquare(4)} {это.renderSquare(5)}
    {это.renderSquare(6)} {это.renderSquare(7)} {это.renderSquare(8)}
  • ); } }

    Посмотреть полный код на этом этапе

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

    Поскольку компоненты Square больше не сохраняют состояние, компоненты Square получают значения от компонента Board и сообщают компоненту Board при нажатии. В терминах React компоненты Square теперь являются контролируемыми компонентами .Правление имеет над ними полный контроль.

    Обратите внимание, как в handleClick мы вызываем .slice() для создания копии массива квадратов для изменения вместо изменения существующего массива. Мы объясним, почему мы создаем копию массива квадратов в следующем разделе.

    Почему важна неизменность

    В предыдущем примере кода мы предложили создать копию массива квадратов с помощью метода slice() вместо изменения существующего массива.Теперь мы обсудим неизменность и почему важно изучить неизменность.

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

    Изменение данных с мутацией
      var player = {счет: 1, имя: 'Джефф'};
    игрок.счет = 2;
      
    Изменение данных без изменения
      var player = {счет: 1, имя: 'Джефф'};
    
    вар новый игрок = объект.назначить ({}, игрок, {счет: 2});
    
    
    
      

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

    Сложные функции становятся простыми

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

    Обнаружение изменений

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

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

    Определение момента повторного рендеринга в React

    Основное преимущество неизменяемости заключается в том, что она помогает создавать чистых компонентов в React. Неизменяемые данные могут легко определить, были ли внесены изменения, что помогает определить, когда компонент требует повторного рендеринга.

    Вы можете узнать больше о shouldComponentUpdate() и о том, как можно собрать чистых компонентов , прочитав Оптимизация производительности.

    Функциональные компоненты

    Теперь мы изменим Square на функциональный компонент .

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

    Замените класс Square этой функцией:

      функция Квадрат(реквизит) {
      возврат (
        

    Мы изменили this.props на props оба раза, когда он появляется.

    Посмотреть полный код на этом этапе

    Примечание

    Когда мы изменили Square, чтобы он стал функциональным компонентом, мы также изменили onClick={() => this.props.onClick()} на более короткий onClick={props.onClick} (обратите внимание на отсутствие скобок на с обеих сторон ).

    По очереди

    Теперь нам нужно исправить очевидный дефект в нашей игре в крестики-нолики: на доске нельзя отмечать буквы «О».

    По умолчанию первым ходом будет «X». Мы можем установить это значение по умолчанию, изменив начальное состояние в нашем конструкторе Board:

    .
      класс Board расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        это.состояние = {
          квадраты: Массив(9).fill(null),
          xIsNext: правда, };
      }  

    Каждый раз, когда игрок перемещается, xIsNext (логическое значение) будет перевернуто, чтобы определить, какой игрок ходит следующим, и состояние игры будет сохранено.Мы обновим функцию handleClick платы, чтобы изменить значение xIsNext :

    .
      дескрипторClick(i) {
        константные квадраты = this.state.squares.slice();
        квадраты[i] = this.state.xIsNext ? «Х»: «О»; это.setState({
          квадраты: квадраты,
          xIsNext: !this.state.xIsNext, });
      }  

    С этим изменением «X» и «O» могут меняться. Попробуй это!

    Давайте также изменим текст «статус» в рендере Board , чтобы он отображал, у какого игрока следующий ход:

      рендеринг () {
        const status = 'Следующий игрок:' + (this.состояние.xIsNext ? «Х»: «О»);
        возврат (
            

    После применения этих изменений у вас должен быть этот компонент Board:

      класс Board расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        это.состояние = {
          квадраты: Массив(9).fill(null),
          xIsNext: правда, };
      }
    
      дескрипторклик(я) {
        константные квадраты = this.state.squares.slice(); квадраты[i] = this.state.xIsNext ? «Х»: «О»; this.setState({ квадраты: квадраты, xIsNext: !this.состояние.xIsNext, }); }
    
      визуализировать квадрат (я) {
        возврат (
          <Квадрат
            значение={this.state.squares[i]}
            onClick={() => this.handleClick(i)}
          />
        );
      }
    
      оказывать() {
        const status = 'Следующий игрок:' + (this.state.xIsNext ? 'X' : 'O');
        возврат (
          <дел>
            
    {status}
    {это.renderSquare(0)} {это.renderSquare(1)} {это.renderSquare(2)}
    {это.рендерквадрат(3)} {это.renderSquare(4)} {это.renderSquare(5)}
    {это.renderSquare(6)} {это.renderSquare(7)} {это.renderSquare(8)}
    ); } }

    Посмотреть полный код на этом этапе

    Объявление победителя

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

    .
      функция calculateWinner(квадраты) {
      постоянные строки = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
      ];
      for (пусть я = 0; я  

    Учитывая массив из 9 квадратов, эта функция проверит победителя и вернет 'X' , 'O' или null в зависимости от ситуации.

    Мы вызовем calculateWinner(squares) в функции Board render , чтобы проверить, выиграл ли игрок. Если игрок выиграл, мы можем отобразить такой текст, как «Победитель: X» или «Победитель: O». Мы заменим объявление статуса в функции Board render на этот код:

      рендеринг () {
        константный победитель = вычислить победителя (это.состояние.квадраты); пусть статус; если (победитель) { статус = 'Победитель:' + победитель; } else { status = 'Следующий игрок: ' + (this.состояние.xIsNext ? «Х»: «О»); }
        возврат (
            

    Теперь мы можем изменить функцию handleClick Board так, чтобы она возвращалась раньше, игнорируя щелчок, если кто-то выиграл игру или если квадрат уже заполнен:

      дескрипторClick(i) {
        константные квадраты = this.state.squares.slice();
        если (вычислитьПобедителя(квадраты) || квадраты[i]) { return; } квадраты[i] = this.state.xIsNext ? «Х»: «О»;
        это.setState({
          квадраты: квадраты,
          xIsNext: !это.состояние.xIsNext,
        });
      }  

    Посмотреть полный код на этом этапе

    Поздравляем! Теперь у вас есть работающая игра в крестики-нолики. И вы только что изучили основы React. Итак, , вы , вероятно, настоящий победитель.

    Добавление путешествий во времени

    В качестве последнего упражнения давайте сделаем возможным «вернуться назад во времени» к предыдущим ходам в игре.

    Сохранение истории ходов

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

    Однако мы использовали slice() для создания новой копии массива квадратов после каждого перемещения и обрабатывали его как неизменяемый. Это позволит нам хранить каждую прошлую версию массива квадратов и перемещаться между уже произошедшими поворотами.

    Мы будем хранить последние квадратов массивов в другом массиве с именем history . Массив history представляет все состояния доски, от первого до последнего хода, и имеет следующую форму:

      история = [
      
      {
        квадраты: [
          нуль, нуль, нуль,
          нуль, нуль, нуль,
          нуль, нуль, нуль,
        ]
      },
      
      {
        квадраты: [
          нуль, нуль, нуль,
          нуль, 'X', ноль,
          нуль, нуль, нуль,
        ]
      },
      
      {
        квадраты: [
          нуль, нуль, нуль,
          нуль, 'X', ноль,
          ноль, нуль, 'О',
        ]
      },
      
    ]  

    Теперь нам нужно решить, какой компонент должен владеть состоянием истории .

    Состояние поднятия вверх, снова

    Нам нужно, чтобы компонент Game верхнего уровня отображал список прошлых ходов. Для этого ему потребуется доступ к истории , поэтому мы поместим состояние history в компонент Game верхнего уровня.

    Помещение состояния history в компонент Game позволяет удалить состояние квадратов из его дочернего компонента Board. Точно так же, как мы «подняли состояние» из компонента Square в компонент Board, мы теперь поднимаем его из Board в компонент Game верхнего уровня.Это дает компоненту Game полный контроль над данными Board и позволяет ему рендерить предыдущие ходы из истории .

    Сначала мы настроим начальное состояние компонента Game в его конструкторе:

      класс Game расширяет React.Component {
      конструктор (реквизит) { супер (реквизит); this.state = { история: [{ квадраты: Array(9).fill(null), }], xIsNext: true, }; }
      оказывать() {
        возврат (
          
    <Доска />
    <дел>{} <ол>{}
    ); } }

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

    • Удалить конструктор в Board.
    • Замените this.state.squares[i] на this.props.squares[i] в Board renderSquare .
    • Замените this.handleClick(i) на this.props.onClick(i) в Board renderSquare .

    Компонент Board теперь выглядит так:

      класс Board расширяет React.Component {
      дескрипторклик(я) {
        константные квадраты = this.state.squares.slice();
        если (вычислитьПобедителя(квадраты) || квадраты[i]) {
          возврат;
        }
        квадраты[i] = this.state.xIsNext ? «Х»: «О»;
        это.setState({
          квадраты: квадраты,
          xIsNext: !this.state.xIsNext,
        });
      }
    
      визуализировать квадрат (я) {
        возврат (
          <Квадрат
            значение = {это.props.squares[i]} onClick={() => this.props.onClick(i)} />
        );
      }
    
      оказывать() {
        константный победитель = вычислить победителя (это.состояние.квадраты);
        пусть статус;
        если (победитель) {
          статус = 'Победитель: ' + победитель;
        } еще {
          status = 'Следующий игрок: ' + (this.state.xIsNext ? 'X' : 'O');
        }
    
        возврат (
          <дел>
            
    {status}
    {это.renderSquare(0)} {это.renderSquare(1)} {это.визуализировать квадрат (2)}
    {это.renderSquare(3)} {это.renderSquare(4)} {это.renderSquare(5)}
    {это.renderSquare(6)} {это.renderSquare(7)} {это.renderSquare(8)}
    ); } }

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

      рендеринг () {
        постоянная история = это.гос.история; постоянный текущий = история[история.длина - 1]; константный победитель = вычислить победителя (current.squares); пусть статус; если (победитель) { статус = 'Победитель:' + победитель; } else { status = 'Следующий игрок: ' + (this.state.xIsNext ? 'X' : 'O'); }
        возврат (
          
    this.handleClick(i)} />
    {status}
      {}
    ); }

    Поскольку компонент Game теперь отображает статус игры, мы можем удалить соответствующий код из метода Board render .После рефакторинга функция Board render выглядит так:

      render() { return ( 
    {this.renderSquare(0)} {это.renderSquare(1)} {это.renderSquare(2)}
    {это.renderSquare(3)} {это.renderSquare(4)} {это.renderSquare(5)}
    {это.рендерквадрат(6)} {это.renderSquare(7)} {это.renderSquare(8)}
    ); }

    Наконец, нам нужно переместить метод handleClick из компонента Board в компонент Game. Нам также необходимо изменить handleClick , поскольку состояние компонента Game имеет другую структуру. В методе Game handleClick мы объединяем новые записи истории в history .

      дескрипторClick(i) {
        постоянная история = это.гос.история; постоянный текущий = история[история.длина - 1]; константные квадраты = текущие.квадраты.срез(); если (вычислитьПобедителя(квадраты) || квадраты[i]) {
          возврат;
        }
        квадраты[i] = this.state.xIsNext ? «Х»: «О»;
        это.setState({
          история: history.concat([{ квадраты: квадраты, }]), xIsNext: !this.state.xIsNext,
        });
      }  

    Примечание

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

    На данный момент компоненту Board нужны только методы renderSquare и render . Состояние игры и метод handleClick должны находиться в компоненте Game.

    Посмотреть полный код на этом этапе

    Отображение прошлых ходов

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

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

    В JavaScript массивы имеют метод map() , который обычно используется для сопоставления данных с другими данными, например:

      константные числа = [1, 2, 3];
    const удвоился = числа.карта (х => х * 2);  

    Используя метод map , мы можем сопоставить нашу историю ходов с элементами React, представляющими кнопки на экране, и отобразить список кнопок, чтобы «перепрыгнуть» к прошлым ходам.

    Давайте карту по истории в игре рендеринг метод:

      рендеринг () {
        const history = this.state.history;
        постоянный текущий = история[история.длина - 1];
        константный победитель = вычислить победителя (current.squares);
    
        const move = history.map((step, move) => { const desc = move ? 'Перейти к ходу #' + move : 'Перейти к началу игры'; return ( 
  • );}); пусть статус; если (победитель) { статус = 'Победитель: ' + победитель; } еще { status = 'Следующий игрок: ' + (this.состояние.xIsNext ? «Х»: «О»); } возврат (
    <Доска квадраты={текущие.квадраты} onClick={(i) => this.handleClick(i)} />
    {статус
      {перемещает
    ); }

    Посмотреть полный код на этом этапе

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

    Для каждого хода в истории игры в крестики-нолики мы создаем элемент списка

  • , который содержит кнопку
  • ); });

    Посмотреть полный код на этом этапе

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

    Во-первых, добавьте stepNumber: 0 к начальному состоянию конструктора Game :

      класс Game расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        это.состояние = {
          история: [{
            квадраты: Массив(9).fill(null),
          }],
          stepNumber: 0, xIsNext: правда,
        };
      }  

    Далее мы определим метод jumpTo в игре, чтобы обновить этот stepNumber .Мы также устанавливаем xIsNext в значение true, если число, на которое мы меняем stepNumber , четное:

      дескрипторClick(i) {
        
      }
    
      jumpTo(шаг) { this.setState({ stepNumber: шаг, xIsNext: (шаг % 2) === 0, }); }
      оказывать() {
        
      }  

    Обратите внимание, что в методе jumpTo мы не обновили свойство истории состояния. Это связано с тем, что обновления состояния объединяются или, проще говоря, React будет обновлять только свойства, упомянутые в методе setState , оставляя оставшееся состояние как есть.Для получения дополнительной информации см. документацию .

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

    Добавленное нами состояние stepNumber отражает ход, отображаемый пользователю сейчас. После того, как мы сделаем новый ход, нам нужно обновить stepNumber , добавив stepNumber: history.length как часть аргумента this.setState . Это гарантирует, что мы не застрянем, показывая один и тот же ход после того, как был сделан новый.

    Мы также заменим чтение this.state.history на this.state.history.slice(0, this.state.stepNumber + 1) . Это гарантирует, что если мы «вернемся назад во времени», а затем сделаем новый ход из этой точки, мы отбросим всю «будущую» историю, которая сейчас была бы неверной.

      дескрипторClick(i) {
        const history = this.state.history.slice(0, this.state.stepNumber + 1); постоянный текущий = история[история.длина - 1];
        const квадраты = текущие квадраты.кусочек();
        если (вычислитьПобедителя(квадраты) || квадраты[i]) {
          возврат;
        }
        квадраты[i] = this.state.xIsNext ? «Х»: «О»;
        это.setState({
          история: history.concat([{
            квадраты: квадраты
          }]),
          stepNumber: history.length, xIsNext: !this.state.xIsNext,
        });
      }  

    Наконец, мы изменим метод рендеринга компонента Game, чтобы он не всегда отображал последний ход, а отображал текущий выбранный ход в соответствии с stepNumber :

    .
      рендеринг () {
        постоянная история = это.гос.история;
        const current = history[this.state.stepNumber]; константный победитель = вычислить победителя (current.squares);
    
          

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

    Посмотреть полный код на этом этапе

    Подведение итогов

    Поздравляем! Вы создали игру в крестики-нолики, которая:

    • Позволяет играть в крестики-нолики,
    • Указывает, когда игрок выиграл игру,
    • Сохраняет историю игры по ходу игры,
    • Позволяет игрокам просматривать историю игры и просматривать предыдущие версии игрового поля.

    Отличная работа! Мы надеемся, что теперь вы чувствуете, что хорошо понимаете, как работает React.

    Проверьте окончательный результат здесь: Окончательный результат .

    Если у вас есть дополнительное время или вы хотите попрактиковаться в своих новых навыках React, вот несколько идей по улучшению игры в крестики-нолики, которые перечислены в порядке возрастания сложности:

    1. Показать расположение для каждого хода в формате (столбец, строка) в списке истории ходов.
    2. Выделите жирным текущий выбранный элемент в списке перемещения.
    3. Перепишите доску, чтобы использовать две петли для создания квадратов вместо их жесткого кодирования.
    4. Добавьте кнопку-переключатель, которая позволяет сортировать ходы в порядке возрастания или убывания.
    5. Когда кто-то выигрывает, выделите три клетки, которые привели к выигрышу.
    6. Когда никто не выигрывает, отображать сообщение о ничьей.

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

    Стандартный стиль JavaScript

    При поддержке

    Английский • Испания (Латинская Америка) • Французский • Бахаса Индонезия • Итальяно (итальянский) • 日本語 (японский) • 한국어 (корейский) • Португаль (Бразилия) • 简体中文 (упрощенный китайский) • 繁體中文 (тайваньский мандарин)

    Этот модуль экономит ваше (и других!) время тремя способами:

    • Нет конфигурации. Самый простой способ обеспечить качество кода в вашем проект. Никаких решений. Нет файлов .eslintrc для управления. Это просто работает.
    • Автоматически форматировать код. Просто запустите стандартную команду --fix и попрощайтесь с беспорядочный или непоследовательный код.
    • Заблаговременно выявляйте проблемы со стилем и ошибки программиста. Сохранить драгоценный обзор кода время, устраняя обмен мнениями между рецензентом и участником.

    Попробуйте, запустив npx standard --fix прямо сейчас!

    Самый простой способ использовать стандартный стиль JavaScript — установить его глобально как Программа командной строки Node.Выполните следующую команду в Терминале:

      $ стандартная установка npm --global
      

    Или вы можете установить стандарт локально для использования в одном проекте:

      $ стандартная установка npm --save-dev
      

    Примечание. Для выполнения предыдущих команд должны быть установлены Node.js и npm.

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

      $ стандарт
    Ошибка: использовать стандартный стиль JavaScript
      библиотека/торрент.js:950:11: Ожидалось '===', а вместо этого было '=='.
      

    Если вы установили стандарт локально, вместо этого запустите npx :

      $ npx стандарт
      

    При желании вы можете передать каталог (или каталоги), используя шаблон glob. Быть обязательно заключайте в кавычки пути, содержащие шаблоны глобусов, чтобы они расширялись стандартный вместо вашей оболочки:

      $ стандартный "src/util/**/*.js" "test/**/*.js"
      

    Примечание: по умолчанию стандарт будет искать все файлы, соответствующие шаблонам: **/*.js , **/*.jsx .

    1. Добавьте его в package.json

        {
        "name": "мой крутой пакет",
        "devDependencies": {
          "стандарт": "*"
        },
        "скрипты": {
          "test": "стандартный узел && my-tests.js"
        }
      }
        
    2. Стиль проверяется автоматически при запуске npm test

        $ тест нпм
      Ошибка: использовать стандартный стиль JavaScript
        lib/torrent.js:950:11: ожидалось '===', а вместо этого было '=='. 
    3. Больше никогда не оставляйте отзыв о стиле по запросу на вытягивание!

    Красота стандартного стиля JavaScript заключается в его простоте. Никто не хочет поддерживать несколько файлов конфигурации в стиле сотен строк для каждого модуля/проекта они работают. Хватит этого безумия!

    Этот модуль экономит ваше (и других!) время тремя способами:

    • Нет конфигурации. Самый простой способ обеспечить единый стиль в вашем проект. Просто бросьте это.
    • Автоматически форматировать код. Просто запустите стандартную команду --fix и попрощайтесь с беспорядочный или непоследовательный код.
    • Заблаговременно выявляйте проблемы со стилем и ошибки программиста. Сохранить драгоценный обзор кода время, устраняя обмен мнениями между рецензентом и участником.

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

    Для получения дополнительной информации см. доклад на конференции «Пишем идеальный код со стандартными и ESLint". Из этого доклада вы узнаете о линтинге, когда использовать стандартный против eslint и как красивее сравнивается по стандарту .

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

    Standard также является самым популярным линтером в GitHub. Демонстрация Clean Code Linter.

    Сначала установите стандарт . Затем установите соответствующий плагин для вашего редактора:

    .

    возвышенный текст

    Используя Package Control , установите SublimeLinter и SublimeLinter-вклад-стандарт .

    Для автоматического форматирования при сохранении установите StandardFormat .

    Атом

    Установить linter-js-standard .

    В качестве альтернативы можно установить linter-js-standard-engine . Вместо связывая версию стандарта , он будет автоматически использовать установленную версию в вашем текущем проекте. Он также будет работать из коробки с другими линтерами на основе на стандартный двигатель .

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

    Код Visual Studio

    Установите vscode-standard .(Включает поддержку автоматического форматирования.)

    Для фрагментов кода JS установите: vscode-standardjs-snippets . Для фрагментов React установите vscode-react-standard .

    Вим

    Установить или . И добавьте эти строки в ваш файл .vimrc .

      пусть g:ale_linters = {
    \ 'javascript': ['стандартный'],
    \}
    пусть g:ale_fixers = {'javascript': ['стандартный']}
      

    Это устанавливает стандарт как ваш единственный линтер и средство исправления для файлов javascript и, таким образом, предотвращает конфликты с eslint.Для линтинга и автоматического исправления при сохранении добавьте эти строки в .vimrc :

      пусть g:ale_lint_on_save = 1
    пусть g: ale_fix_on_save = 1
      

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

    Эмакс

    Установите Flycheck и ознакомьтесь с руководством , чтобы узнать как включить его в своих проектах.

    Кронштейны

    Найдите в реестре расширений «Стандартный стиль кода» и нажмите «Установить».

    WebStorm (PhpStorm, IntelliJ, RubyMine, JetBrains и т. д.)

    WebStorm недавно объявил о встроенной поддержке для стандартный прямо в IDE.

    Если вы по-прежнему предпочитаете настраивать стандартный вручную, следуйте этому руководству. Это относится ко всем продуктам JetBrains, включая PhpStorm, IntelliJ, RubyMine и т. д.

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

      [![Руководство по стилю JavaScript](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)
      

      [![Руководство по стилю JavaScript](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
      

    Нет. Весь смысл стандарта в том, чтобы сэкономить ваше время, избегая bikeshedding о стиле кода. В сети много споров о вкладки противпробелы и т. д., которые никогда не будут разрешены. Эти дебаты только отвлекают от делать дела. В конце дня вы должны «просто что-то выбрать», и вот и вся философия стандарта -- это куча разумных "просто выбери что-то мнения. Надеюсь, пользователи увидят в этом ценность, а не защиту своих собственные мнения.

    Есть пара подобных пакетов для тех, кто не хочет полностью принимать стандарт :

    Если вы действительно хотите настроить сотни правил ESLint по отдельности, вы можете всегда используйте eslint напрямую с eslint-config-standard для слой ваших изменений сверху. стандартное извлечение может помочь вы переходите с Standard на eslint и eslint-config-standard .

    Совет

    Pro: просто используйте стандарт и двигайтесь дальше. Есть реальные реальные проблемы, которые вы можете потратить свое время на решение! 😛

    Конечно нет! Изложенный здесь стиль не связан с каким-либо официальным веб-сайтом. группы стандартов, поэтому этот репозиторий называется стандартом /стандартом , а не ECMA/стандарт .

    Слово "стандарт" имеет больше значений, чем просто "веб-стандарт" 🙂 Например:

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

    Да! Вы можете использовать стандарт --fix для автоматического устранения большинства проблем.

    Стандарт --fix встроен в стандарт для максимального удобства.Большинство проблем поправимы, но некоторые ошибки (например, забывание обработать ошибки) должны быть исправлены вручную.

    Чтобы сэкономить ваше время, стандарт выводит сообщение " Выполнить стандарт --fix для автоматического исправления некоторых проблем ", когда обнаруживает проблемы, которые можно исправить. автоматически.

    Определенные пути ( node_modules/ , покрытие/ , поставщик/ , *.min.js , и файлы/папки, начинающиеся с . , например .git/ ), автоматически игнорируются.

    Пути в корневом файле проекта .gitignore также автоматически игнорируются.

    Иногда вам нужно игнорировать дополнительные папки или определенные мини-файлы. Делать что добавьте свойство standard.ignore в package.json :

      "стандарт": {
      "игнорировать": [
        "**/из/",
        "/библиотека/выбрать2/",
        "/библиотека/ckeditor/",
        "tmp.js"
      ]
    }
      

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

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

    Отключить все правила на определенной строке:

      файл = 'Я знаю, что делаю'
      

    Или отключите только правило "не использовать перед определением" :

      файл = 'Я знаю, что делаю'
      

    Или отключите правило "не использовать перед определением" для нескольких строк :

     
    консоль.log('Здесь идет код нарушения...')
    console.log('Здесь находится оскорбительный код...')
    console.log('Здесь находится оскорбительный код...')
    
      

    Некоторые пакеты (например, мокко ) помещают свои функции (например, описывают , это ) на глобальный объект (плохая форма!). Поскольку эти функции не определены или требуют 'd в любом месте вашего кода стандарт предупредит, что вы используете переменную, которая не определено (обычно это правило очень полезно для отлова опечаток!).Но мы хотим чтобы отключить его для этих глобальных переменных.

    Чтобы стандарт (а также люди, читающие ваш код) знали, что определенные переменные являются глобальными в вашем коде, добавьте это в начало файла:

     
      

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

      $ стандартный --global myVar1 --global myVar2
      

    Или добавьте это в package.json :

      {
      "стандарт": {
        "глобальные": [ "мояПеременная1", "мояПеременная2" ]
      }
    }
      

    Примечание: global и global эквивалентны.

    стандарт поддерживает новейшие функции ECMAScript, ES8 (ES2017), включая предложения языковых функций, которые находятся на «Этапе 4» процесса предложения.

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

    Чтобы использовать собственный парсер, сначала установите его из npm:

      npm установить @babel/eslint-parser --save-dev
      

    Затем выполните:

      $ стандарт --parser @babel/eslint-parser
      

    Или добавьте это в пакет .json :

      {
      "стандарт": {
        "parser": "@babel/eslint-parser"
      }
    }
      

    стандарт поддерживает новейшие функции ECMAScript. Однако Flow и TypeScript добавляют новые синтаксиса языка, поэтому они не поддерживаются «из коробки».

    Для TypeScript поддерживается и поддерживается официальный вариант ts-standard , обеспечивающий очень аналогичный опыт стандарта .

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

    TypeScript

    ts-standard — официально поддерживаемый вариант для Машинопись. ts-standard поддерживает все те же правила и параметры, что и стандарт , и включает дополнительные правила, специфичные для TypeScript. ts-standard будет даже проверять обычные файлы javascript установив конфигурацию в tsconfig.json .

      npm установить ts-standard --save-dev
      

    Затем запустите (где tsconfig.json находится в рабочем каталоге):

      $ ц-стандарт
      

    Или добавьте это в package.json :

      {
      "тс-стандарт": {
        "проект": "./tsconfig.json"
      }
    }
      

    Примечание. Чтобы включить в анализ дополнительные файлы, например тестовые файлы, создайте файл tsconfig.eslint.json , который будет использоваться вместо него.

    Если вы действительно хотите настроить сотни правил ESLint по отдельности, вы всегда можете использовать eslint напрямую с eslint-config-standard-with-typescript чтобы наложить ваши изменения сверху.

    Поток

    Чтобы использовать Flow, вам нужно запустить стандарт с @babel/eslint-parser в качестве синтаксического анализатора и eslint-plugin-flowtype в качестве плагина.

      npm install @babel/eslint-parser eslint-plugin-flowtype --save-dev
      

    Затем выполните:

      $ стандарт --parser @babel/eslint-parser --plugin тип потока
      

    Или добавьте это в package.json :

      {
      "стандарт": {
        "парсер": "@babel/eslint-parser",
        «плагины»: [ «тип потока» ]
      }
    }
      

    Примечание. Плагин и плагины эквивалентны.

    Для поддержки мокко в тестовых файлах добавьте это в начало тестовых файлов:

     
      

    Или введите:

      $ стандарт --env мокко
      

    Где мокко может быть одним из jest , jasmine , qunit , phantomjs и так далее. Чтобы увидеть полный список, проверьте ESLint указание среды документация. Список глобальных переменных, доступных для этих сред, см. проверить глобальные нпм модуль.

    Примечание: env и env эквивалентны.

    Добавьте это в начало файлов веб-воркера:

     
      

    Это позволяет стандарту (а также людям, читающим код) знать, что себя является global в коде веб-воркера.

    Для сервисных работников добавьте вместо этого:

     
      

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

    Однако иногда мы можем выпускать новую основную версию стандарта . который изменяет правило, затрагивающее большинство пользователей стандартных (например, переход от var к let / const ). Мы делаем это только тогда, когда думаем, что преимущество стоит затрат и только тогда, когда правило автофиксация.

    В этих ситуациях у нас есть "переходный период", когда изменение правила только предупреждение". Предупреждения не приводят к тому, что стандарт возвращает ненулевое значение (ошибка) код выхода.Однако предупреждающее сообщение все равно будет выведено на консоль. В течение переходный период, с использованием стандартного --fix обновит ваш код, чтобы он готов к следующей основной версии.

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

    Чтобы проверить код внутри файлов Markdown, используйте standard-markdown .

    В качестве альтернативы существуют плагины ESLint, которые могут проверять код внутри Markdown, HTML, и многие другие типы языковых файлов:

    Чтобы проверить код внутри файлов Markdown, используйте подключаемый модуль ESLint:

      $ npm установить eslint-плагин-уценка
      

    Затем, чтобы проверить JS, который появляется внутри блоков кода, выполните:

      $ стандарт --уценка плагина '**/*.md'
      

    Чтобы проверить код внутри файлов HTML, используйте подключаемый модуль ESLint:

      $ npm установить eslint-плагин-html
      

    Затем, чтобы проверить JS, который появляется внутри тегов