Анатомия современного JavaScript-приложения

Эта статья включена в нашу книгу « JavaScript: лучшие практики» . Будьте в курсе быстро меняющихся лучших практик современного JavaScript.

Нет сомнений, что экосистема JavaScript быстро меняется. Мало того, что с появлением ES2015 (он же ES6) претерпел быстрые изменения и не только новые инструменты и структуры, но и сам язык. Понятно, что было написано много статей с жалобами на то, как трудно в наши дни освоить современную разработку JavaScript.

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

Примечание о Node.js

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

Появление Node.js оказало значительное влияние на экосистему JavaScript, представив менеджер пакетов npm и популяризовав формат модуля CommonJS. Разработчики начали создавать более инновационные инструменты и разрабатывать новые подходы, чтобы стирать грань между браузером, сервером и нативными приложениями.

JavaScript ES2015 +

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

Объявление переменных

В JavaScript теперь есть два дополнительных способа объявления переменных: let и const .

letvar Хотя varlet

 // ES5
for (var i = 1; i < 5; i++) {
  console.log(i);
}
// <-- logs the numbers 1 to 4
console.log(i);
// <-- 5 (variable i still exists outside the loop)

// ES2015
for (let j = 1; j < 5; j++) {
  console.log(j);
}
console.log(j);
// <-- 'Uncaught ReferenceError: j is not defined'

Использование const Для примитивных значений, таких как строки и числа, это приводит к чему-то похожему на константу, поскольку вы не можете изменить значение после того, как оно было объявлено:

 const name = 'Bill';
name = 'Steve';
// <-- 'Uncaught TypeError: Assignment to constant variable.'

// Gotcha
const person = { name: 'Bill' };
person.name = 'Steve';
// person.name is now Steve.
// As we're not changing the object that person is bound to, JavaScript doesn't complain.

Функции стрелок

Функции со стрелками обеспечивают более чистый синтаксис для объявления анонимных функций (лямбда-выражений), отбрасывания ключевого слова functionreturn Это может позволить вам написать код функционального стиля более приятным способом:

 // 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| refers to the global object
  }, 1000);

  // ES2015
  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

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

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

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

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

Обещания / Асинхронные функции

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

 async function doAsyncOp () {
  var val = await asynchronousOperation();
  console.log(val);
  return val;
};

 // lib/math.js
function sum(x, y) {
  return x + y;
}

const pi = 3.141593

module.exports = {
  sum: sum,
  pi: pi
};


// app.js
const math = require("lib/math");

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

 // lib/math.js

export function sum(x, y) {
  return x + y;
}
export const 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));

 {
  "name": "demo",
  "version": "1.0.0",
  "description": "Demo package.json",
  "main": "main.js",
  "dependencies": {
    "mkdirp": "^0.5.1",
    "underscore": "^1.8.3"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sitepoint",
  "license": "ISC"
}

 ├── dist
│   ├── app.js
│   └── index.html
├── node_modules
├── src
│   ├── lib
│   │   ├── login.js
│   │   └── user.js
│   ├── app.js
│   └── index.html
├── gulpfile.js
├── package.json
└── README