Современный JavaScript

В 2015 году был выпущен шестой стандарт для языка веб-програмирования JavaScript под названием ES2015 ECMAScript, его еще называют ЕС6. В новую версию были внесены существенные дополнения, с которыми легче строить амбициозные веб-приложения. Но, усовершенствования не останавливались на ES2015, каждый год выпускается новая версия.

Оглавление:
  1. Объявить переменную
  2. Стрелочные функции
  3. Улучшенный синтаксис класса
  4. Функции Promises и Async
  5. Модули
  6. ESLint
  7. Модульный Код
  8. Модули ES2015
  9. Заключение

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

Cущественные дополнения для JavaScript ES2015
Дополнения ECMAScript 6 для JavaScript

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

К началу

Объявить переменную

Теперь в JavaScript есть еще два способа объявить переменную: let и const.

let тоже самое что и var, только let закрывает переменную:

// ES5
for (var i = 1; i < 5; i++) {
  console.log(i); // цикл с 1 по 4
}
console.log(i);
// 5 - вне цикла переменная i всё равно существует

// ES2015
for (let j = 1; j < 5; j++) {
  console.log(j);
}
console.log(j);
// нет связи с переменной j

const — позволяет изменить значение после объявления переменой, работает подобно константе.

const name = 'Мэри';
      name = 'Том';
// так постоянная переменная
  
// ES2015
const person = { name: 'Мэри' };
      person.name = 'Том';
// имя будет Том 
// JavaScript не ругается, даже если заменить имя
К началу

Стрелочные функции

Стрелки делают синтаксис более чистым для объявления анонимных функций, см. MDN.

// ES5
var add = function(a, b) {
  return a + b;
}

// ES2015
const add = (a, b) => a + b;

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

function Person(){
  this.age = 0;
  
  // ES5
  setInterval(function() {
  this.age++; // |this| ссылается на глобальный объект
  }, 1000);
  
  // ES2015
  setInterval(() => {
  this.age++; // |this| правильно понимает объект
  }, 1000);
  }
  
  var p = new Person();
К началу

Улучшенный синтаксис класса

Сделать более чистый синтаксис поверх существующего механизма основанного на прототипах объектно-ориентированный подхода.

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log('Моё имя ${this.name}');
  }
}

Функции Promises и Async

В ES2015 уже добавили нативную поддержку Promises.

В 2017 году выйдет ES2017 с функцией async function, которая позволяет рассматривать асинхронный код — синхронно.

async function doAsyncOp () {
const result = await asynchronousOperation();
console.log(result);
return result;
};

К началу

Модули

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

ESLint

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

Инструмент ESLint создал Николас Закас в 2013 году. В настоящее время самый мощный и расширяемый линтер для JavaScript. Он предоставляет богатый набор функций:

  • Правила, которые могут быть дополнительно настроены по вашему вкусу.
  • API для создания собственных правил.
  • Множество плагинов с правилами для конкретных библиотек, фреймворков и проектов.
  • Встроенная поддержка ES6, ES7 и JSX.
  • Рекомендуемый набор правил, а также конфигурации для быстрой работы.
  • Можно интегрировать с несколькими редакторами и IDE, например sublime, vim, Visual Studio …
К началу

Модульный Код

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

Модули ES2015

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

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

Например, экспортировать функцию и переменную:


// lib/math.js

export function sum(x, y) {
  return x + y;
}
export let pi = 3.141593;

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

// app.js

import * as math from "lib/math";

console.log("2π = " + math.sum(math.pi, math.pi));

Выборочное импортирование:

// otherApp.js
  
import {sum, pi} from "lib/math";
  
console.log("2π = " + sum(pi, pi));
К началу

Заключение

Переход от HTML к JavaScript может показаться сложным, если вы были далеки от веб-разработок за последние годы. Эта статья полезна для перехода на ресурсы, которые занимаются этим вплотную. Вот оригинал статьи «The Anatomy of a Modern JavaScript Application», и поддержка ECMAScript 6 в Mozilla