[Перевод] Те забавные предложения, которые не были приняты ECMAScript 2017

Оригинальный адрес:Интересные предложения ECMAScript 2017, которые не были приняты

Оригинальный автор:Kaelan Cooter

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:Colafornia

Корректор:jasonxia23 kezhenxu94

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

Поскольку сейчас появляется все больше и больше предложений, может быть очень сложно оставаться в курсе этих предложений по функциям. За последние шесть лет между ES5 и ES6 JavaScript был очень консервативным. С момента выпуска ECMAScript 2016 (ES7) процесс выпуска требует ежегодного выпуска, иболее стандартизированный.

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

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

5 этапов процесса предложения ECMAScript

Этап 0 «Пугало» —— Это отправная точка для всех предложений. Содержание предложения может существенно измениться перед переходом к следующему этапу. В настоящее время нет критериев приемлемости предложений, и каждый может подать новое предложение на этом этапе. Реализация кода не требуется, а спецификация не должна соответствовать стандартам. Цель этого этапа — начать обсуждение функции. В настоящее время естьБолее 20 предложений на этапе 0.

Этап 1 «Предложение» – Настоящее официальное предложение. Предложения на этом этапе требуют"Адвокат"(То есть член комитета TC39). Эта фаза должна быть тщательно рассмотрена API и описывать любой потенциал, проблемы реализации кода. Эта фаза также должна разработать полифилл и производить демонстрацию. После этого этапа предложение может значительно измениться, поэтому будьте осторожны. Предложение, которое все еще на этом этапе, включено в осеннюю воду.Observables typeа такжеPromise.tryФункция.

Этап 2 "Черновик" - На этом этапе будет использоваться формальный язык спецификации TC39 для точного описания грамматики. Незначительные изменения все еще возможны после этой стадии, но спецификация должна быть достаточно полной, чтобы не требовать серьезных изменений. Если предложение зайдет так далеко, вполне вероятно, что комитет в конце концов захочет реализовать эту функцию.

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

Этап 4 "Готово" - означает, что предложение было принято и спецификация предложения будет объединена со спецификацией JavaScript. Дальнейших изменений не ожидается. Движки JavaScript будут публиковать свои реализации. По состоянию на октябрь 2017 года имеется9 готовых предложенийОдин из самых интересныхasync functions.

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

Источник изображенияxkcd.com/927/

Асинхронная итерация

Итератор iterator был представлен в ECMAScript 2015, который содержитfor-ofСинтаксис цикла. Это позволяет довольно легко перебирать итерируемые объекты и реализовывать собственные итерируемые структуры данных.

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

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

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

async function* readLines(path) {
  let file = await fileOpen(path);

  try {
    while (!file.EOF) {
      yield await file.readLine();
    }
  } finally {
    await file.close();
  }
}

Пример функции асинхронного генератора.

Пример

Вы можете использовать этот асинхронный генератор в цикле for-await-of:

for await (const line of readLines(filePath)) {
  console.log(line);
}

Используйте для ожидания.

Любой объект со свойством Symbol.asyncIterator определяется какasync iterableи может использоваться в новом синтаксисе for-await-of. Вот конкретный рабочий пример:

class LineReader() {
 constructor(filepath) {
   this.filepath = filepath;
   this.file = fileOpen(filepath);
 }

 [Symbol.asyncIterator]: {
   next() {
     return new Promise((resolve, reject) => {
       if (this.file.EOF) {
         resolve({ value: null, done: true });
       } else {
         this.file.readLine()
           .then(value => resolve({ value, done: false }))
           .catch(error => reject(error));
       }
     });
   }
 }
}

Пример использования Symbol.asyncIterator.

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

regeneratorВ настоящее время проект имеет базовую поддержку предложения асинхронного итератора. Однако он изначально не поддерживает синтаксис цикла for-await-of. Плагин Бабельtransform-async-generator-functionsПоддерживаются как асинхронные генераторы, так и синтаксис цикла for-await-of.

Оптимизация класса

это предложениеПредлагается добавить общедоступные поля, частные поля и частные методы в [синтаксис класса, введенный в ECMAScript 2015](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes). Это предложение является результатом длительного обсуждения и конкуренции нескольких конкурирующих предложений.

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

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

class Counter {
  // 公共字段
  text = ‘Counter’;

  // 私有字段
  #state = {
    count: 0,
  };

  // 私有方法
  #handleClick() {
    this.#state.count++;
  }

  // 公共方法
  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>
        {this.text}: {this.#state.count.toString()}
      </button>
    );
  }
}

React-подобные компоненты с приватными полями и приватными методами.

В настоящее время Babel не предоставляет полифиллы для полей и методов частного класса.Но это скоро придет.公共字段已有 Babel 的transform-class-propertiesПоддержка плагинов, но она основана на более старом предложении, которое было объединено в предложение унифицированных общедоступных/частных полей. Это предложение1 сентября 2017 г.Переходим к этапу 3, поэтому можно безопасно использовать любой доступный полифилл.

Декоратор класса

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

новое предложениеОчень разные. Вместо функции с тремя свойствами мы теперь формально описываем член класса, меняющий дескриптор — декоратор. Новый «дескриптор члена» очень похож на интерфейс дескриптора свойства, представленный в ES5.

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

Декоратор члена получает дескриптор члена и возвращает дескриптор члена.
Декоратор класса принимает массив конструкторов, родительских классов и дескрипторов членов для каждого члена класса (то есть каждого свойства или метода).

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

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

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

Многие авторы библиотек предпочитают продолжать поддерживать старое предложение и подключаемый модуль Babel legacy-decorators, несмотря на то, что новое предложение уже находится на этапе 2, а старое все еще находится на этапе 0.core-decoratorsЭтот подход используется в самой популярной библиотеке JavaScript с открытым исходным кодом, использующей декораторы. Есть хороший шанс, что авторы библиотек будут продолжать поддерживать старые предложения в течение многих лет.

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

функция импорта

Добавлено в 6-м издании ECMAScript.заявление об импорте, и доработали семантику новой модульной системы. Недавно,Основные браузеры выпускают обновления, чтобы обеспечить их поддержку, хотя это несколько разные реализации спецификации. NodeJS обеспечивает предварительную поддержку спецификации модуля ECMAScript, все еще с экспериментальным флагом, в версии 8.5.0.

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

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

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

Observables

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

Объекты Observable создаются конструктором Observable и получают в качестве параметра функцию подписки:

function listen(element, eventName) {
 return new Observable(observer => {
   // 创建一个事件处理函数，可以将数据输出
   let handler = event => observer.next(event);

   // 绑定事件处理函数
   element.addEventListener(eventName, handler, true);

   // 返回一个函数，调用它即去掉订阅
   return () => {
     // 解除元素的事件监听
     element.removeEventListener(eventName, handler, true);
   };
 });
}

Использование конструктора Observable.

Используйте функцию подписки, чтобы подписаться на наблюдаемый объект:

const subscription = listen(inputElement, “keydown”).subscribe({
  next(val) { console.log("Got key: " + val) },
  error(err) { console.log("Got an error: " + err) },
  complete() { console.log("Stream complete!") },
});

Используйте наблюдаемые объекты.

Функция subscribe() возвращает объект подписки. Этот объект имеет метод отмены подписки.

Наблюдаемое не следует путать сУстаревший Object.observeФункция Object.observe — это способ наблюдения за изменениями объекта. Он был реализован в ECMAScript 2015 для более общего назначения.Proxyзаменены.

В настоящее время Observable находится на этапе 1, но комитет TC39 пометил его как «готовый к продвижению» и получил сильную поддержку со стороны поставщиков браузеров, поэтому ожидается, что он скоро перейдет к следующему этапу. Теперь вы можете начать использовать предложенные функции, сТри реализации полифилладоступный.

сделать выражение

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

Выражение do предлагает новый синтаксис для объединения нескольких операторов в одно выражение. Код можно записать следующим образом:

let activeToDos = do {
  let result;
  try {
    result = fetch('/todos');
  } catch (error) {
    result = []
  }
  result.filter(item => item.active);
}

Примеры выражений do.

Последний оператор выражения do будет неявно возвращен как значение завершения.

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

const FooComponent = ({ kind }) => (
 <div>
   {do {
     if (kind === 'bar') { <BarComponent /> }
     else if (kind === 'baz') { <BazComponent /> }
     else { <OtherComponent /> }
   }}
 </div>
)

Будущее JSX?

Вавилон имеетплагинТранспилируемые выражения do. Это предложение в настоящее время находится на этапе 1, и все еще есть несколько важных открытых вопросов о том, как использовать его с генераторами и асинхронными функциями, поэтому спецификация может значительно измениться.

Необязательная цепочка свойств, допускающих значение NULL

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

Пример:

a?.b // 如果 `a` 是 null/undefined 则返回  undefined，否则则返回 `a.b` 的值
a == null ? undefined : a.b // 使用三元表达式

В настоящее время предложение находится на стадии 1 и получило названиеbabel-plugin-transform-optional-chainingРеализация плагина Babel. Комитет TC39 находится вПоследняя встреча в октябре 2017 г.Есть опасения по поводу его синтаксиса, но он все еще может быть принят.

глобальная нормализация объектов

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

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

и больше

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

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

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

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

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

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

Interlude: LogRocket, DVR для веб-приложений

LogRocket— это интерфейсный инструмент ведения журнала, который позволяет воспроизводить проблемы, как если бы они были в вашем собственном браузере. Больше не нужно гадать, почему произошли ошибки, или запрашивать у пользователей скриншоты и дампы журналов, LogRocket позволяет воспроизводить сеансы, чтобы быстро найти источник ошибок. LogRocket можно использовать в любом приложении, независимо от используемой платформы, и он имеет плагины для регистрации контекста из Redux, Vuex и @ngrx/store.

Помимо регистрации действий и состояния Redux, LogRocket также может регистрировать журналы консоли, ошибки JavaScript, информацию о стеке вызовов, сетевые запросы, заголовки ответов и информацию об объектах, метаинформацию браузера и пользовательские журналы. Он также использует DOM для записи HTML и CSS на странице, позволяя даже самым сложным одностраничным приложениям перерисовывать видео с точностью до пикселя.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.