Code javascript: основные концепции JavaScript с примерами кода

Содержание

Справочник по JavaScript — Веб-технологии для разработчиков

Эта часть раздела MDN по JavaScript служит хранилищем фактов о языке JavaScript. Более подробную информацию об этом справочнике можно получить здесь.

Глобальные объекты

Эта глава описывает все стандартные встроенные объекты JavaScript вместе с их методами и свойствами.

Значения

Глобальные свойства, возвращающие простое значение.

Функции

Глобальные функции, возвращающие результат определённой подпрограммы.

Фундаментальные объекты

Общие языковые объекты, функции и ошибки.

Числа и даты

Объекты, имеющие дело с числами, датами и математическими вычислениями.

Обработка текста

Объекты для манипулирования текстом.

Индексированные коллекции

Коллекции, упорядоченные по индексам. Массивоподобные объекты.

Коллекции по ключу

Коллекции объектов по ключу. Элементы обходятся в порядке вставки.

Структурированные данные

Буферы данных и Объектная нотация JavaScript (JavaScript Object Notation).

Объекты управляющих абстракций

Рефлексия

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

Дополнения к ядру ECMAScript, отвечающие за функциональность, чувствительную к языку.

Нестандартные объекты

Прочее

Инструкции

Эта глава описывает все инструкции и объявления JavaScript.

Алфавитный список смотрите в боковой панели слева.

Управление потоком выполнения

Блок: Блок используется для группировки нуля и более инструкций. Блок отделяется парой фигурных скобок.
break: Прерывает текущую инструкцию цикла, ветвления или инструкцию с меткой и передаёт управление на инструкцию, следующую за прерываемой.
continue: Прерывает выполнение инструкции в текущей итерации текущего цикла или цикла с меткой и продолжает выполнение цикла со следующей итерации.
Пустая инструкция: Пустая инструкция используется тогда, когда никакой инструкции быть не должно, а по синтаксису JavaScript она требуется.
if...else: Выполняет инструкцию, если указанное условие является истинным. Если условие ложно, выполняет другую инструкцию.
switch: Вычисляет выражение, сопоставляет вычисленное значение с выражением выбора и выполняет инструкции, ассоциированные с этим выбором.
throw: Выбрасывает пользовательское исключение.
try...catch: Помечает блок инструкций и определяет реакцию на возникновение исключения внутри помеченного блока инструкций.

Объявления

var: Объявляет переменную, необязательно инициализирует её значением.
let: Объявляет локальную переменную в области видимости блока, необязательно инициализирует её значением.
const: Объявляет именованную константу только для чтения.

Функции

function: Объявляет функцию с указанными параметрами.
function*: Функции-генераторы, упрощающие написание итераторов.
return: Определяет значение, возвращаемое из функции.
yield: Смотрите статьи Что нового в JavaScript 1.7 и Итераторы и генераторы.

Итерации

do...while: Создаёт цикл, выполняющий указанную инструкцию до тех пор, пока проверяющее условие равно false. Условие вычисляется после выполнения инструкции, так что указанная инструкция выполнится хотя бы один раз.
for: Создаёт цикл, состоящий из трёх необязательных выражений, заключённых в круглые скобки и разделённым точками с запятой с последующей инструкцией, выполняющейся в цикле.
for each...in: Проходит указанной переменной по всем значениям свойств объекта. Выполняет инструкции для каждого уникального свойства.
for...in: В случайном порядке проходит по перечислимым свойствам объекта. Выполняет инструкции для каждого уникального свойства.
for...of: Проходит по итерируемым объектам (включающим в себя массивы, массивоподобные объекты и итераторы с генераторами), выполняя пользовательский хук с инструкциями, исполняющимися для значения каждого уникального свойства.
while: Создаёт цикл, выполняющий указанную инструкцию до тех пор, пока проверяющее условие равно true. Условие вычисляется перед выполнением инструкции..

Прочее

debugger: Вызывает любую доступную функциональность отладки. Если функциональность отладки не доступна, эта инструкция ничего не делает.
export: Используется для экспорта подписанным скриптом свойств, функций и объектов в другие подписанные или неподписанные скрипты. Эта древняя функциональность Netscape была удалена и будет пересмотрена модулями ECMAScript 6.
import: Используется для импорта скриптом свойств, функций и объектов из подписанного скрипта, который предоставил эту информацию. Эта древняя функциональность Netscape была удалена и будет пересмотрена модулями ECMAScript 6.
label: Предоставляет инструкцию с идентификатором, на который вы можете сослаться с помощью инструкций break или continue.
with: Расширяет цепочку областей видимости инструкции.

Выражения и операторы

Эта глава описывает все выражения и операторы JavaScript.

Алфавитный список смотрите в боковой панели слева.

Первичные выражения

Базовые ключевые слова и общие выражения в JavaScript.

this: Ключевое слово this ссылается на контекст выполняемой функции.
function: Ключевое слово function определяет выражение функции.
class: Ключевое слово class определяет выражение класса.
function*: Ключевое слово function* (со звёздочкой) определяет функцию-генератор.
yield: Пауза или продолжение выполнения функции-генератора.
yield*: Делегирует выполнение другому генератору итерируемому объекту.
async function*: async function определяет выражение асинхронной функции.
await: Пауза и продолжение выполнения асинхронной функции и ожидание Promise (результата выполнения) с результатом разрешено/отклонено.
[]: Синтаксис создания инициализатора/литерала массива.
{}: Синтаксис создания инициализатора/литерала объекта
/ab+c/i: Синтаксис создания литерала регулярного выражения.
( ): Оператор группировки.

Левосторонние выражения

Значения слева являются назначением присваивания.

Доступ к свойству: Операторы доступа к членам предоставляют доступ к свойству или методу объекта
(object.property и object['property']).
new: Оператор new создаёт экземпляр объекта с использованием конструктора.
new.target: Свойство new.target ссылается на конструктор или функцию, который был вызван через оператор new.
super: Ключевое слово super вызывает конструктор родительского класса.
...obj: Оператор распространения позволяет развернуть выражение в местах, где ожидается несколько аргументов (при вызове функций) или несколько элементов (при создании литералов массива).

Инкремент и декремент

Операторы постфиксного/префиксного инкремента и декремента.

A++: Оператор постфиксного инкремента.
A--: Оператор постфиксного декремента.
++A: Оператор префиксного инкремента. (Значение переменной, сначала, увеличивается на 1, а затем используется в выражении)
--A: Оператор префиксного декремента.

Унарные операторы

Унарные опарации — это операции с одним операндом.

delete: Оператор delete удаляет свойство из объекта.
void: Оператор void отбрасывает возвращаемое значение выражения.
typeof: Оператор typeof определяет тип переданного объекта.
+: Оператор унарного плюса преобразует свой операнд в тип Number.
-: Оператор унарного минуса преобразует свой операнд в тип Number, а затем меняет его знак.
~: Оператор побитового НЕ.
!: Оператор логического НЕ.

Арифметические операторы

Арифметические операторы своими операндами принимают числовые значения (литерали или переменные) и возвращают одно числовое значение.

+: Оператор сложения.
-: Оператор вычитания.
/: Оператор деления.
*: Оператор умножения.
%: Оператор взятия остатка от деления.
**: Оператор возведения в степень.

Реляционные операторы

Реляционные операторы (операторы отношения) сравнивают свои операнды и возвращают значение типа Boolean, зависящее от того, был ли результат сравнения истинным или ложным.

in: Оператор in определяет, содержит ли объект указанное свойство.
instanceof: Оператор instanceof определяет, является ли объект экземпляром потомком Prototype (или экземпляром) другого объекта.
<: Оператор меньше.
>: Оператор больше.
<=: Оператор меньше или равно.
>=: Оператор больше или равно.

Операторы равенства

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

==: Оператор проверки на равенство.
!=: Оператор проверки на неравенство.
===: Оператор проверки на идентичность.
!==: Оператор проверки на неидентичность.

Операторы побитового сдвига

Операции для сдвига всех битов операнда.

<<: Оператор побитового сдвига влево.
>>: Оператор знакового побитового сдвига вправо.
>>>: Оператор беззнакового побитового сдвига вправо.

Бинарные побитовые операторы

Побитовые операторы трактуют свои операнды как набор из 32 битов (нулей и единиц) и возвращают стандартные числовые значения JavaScript.

&: Оператор побитового И.
|: Оператор побитового ИЛИ.
^: Оператор побитового ИСКЛЮЧАЮЩЕГО ИЛИ.

Бинарные логические операторы

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

&&: Оператор логического И.
||: Оператор логического ИЛИ.

Условный (тернарный) оператор

(условие ? ifTrue : ifFalse): Условный оператор возвращает одно значение из двух данных в зависимости от логического значения условия.

Операторы присваивания

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

=: Оператор присваивания.
*=: Оператор присваивания с умножением.
/=: Оператор присваивания с делением.
%=: Оператор присваивания с взятием остатка от деления.
+=: Оператор присваивания со сложением.
-=: Оператор присваивания с вычитанием.
<<=: Оператор присваивания со сдвигом влево.
>>=: Оператор присваивания со знаковым сдвигом вправо.
>>>=: Оператор присваивания с беззнаковым сдвигом вправо.
&=: Оператор присваивания с побитовым И.
^=: Оператор присваивания с побитовым ИСКЛЮЧАЮЩИМ ИЛИ.
|=: Оператор присваивания с побитовым ИЛИ.
[a, b] = [1, 2] {a, b} = {a:1, b:2}: Деструктурирующее присваивание позволяет вам присваивать свойства массива или объекта переменным с использованием синтаксиса, очень похожего на объявление литералов массива или объекта.

Оператор запятая

,: Оператор запятая позволяет вычислять несколько выражений в одном операторе и возвращает результат вычисления последнего выражения.
Нестандартные особенности
Legacy generator function: Ключевое слово function может быть использовано для определения устаревших функций-генераторов в одном выражении. Для того, чтобы сделать такую функцию, её тело должно содержать хотя бы одно выражение yield.
Expression closures: Синтаксис закрытого выражения для сокращённого написания простейших функций.
[for (x of y) x]: Упрощённый синтаксис создания массива.
(for (x of y) y): Упрощённый синтаксис создания генератора.

Функции

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

Дополнительные справочные страницы

27 удивительных инструментов VS Code для современных JavaScript-разработчиков

Visual Studio Code (его ещё называют VS Code и VSCode) — это экономичный но мощный кросс-платформенный редактор кода, выполненный в виде настольного приложения. По словам автора материала, перевод которого мы сегодня публикуем, VS Code поддерживает множество инструментов разработки — вроде TypeScript и отладчика Chrome. Это, а также то, что к нему написано невероятное количество опенсорсных расширений, делает VS Code весьма популярным и любимым многими редактором.

Если вы хотите добавить в свой арсенал JavaScript-программиста что-то новое — автор материала надеется, что вы встретите здесь что-нибудь такое, что вам пригодится. Не все из рассмотренных здесь двадцати семи инструментов предназначены исключительно для JS-разработки. Но все они с успехом могут применяться теми, кто пишет на JavaScript.

1. Project Snippets

Расширение Project Snippets, мой фаворит на все времена, создано на основе встроенного в VS Code инструмента User Snippets.

Если вы не знакомы с этой стандартной возможностью VS Code, то знайте, что она позволяет пользователю оформлять собственные фрагменты кода в виде так называемых сниппетов. Делается это для того, чтобы многократно использовать их в своих проектах. Что значит «многократно использовать»?

Рассмотрим пример. Предположим, вы обнаруживаете, что вам часто приходится писать один и тот же шаблонный код. Например — такой:

import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return {
    ...state,
  }
}

export default useSomeHook

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

Если вы, в VS Code, перейдёте в меню File > Preferences > User Snippets, то вы, при желании, можете создать новый глобальный файл сниппетов, выбрав команду New Global Snippets File.

Например, для того чтобы создать новый файл сниппетов для React-проектов, в которых используется TypeScript, вы можете выбрать команду New Global Snippets File и задать имя файла как typescriptreact.json. В редакторе будет открыт только что созданный .json-файл, в котором можно будет описывать сниппеты.

Создадим сниппет на основе фрагмента вышеприведённого кода. Для этого файл typescriptreact.json нужно привести к следующему виду:

{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}

Теперь, когда в файле имеется такое описание сниппета, вы можете создать новый TypeScript-файл с расширением .tsx и ввести в нём префикс rsr. Это вызовет появление всплывающего окна с описанием сниппета. Нажатие на Tab завершает процедуру вставки сниппета в файл. Он будет представлен следующим кодом:

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

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

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

{
  "import Link from components/common/Link": {
    "prefix": "gcl",
    "body": "import Link from 'components/common/Link'"
  },
  "border test": {
    "prefix": "b1",
    "body": "border: '1px solid red',"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: '1px solid green',"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: '1px solid magenta',"
  }
}

Обратите внимание на первый сниппет. Он может вполне хорошо подходить для проекта с определённой структурой папок и файлов. Но что если мы работаем над другим проектом, в котором компонент Link расположен по пути наподобие components/Link?

Взгляните теперь на другие сниппеты. В них используются одиночные кавычки. Их применение приводит к появлению в коде конструкций наподобие border: '1px solid red'.

Такие конструкции совершенно нормально могут применяться в JavaScript. Но что если мы используем в качестве инструмента для стилизации проекта библиотеку styled-components? В таком случае подобный синтаксис нас не устроит. Ведь в styled-components используются обычные CSS-конструкции!

Собственно говоря, здесь нам на помощь и приходит расширение Project Snippets.

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

2. Better Comments

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

С помощью расширения Better Comments можно выделять комментарии разными цветами.

Использование расширения Better Comments

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

3. Bracket Pair Colorizer

Когда мне довелось впервые увидеть скриншоты с результатами работы расширения Bracket Pair Colorizer, мне стало ясно, что это расширение просто обязано появиться в моём наборе инструментов.

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

Использование расширения Bracket Pair Colorizer

4. Material Theme

Тема Material, представленная расширением Material Theme, это грандиозное явление, которое теперь доступно и любителям VS Code. Её использование позволяет привести код к следующему виду.
Оформление кода с использованием темы Material

Это, должно быть, одна из лучших существующих тем.

5. @typescript-eslint/parser

Если вы пишете на TypeScript — вам, скорее всего, стоит рассмотреть возможность перевода своих TSLint-конфигураций на typescript-eslint. Дело в том, что, по некоторым данным, поддержка TSLint компанией Palantir будет через некоторое время прекращена. Вместо TSLint там будет использоваться typescript-eslint.

Проекты постепенно переходят на использование пакета @typescript-eslint/parser и связанных с ним пакетов. Делается это в стремлении подготовиться к будущим изменениям экосистемы TS-разработки. Если вам нравится Prettier, то вы сможете пользоваться этим инструментом, задействовав при этом большинство правил ESLint.

6. Stylelint

Stylelint — это тот инструмент, который всегда используется в моих проектах. Это так по нескольким причинам:

Он помогает избегать ошибок.

Он способствует соблюдению соглашений по стилизации при написании CSS-кода.

Он хорошо работает совместно с Prettier.

Он поддерживает CSS/SCSS/Sass/Less.

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

7. Markdownlint + docsify

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

Это — расширение VS Code, представляющее собой линтер, который помогает проверять стили в .md-файлах. Он, кроме того, поддерживает форматирование текста с помощью Prettier.

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

8. TODO Highlight

У меня есть привычка — писать прямо в коде заметки по поводу того, что нужно сделать в проекте. В результате мне интересны расширения вроде TODO Highlight. Это расширение помогает работать с TODO-заметками.

9. Import Cost

Расширение Import Cost принадлежит к разряду инструментов, полезность которых можно ощутить при их первом применении. Однако после того как подобным инструментом некоторое время попользуются, может оказаться так, что нужды в нём больше не возникнет. Дело в том, что со временем разработчик уже точно знает о том, какие именно сведения выдаст подобное средство. Однако я, всё равно, рекомендую некоторое время этим расширением попользоваться. Вполне может оказаться так, что оно принесёт вам пользу.

10. Highlight Matching Tag

Иногда поиск закрывающей части некоего тега может превратиться в непростое занятие. В таких случаях полезным может оказаться расширение Highlight Matching Tag.
Использование расширения Highlight Matching Tag

11. vscode-spotify

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

Эту проблему мне помогает решить расширение vscode-spotify, которое позволяет управлять проигрывателем Spotify прямо из VS Code.

Благодаря этому расширению можно видеть в статус-баре редактора сведения о проигрываемой композиции. Для переключения записей можно использовать горячие клавиши, управлять Spotify из VS Code можно и с использованием кнопок.

12. GraphQL for VSCode

Популярность технологии GraphQL растёт, примеры её применения можно увидеть практически во всех уголках JavaScript-разработки. Поэтому многим, скорее всего, пригодится расширение GraphQL for VSCode.

Это расширение поддерживает подсветку синтаксиса GraphQL, линтинг, автозавершение кода.

Я много пользуюсь Gatsby, поэтому мне ежедневно приходится читать GraphQL-код. Расширение GraphQL for VSCode мне в этом помогает.

13. Indent-Rainbow

Расширение Indent-Rainbow похоже на вышеописанное расширение Highlight Matching Tag. Если иногда вам непросто бывает разобраться в отступах — это расширение поможет вам справиться с проблемой, улучшив читаемость кода. Вот пример его использования.
Использование расширения Indent-Rainbow

14. Color Highlight

Color Highlight — это одно из тех расширений, о котором меня спрашивают: «Где удалось его найти?». Данное расширение помогает в работе с цветом. Выглядит это так, как показано ниже.
Использование расширения Color Highlight

15. Color Picker

Color Picker — это расширение для VS Code, которое предлагает пользователю графический интерфейс, помогающий выбирать цвета для использования в CSS.

16. REST Client

Когда мне довелось впервые попробовать расширение REST Client — мне оно не показалось особенно полезным. Оно не выдерживало сравнения с чем-то вроде Postman.

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

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

https://google.com

Для того чтобы выполнить запрос HTTP GET по этому адресу — достаточно его выделить, перейти в панель команд (CTRL + SHIFT + P), и выбрать команду Rest Client: Send Request. После этого будет открыта новая вкладка, в которой очень скоро появятся сведения о запросе и ответе. Это очень полезно.
Использование расширения REST Client

Это расширение, кроме того, позволяет настраивать параметры или данные для POST-запросов. Делается это с помощью буквально пары строк кода:

POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

{ "email": "[email protected]", "password": 1 }

Подобная конструкция приведёт к выполнению POST-запроса с параметрами { "email": "[email protected]", "password": 1 }.

И это, на самом деле, лишь предельно сжатое описание возможностей данного расширения.

17. Settings Sync

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

Автоматизировать этот процесс мне удалось с помощью расширения Settings Sync.

Для его использования достаточно лишь иметь аккаунт gist/GitHub. Если возникает необходимость сохранить настройки (сюда входят и клавиатурные привязки, и сниппеты, и расширения, и многое другое) — достаточно воспользоваться комбинацией клавиш SHIFT + ALT + U. Это приведёт к загрузке всех этих настроек в учётную запись gist. При этом они будут доступны только владельцу учётной записи. Для того чтобы загрузить настройки, например — при переходе на новый компьютер, достаточно установить это расширение, ввести данные учётной записи gist и воспользоваться комбинацией клавиш SHIFT + ALT + D.

18. Todo Tree

Расширение Todo Tree помогает находить TODO-комментарии в коде проектов. Оно оформляет эти комментарии в формате дерева, выводимого в левой части экрана.
Использование расширения Todo Tree

19. Toggle Quotes

Toggle Quotes — это интересное расширение, которое позволяет менять вид используемых в коде кавычек. Оно оказывается очень кстати, например, в тех случаях, когда нужно изменить обычные кавычки на обратные кавычки (backticks). Это может понадобиться при интерполяции строк и может оказаться особенно полезным тогда, когда Prettier оформил строки с использованием обычных одинарных кавычек.
Использование расширения Toggle Quotes

20. Better Align

Расширение Better Align позволяет выравнивать код без его предварительного выделения.

Для того чтобы воспользоваться этим расширением, надо поместить курсор в код, который нужно выровнять, открыть панель команд (с использованием CTRL + SHIFT + P или того сочетания клавиш, которое вы назначили для выполнения этой задачи) и вызвать команду Align.

21. Auto Close Tag

Расширение Auto Close Tag помогает мне с того дня, как началась моя работа в VS Code. Оно позволяет ввести нечто вроде <div>, затем — значок /, после чего автоматически закрывает тег.

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

22. Sort Lines

Мне не нравятся массивы, элементы которых расположены не в алфавитном порядке. Быстро справиться с этой проблемой мне помогает расширение Sort Lines. Если вам тоже не нравятся подобные массивы — оно может пригодиться и вам.

23. VSCode Google Translate

Возможно, я — единственный человек, который считает полезным расширение VSCode Google Translate. Но мне оно помогает, так как мне приходится принимать участие в работе над проектами, над которыми вместе со мной трудятся люди, говорящие на разных языках. Это расширение может пригодиться тем, кто, для перевода чего-либо, не хочет сворачивать VS Code.

24. Prettier

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

25. Material Icon Theme

Значки из пакета Material Icon Theme мне нравятся больше, чем другие. С их помощью гораздо легче различать типы файлов. Особенно это справедливо для тех случаев, когда в VS Code используется тёмная тема.

26. IntelliSense for CSS class names in HTML

Расширение с длинным названием IntelliSense for CSS class names in HTML позволяет оснастить VS Code возможностями по автозавершению имён классов CSS в HTML-атрибуте class. Его работа основывается на определениях классов, найденных в вашем рабочем пространстве.

27. Path Intellisense

Расширение Path Intellisense помогает автоматически завершать ввод имён файлов.

Итоги

Надеемся, среди расширений для VS Code, о которых вы только что прочли, найдётся что-то такое, что вам пригодится.

Уважаемые читатели! Какие расширения для VS Code вы добавили бы к тем, о которых шла речь в этой статье?

JavaScript — Веб-технологии для разработчиков

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

Стандартом языка JavaScript является ECMAScript. По состоянию на 2012, все современные браузеры полностью поддерживают ECMAScript 5.1. Старые версии браузеров поддерживают по крайней мере — ECMAScript 3. 17 июня 2015 года состоялся выпуск шестой версии ECMAScript. Эта версия официально называется ECMAScript 2015, которую чаще всего называют ECMAScript 2015 или просто ES2015. С недавнего времени стандарты ECMAScript выпускаются ежегодно. Эта документация относится к последней версии черновика, которой является ECMAScript 2018.

Не следует путать JavaScript c языком программирования Java. И «Java», и «JavaScript» являются торговыми марками или зарегистрированными торговыми марками Oracle в США и других странах. Однако, у обоих языков различный синтаксис, семантика и применение.

Учебные материалы

Научитесь программировать на JavaScript вместе с нашим руководством.

Для абсолютных новичков

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

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

Введение в объекты JavaScript: Объектно-ориентированная природа JavaScript важна для понимания, если вы хотите углубить знание языка и писать более эффективный код. Поэтому мы подготовили модуль, который поможет вам в этом.
Асинхронный JavaScript: Обсуждение асинхронного JavaScript: почему это так важно, как эта возможность языка может использована для обработки потенциальных блокирующих операций, как, например полученые данных с сервера.
Клиентские (браузерные) веб-API: Когда вы пишите клиент веб-сайтов или приложений на JavaScript, вы не далеко уйдете без использования API – интерфейсов для взаимодействия с браузером и операционной системой, на которой запущен сайт, или даже для операций с данными, полученными от других веб-сайтов и сервисов. В этом цикле статей мы разбираемся, что такое API и как использовать некоторые самые распространенные API, которые вам встретятся при разработке.

Руководство по JavaScript

Руководство по JavaScript: Более подробное руководство по языку программирования JavaScript, нацеленное на тех, кто уже имеет опыт программирования на JavaScript или на любом другом языке.

Средний уровень

Понимание JavaScript-фреймворков для фронтенда

JavaScript-фреймворки являются неотъемлемой частью современной веб-разработки,

предоставляя разработчикам проверенные и протестированные

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

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

Повторное введение в JavaScript

Обзор для тех, кто думает, что знает JavaScript.

Структуры данных JavaScript

Обзор существующих структур данных в JavaScript.

Операторы сравнения и тождественности

JavaScript предоставляет три различных оператора сравнения значений: строгое равенство ===, с приведением типов == и метод Object.is().

Замыкания

Замыканния это сочетание функции и лексического окружения в котором она была определена.

Продвинутый уровень

Наследование и цепочка прототипов: Статья разъясняет бытующие заблуждения и недооцененность наследования, основанного на прототипах.
Строгий режим jон ж «use strict»: Строгий режим говорит о том, что вы не можете использовать какую-либо переменную до её объявления. Это ограниченный вариант ECMAScript 5, для более быстрой производительности и простой отладки.
Типизированные массивы: Типизированные массивы предоставляют механизм для работы с необработанными двоичными данными в JavaScript.
Управление памятью: Жизненный цикл памяти и сборка мусора в JavaScript.
Модель параллелизма (мультипоточности) и цикл событий: В JavaScript есть модель параллелизма, основанная на «цикле событий».
Введение в использование XPath в JavaScript: Этот документ описывает интерфейс для использования XPath в JavaScript на прямую, внутри расширений и на веб-сайтах.

Подробный справочник по JavaScript.

Стандартные встроенные объекты: Узнайте о стандартных встроенных объектах Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map, Set, WeakMap , WeakSet и других.
Выражения и операторы: Узнайте о поведении таких операторов в JavaScript, как instanceof, typeof, new, this, приоритете операторов и многом другом.
Инструкции и объявления: Узнайте о do-while, for-in, for-of, try-catch, let, var, const, if-else, switch и многих других выражениях и ключевых словах в JavaScript.
Функции: Узнайте, как работать с функциями в JavaScript, чтобы разрабатывать свои приложения.

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

Инструменты разработчика Firefox: Простой редактор JavaScript, Веб-консоль, JavaScript Профайлер, Отладчик и другие.
JavaScript шеллы: JavaScript шеллы позволяют быстро проверять фрагменты JavaScript кода.
TogetherJS: Объединение усилий стало проще. Добавляя TogetherJS на вашу веб-страницу, ваши пользователи могуь помочь другу-другу в реальном времени!
Stack Overflow: Вопросы по JavaScript на Stack Overflow.
Версии JavaScript и информация о релизах: Просмотрите историю возможностей JavaScript и их статус.
JSFiddle: Редактируйте JavaScript, CSS, HTML и получайте живые результаты. Используйте экспериментальные ресурсы и взаимодействуйте с вашей командой онлайн.

Plunker: Plunker — это онлайн-сообщество для создания, обмена и совместной работы над идеями, касающимися веб-разработки. Редактируйте ваши JavaScript, CSS, HTML файлы, смотрите результат их выполнения и организуйте их в файловую структуру.
JSBin: JS Bin это инструмент с открытым исходным кодом для отладки и совместной разработки.
Codepen: Codepen ещё одна платформа для совместной веб-разработки, дающия результать в реальном-времени.
StackBlitz: StackBlitz — это «песочница»/инструмент отладки, где вы можете размещать полновесные приложения написанные на React, Angular, т др.

Как настроить VS Code для разработки на JavaScript – Hexlet Guides

Содержание

Babel и ES6
Стандарты кодирования
Автоматическое дополнение
1. jsconfig.json
Отладка
Ссылки

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

отладчик кода
встроенный терминал
удобные инструменты для работы с Git
подсветка синтаксиса для множества популярных языков и файловых форматов
удобная навигация
встроенный предпросмотр Markdown
умное автодополнение
встроенный пакетный менеджер

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

Для установки нового пакета зайдите во вкладку “Extensions” которая находится в выпадающем меню “View”, и введите название пакета в строке поиска, нажмите кнопку “Install”.

Babel и ES6

VS Code содержит понятие “сборки проекта”. Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

{
  "version": "2.0.0",
  "type": "shell",
  "tasks": [
      {
          "label": "watch",
          "command": "${workspaceRoot}/node_modules/.bin/babel src --out-dir dist -w --source-maps",
          "group": "build",
          "isBackground": true
      }
  ]
}

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B(macOS) запустит сборку.

Подробнее о tasks можно узнать на сайте VS Code.

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

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

Установите Node.js используя пакетный менеджер вашей операционной системы.
Установите eslint командой npm install -g eslint. Вероятно, вам понадобится использовать sudo.
Установите плагины, которые конфигурируют eslint. Без них (по умолчанию) eslint ничего не проверяет.
```
 npm install -g eslint-config-airbnb-base eslint-plugin-import
```
eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:
```
 extends:
   - 'airbnb-base'
 env:
   node: true
   browser: true
```
Установите расширение “linter-eslint” в VS Code.

Автоматическое дополнение

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json.

jsconfig.json

Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json, то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:

{
    "compilerOptions": {
        "target": "ES6"
    },
    "exclude": [
        "node_modules",
        "**/node_modules/*"
    ]
}

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.

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

Подробнее об отладке можно узнать на сайте VS Code.

27 супер плагинов VS Code для JavaScript разработчика

Думаете, что уже установили на свой VS Code все, что нужно? Вы просто еще не видели эти расширения! Срочно смотрите и устанавливайте!

Visual Studio Code (известный также как VS Code) – легкий, но мощный кроссплатформенный редактор исходного кода. Великолепно подходит для веб-разработки. У него есть множество встроенных плюшек вроде поддержки TypeScript и дебаггера Chrome. А кроме того – триллионы плагинов, с которыми любая сфера программирования станет намного проще.

Представляем топ-лист расширений для JavaScript разработчика!

1. Project Snippets

Великолепный плагин Project Snippets основан на встроенной в VSCode фиче user snippets. Эта удобная возможность позволяет сохранять фрагменты кода, а затем повторно их использовать – в текущем или новом проекте.

Как опытный JavaScript разработчик вы непременно обнаруживали, что набираете один и тот же код не в первый раз. Например, что-то подобное для React-проекта на TypeScript:

import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return {
    ...state,
  }
}

export default useSomeHook

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

Пройдите по цепочке File > Preferences > User Snippets > New Global Snippets File. Редактор предложит вам ввести имя нового сниппета – typescriptreact.json. Сразу после ввода откроется новый json-файл, который вы можете использовать для React-приложений на TypeScript.

Сниппет будет выглядеть вот так:

{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}

Теперь воспользуемся им в деле. Создайте новый TypeScript файл с расширением .tsx, напечатайте в нем префикс, соответствующий только что созданному фрагменту – rsr. Умный редактор сразу же предложит вам сгенерировать сниппет. Для его вывода вы можете воспользоваться выпадающим меню или нажать клавишу tab.

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

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

Ваш глобальный файл настройки typescriptreact.json может выглядеть вот так:

{
  "import Link from components/common/Link": {
    "prefix": "gcl",
    "body": "import Link from 'components/common/Link'"
  },
  "border test": {
    "prefix": "b1",
    "body": "border: '1px solid red',"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: '1px solid green',"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: '1px solid magenta',"
  }
}

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

Обратите внимание, что в трех шаблонах border test значения свойства обернуто в одинарные кавычки: border: '1px solid red'. В JavaScript это абсолютно правильно, но что если в своем проекте вы используете styled-components? Такой синтаксис вам не подойдет, ведь styled-components работают с обычным CSS.

Вот здесь и восходит звезда расширения project snippets для VSCode. Оно дает вам возможность создавать фрагменты не только на глобальном уровне, но и на уровне проекта/рабочей области, чтобы они не мешали друг другу.

2. Better Comments

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

Сделайте ваши комментарии заметнее и понятнее с помощью плагина Better Comments, который раскрасит их в соответствии со значением:

Теперь вы легко можете оставить своей команде предупреждение или задать вопрос с помощью символов ! и ? – они точно будут замечены.

3. Bracket Pair Colorizer

Этот плагин вам совершенно необходим! Bracket Pair Colorizer всего лишь раскрашивает разные пары скобок разными цветами – но эта мелочь потрясающе влияет на вашу продуктивность!

Программирование на JavaScript должно быть приятным, а не раздражающим.

4. VSCode Material Theme

Material Theme – легендарная тема оформления, доступная и для вашего VSCode.

Вполне возможно, что это лучшая из всех когда-либо существовавших тем – установите ее прямо сейчас!

5. @typescript-eslint/parser

Если вы активно используете TypeScript в разработке, то пора задуматься о переносе конфигураций TSLint в ESLint + TypeScript, ведь очень скоро поддержка этого инструмента будет прекращена.

Проекты постепенно готовятся к принятию @typescript-eslint/parser и связанных с ним модулей.

С новыми настройками вы по-прежнему можете использовать большинство правил ESLint. Сохраняется совместимость с Prettier.

6. Stylelint

Если вы еще не используете расширение stylelint для VSCode – какие у вас могут быть оправдания? Срочно установите, ведь оно:

помогает избежать ошибок в CSS;
контролирует соблюдение соглашений о стиле;
работает с Prettier;
понимает ванильный CSS, а также препроцессоры SCSS/Sass/Less;
поддерживает различные плагины, созданные сообществом.

7. Markdownlint + docsify

Многие разработчики любят делать заметки в markdown-файлах: это простой и понятный формат, его легко и писать, и читать.

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

А для генерирования документации используйте плагин docsify, который поддерживает Markdown.

8. TODO Highlight

Плагин TODO Highlight просто выделяет TODO-комментарии, которые JavaScript разработчик оставляет в коде. Теперь вы точно не забудете, что хотели исправить или улучшить.

9. Import Cost

Плагин Import Cost сообщает вам, сколько весит модуль, который вы собираетесь импортировать в проект.

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

10. Highlight Matching Tag

Признавайтесь, часто теряетесь в веренице тегов? Highlight Matching Tag будет искать потерянный закрывающий дескриптор за вас.

11. vscode-spotify

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

Плагин vscode-spotify позволяет использовать Spotify прямо внутри вашего VSCode! Теперь вы можете управлять своим плеером, не покидая редактора.

12. GraphQL for VS Code

GraphQL стремительно набирает популярность, и мы всё активнее используем его в JavaScript-проектах. Пора бы уже подумать об установке GraphQL for VSCode в ваш редактор.

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

13. Indent-Rainbow

Плагин Indent-Rainbow структурирует ваш код, выделяя отступы разными цветами. Теперь здесь намного проще ориентироваться:

14. Color Highlight

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

15. Color Picker

Это расширение для VS Code предлагает вам графический интерфейс для выбора нужного цвета.

16. REST Client

Возможно, плагин REST Client не покажется вам супер полезным на первый взгляд по сравнению, например, с привычным Postman. Однако, поиграв с ним немного, JavaScript разработчик уже не сможет жить по-прежнему.

Это замечательный инструмент для тестирования API. Вы можете просто создать новый файл и написать в нем:

https://google.com

Теперь чтобы отправить HTTP GET-запрос, вам нужно просто выделить эту строку, открыть палитру команд (CTRL+SHIFT+P) и выбрать в ней Rest Client: Send Request. Данные полученного ответа будут показаны в новой вкладке – очень удобно и полезно!

Вы даже можете передать GET-параметры или тело POST-запроса, добавив всего пару строк кода:

POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

{ "email": "[email protected]", "password": 1 }

Этот фрагмент соответствует POST-запросу с параметрами {"email": "[email protected]", "пароль": 1 }.

Это лишь крошечная часть возможностей REST Client. Вы можете узнать о нем больше, если интересно.

17. Settings Sync

Терпеть не можете вручную прописывать настройки ваших плагинов? На помощь вам спешит – вот неожиданность! – еще один плагин – Settings Sync.

Все, что нужно, это аккаунт на gist/GitHub. Каждый раз, когда вы хотите сохранить свои настройки – включая горячие клавиши, сниппеты, расширения – просто нажмите SHIFT+ALT+U, и они будут загружены в вашу учетную запись. При следующем входе в систему или переносе на другой компьютер, вы можете вновь загрузить их комбинацией SHIFT+ALT+D.

18.Todo Tree

Расширение Todo Tree для VS Code соберет по вашей команде все задачи, разбросанные по приложению, в одно дерево в левой части рабочей области редактора.

19. Toggle Quotes

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

20. Better Align

Вы можете выровнять ваш код без предварительного выделения с помощью плагина Better Align. Просто поместите курсор в нужное место, откройте палитру команд (CTRL+SHIFT+P) и вызовите команду Align.

21. Auto Close Tag

Эта небольшая полезная утилита закрывает за вами теги – ей не трудно.

22. Sort Lines

Специально для перфекционистов, которые не смогут уснуть, если массивы строк в их программе не отсортированы по алфавиту! Плагин Sort lines для VS Code сделает вашу жизнь проще.

23. VS Code Google Translate

Совершенно незаменимая вещь для программиста! Если вы не знаете, как правильно назвать переменную или работаете в проекте с поддержкой нескольких языков, обязательно установите VS Code Google Translate. Теперь вы можете переводить, не уходя из редактора.

24. Prettier

Все знают Prettier – это замечательный парикмахер для вашего JavaScript/TypeScript/и т. д. кода.

25. VS Code Material Icon Theme

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

26. IntelliSense for CSS Class Names in HTML

Плагин IntelliSense for CSS class names in HTML обеспечит умное автозавершение для CSS-классов в HTML-коде. Нам этого действительно не хватало!

27. Path Intellisense

Одно из самых полезных расширений VS Code. Path Intellisense умеет автоматически завершать имена файлов, которые вы набираете.

Еще больше плагинов для VS Code

Нашли что-то новенькое? Делитесь и тем, что мы могли упустить 😉

JavaScript коды символов (коды клавиш)

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

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

Попробуйте!

Коды клавиш клавиатуры

Клавиша	Код
backspace	8
tab	9
enter	13
shift	16
ctrl	17
alt	18
pause/break	19
caps lock	20
escape	27
spacebar	32
page up	33
page down	34
end	35
home	36
left arrow	37
up arrow	38
right arrow	39
down arrow	40
insert	45
delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a/ф	65
b/и	66
c/с	67

Клавиша	Код
d/в	68
e/у	69
f/а	70
g/п	71
h/р	72
i/ш	73
j/о	74
k/л	75
l/д	76
m/ь	77
n/т	78
o/щ	79
p/з	80
q/й	81
r/к	82
s/ы	83
t/е	84
u/г	85
v/м	86
w/ц	87
x/ч	88
y/н	89
z/я	90
left window	91
right window	92
select	93
numpad 0	96
numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102

Клавиша	Код
numpad 7	103
numpad 8	104
numpad 9	105
multiply	106
add	107
subtrack	109
decimal point	110
divide	111
f1	112
f2	113
f3	114
f4	115
f5	116
f6	117
f7	118
f8	119
f9	120
f10	121
f11	122
f12	123
num lock	144
scroll lock	145
semi-colon	186
equal sign	187
comma	188
dash	189
period	190
forward slash	191
grave accent	192
open bracket	219
back slash	220
close bracket	221
single quote	222

Преобразование символа в код ASCII в JavaScript

Переполнение стека

Около
Продукты
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира
О компании

Загрузка…

модулей кода JavaScript — Mozilla

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

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

Модули кода JavaScript

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

Общие темы

Фрагменты кода: модули: Примеры использования модулей кода.
Модули JS Mozilla Labs: На этой странице представлен список модулей JavaScript, а также ссылки для загрузки и документация, которые разработчики расширений могут использовать в своем коде.

Стандартные кодовые модули

AddonManager.jsm: Интерфейс для установки, управления и удаления надстроек.
AddonRepository.jsm: Обеспечивает поиск дополнений в репозитории.
Assert.jsm: Реализует спецификацию CommonJS Unit Testing версии 1.1, которая обеспечивает базовый стандартизованный интерфейс для выполнения логических утверждений в коде с дополнительными настраиваемыми отчетами об ошибках.
BookmarkHTMLUtils.jsm: Предоставляет служебные функции для импорта и экспорта закладок из старых файлов закладок в стиле «bookmarks.html».
ctypes.jsm: Предоставляет интерфейс, который позволяет коду JavaScript вызывать собственные библиотеки без необходимости разработки компонента XPCOM.
CustomizableUI.jsm: Позволяет вам взаимодействовать с настраиваемыми кнопками и элементами пользовательского интерфейса главного окна Firefox.
DeferredTask.jsm: Выполнить задачу с задержкой.
Dict.jsm: Предоставляет API для словарей пар ключ / значение.
DownloadLastDir.jsm: Предоставляет путь к каталогу, в который произошла последняя загрузка.
Загрузки.jsm: Предоставляет единую точку входа для взаимодействия с возможностями загрузки платформы.
FileUtils.jsm: Предоставляет помощников для работы с файлами.
Geometry.jsm: Предоставляет процедуры для выполнения основных геометрических операций с точками и прямоугольниками.
HTTP.jsm: Оболочка для XMLHttpRequest, которая предоставляет удобный и упрощенный API для работы с HTTP-запросами.
JNI.jsm: Абстрагирует js-ctypes, чтобы предоставить интерфейс, который позволяет коду JavaScript вызывать код, работающий в собственных JVM.
ISO8601DateUtils.jsm: Предоставляет процедуры для преобразования между объектами JavaScript Date и строками даты ISO 8601.
Log.jsm (ранее log4moz): Предоставляет API в стиле log4j для ведения журнала, сообщений журнала для различных конечных точек, таких как консоль браузера или файл на диске.

NetUtil.jsm: Предоставляет полезные сетевые служебные функции, включая возможность простого асинхронного копирования данных из входного потока в выходной поток.
openLocationLastURL.jsm: Предоставляет доступ к последнему URL-адресу, открытому с помощью параметра «Открыть расположение» в меню «Файл».
OSFile.jsm: Позволяет подпрограммам обращаться к файлам. В которые можно читать, писать, переименовывать, создавать каталоги и т. Д.
PerfMeasurement.jsm: Обеспечивает доступ к низкоуровневому оборудованию и инструментам измерения производительности ОС.
PluralForm.jsm: Предоставляет простой способ получить правильные формы множественного числа для текущего языкового стандарта, а также способы локализации для определенного правила множественного числа.
PopupNotifications.jsm: Дает простой способ представить пользователям немодальные уведомления.
Promise.jsm: Реализует предложение Promises / A +, известное в апреле 2013 года.
PromiseWorker.jsm: Версия ChromeWorker , которая использует промисы для возврата результата рабочего вместо использования для этого события.
Services.jsm: Предоставляет геттеры для удобного получения доступа к часто используемым службам.
source-editor.jsm: Редактор исходного кода используется такими инструментами разработчика, как редактор стилей; этот интерфейс реализует редактор и позволяет вам взаимодействовать с ним.
Sqlite.jsm: API на основе обещаний для mozIStorage / SQLite.
Task.jsm: Реализует подмножество Task.js, чтобы упростить последовательные асинхронные операции, используя возможности оператора JavaScript yield .
Timer.jsm: Чистая реализация JS window.setTimeout .
Webapps.jsm: Предоставляет интерфейс для управления Open Web Apps.
WebRequest.jsm: Предоставляет API для добавления прослушивателей событий для различных этапов выполнения HTTP-запроса.Слушатель событий получает подробную информацию о запросе и может изменить или отменить запрос.
XPCOMUtils.jsm: Содержит утилиты для компонентов JavaScript, загружаемых загрузчиком компонентов JS.

Декабрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Code javascript: основные концепции JavaScript с примерами кода

Справочник по JavaScript — Веб-технологии для разработчиков

Глобальные объекты

Значения

Функции

Фундаментальные объекты

Числа и даты

Обработка текста

Индексированные коллекции

Коллекции по ключу

Структурированные данные

Объекты управляющих абстракций

Рефлексия

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

Нестандартные объекты

Прочее

Инструкции

Управление потоком выполнения

Объявления

Функции

Итерации

Прочее

Выражения и операторы

Первичные выражения

Левосторонние выражения

Инкремент и декремент

Унарные операторы

Арифметические операторы

Реляционные операторы

Операторы равенства

Операторы побитового сдвига

Бинарные побитовые операторы

Бинарные логические операторы

Условный (тернарный) оператор

Операторы присваивания

Оператор запятая

Нестандартные особенности

Функции

Дополнительные справочные страницы

27 удивительных инструментов VS Code для современных JavaScript-разработчиков

1. Project Snippets

2. Better Comments

3. Bracket Pair Colorizer

4. Material Theme

5. @typescript-eslint/parser

6. Stylelint

7. Markdownlint + docsify

8. TODO Highlight

9. Import Cost

10. Highlight Matching Tag

11. vscode-spotify

12. GraphQL for VSCode

13. Indent-Rainbow

14. Color Highlight

15. Color Picker

16. REST Client

17. Settings Sync

18. Todo Tree

19. Toggle Quotes

20. Better Align

21. Auto Close Tag

22. Sort Lines

23. VSCode Google Translate

24. Prettier

25. Material Icon Theme

26. IntelliSense for CSS class names in HTML

27. Path Intellisense

Итоги

JavaScript — Веб-технологии для разработчиков

Учебные материалы

Для абсолютных новичков

Руководство по JavaScript

Средний уровень

Продвинутый уровень

Как настроить VS Code для разработки на JavaScript – Hexlet Guides

Содержание

Babel и ES6

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

Автоматическое дополнение

jsconfig.json