Краткая история Javascript

JavaScript был разработан Бренданом Эйхом. Его попросили создать новый язык для Netscape Communications Corporation, который работал бы в их браузерах и напоминал бы Java по синтаксису, чтобы их разработчики могли изучить его с минимальными усилиями. Он был запущен под названием JavaScript где-то в сентябре 1995 года, и, оглядываясь назад, некоторые даже называют это маркетинговым ходом.

Необходимость стандартов в JavaScript:

Microsoft надеялась захватить рынок браузеров с помощью Internet Explorer, опровергнув всех конкурентов и внедрив собственную версию JavaScript.

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

Родился ECMAScript:

В 1997 вышли ECMAScript или ES 1, и было решено, что JavaScript будет языком, реализующим ECMAScript. ES 2 вышел в 1998 году, ES 3 в 1999 году, ES 5 в 2009 году и ES 6 или официально названный ES 2015 в 2015 году. С 2015 года было решено, что новый стандарт ECMAScript будет выпускаться каждый год, и если функция не будет реализована к тому времени, она просто не будет включена в этот выпуск.

Жизненный цикл выпуска ECMAScript:

ECMA следует процессу TC39, в котором есть 5 основных процессов:

  1. Strawman или Стадия 0: здесь предложение не является официальным, а предложения или идеи вносятся членом TC39 или участником для проведения мозгового штурма.
  2. Предложение или этап 1: здесь предложение становится формальным, а функция начинает включаться в выпуск. «Чемпион» отвечает за предложение. Коммит TC39 активно участвует в обсуждении конфликтов и предлагает улучшения функции.
  3. Черновик или этап 2: если предложение зашло так далеко, оно, скорее всего, станет частью стандарта позже, и это может быть не этот самый выпуск, а следующий, если он не будет соответствовать текущему цикл. Необходимо реализовать два экспериментальных примера, и его постепенные изменения отмечаются на основе отзывов участников.
  4. Кандидат или этап 3. На этом этапе учитывается обратная связь с внешним миром. Назначенные рецензенты подписывают предложение. На данном этапе изменения в предложение вносятся только в случае возникновения критических вопросов.
  5. Завершено или этап 4: функция будет включена в следующий выпуск, и на этом этапе проводятся тщательные модульные тесты.

Вы можете просмотреть все предложения и их состояние в этом репозитории github ECMA.

ES 2017:

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

  1. async и await: Если у вас есть хоть какой-то опыт работы с миром .NET, как у меня, вам это будет очень знакомо. Хотя могут быть некоторые вариации, это намного легче понять, если у вас уже есть некоторый опыт работы с C #. Не поймите меня неправильно, это не означает, что люди без опыта работы с C # этого не поймут, просто люди с опытом работы с C # будут чувствовать себя намного ближе к дому, чем другие.

Вплоть до ES 2016 именно так мы выполняли асинхронный вызов с помощью обещаний.

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

Если я сделаю ту же реализацию с использованием нового ключевого слова async и await в ES 2017, это будет выглядеть примерно так.

Вы можете увидеть настоящее перо здесь

Вот как вы можете выполнить асинхронный вызов без необходимости загружать какие-либо внешние библиотеки, сделав запрос xhr 'GET' к github api .

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

В моем случае это файл «asynchrony.js».

Просто прогуливаясь по коду, мы только что создали функцию под названием 'asyncFn', которая просто делает запрос GET к пользовательскому ресурсу github api для получения моих данных, и ответ возвращается внутри ' getMe 'как объект json, который записывается в консоль.

Теперь, если мы удалим ключевое слово await в строке 30, 'asyncFn' просто вернет обещание, для которого обработчик разрешения и отклонения могут быть присоединены с помощью обработчиков then и catch соответственно, поэтому ваша функция getMe становится примерно такой

Таким образом, использование await разрешает ваши обещания соответствующему объекту ответа, который может быть правильным ответом при разрешении и ошибочным ответом при отклонении "asyncFn".

На заметку:

a) Вы не можете использовать ожидание внутри функции, если эта функция не отмечена ключевым словом async.

б) Если вы используете средство запуска кода Visual Studio, вам необходимо установить babel или другой подходящий инструмент, который будет транспилировать и добавлять соответствующие полифиллы. к коду, чтобы ваш код мог работать с пусковой установкой. В противном случае вам нужно будет выполнить код ES 2017 в современном браузере, большинство современных браузеров могут выполнять код JavaScript ES 2017.

2. Веб-воркеры: Это довольно интересная концепция. Я хотел бы пояснить это аналогией. Когда я учился в колледже, я изучал физику в первом семестре, а профессор был экспертом в атомной физике, но не так много специалист по ядерной физике. Поэтому он попросил одного из своих студентов, который специализировался на ядерной физике, прикрыть его. Другими словами, основной поток (профессор) назначил рабочий поток (его ученика) для выполнения работы за него, в то время как основной поток (профессор) ужасно подготовил для нас тест (чистый зло), ожидая, пока его ученик (рабочий поток) закончит свою работу.

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

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

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

Разместите свое приложение на любом веб-сервере. Вы можете создать http-сервер в узле с помощью Express или с помощью модуля узла http. Поскольку изучение того, как создать http-сервер в узле, не является нашей целью, вы можете оставить эту задачу модулю узла http-server. Просто установите его глобально с помощью npm install http-server -g и просто запустите свой сервер, выполнив команду http-server. Полная файловая система будет размещена на http: // localhost: 8080 (порт по умолчанию). Если вы не хотите создавать приложение, клонируйте мой репозиторий git https://gitlab.com/saurabhpati/es2017.git и один раз у вас установлен модуль узла http-server, просто выполните команду 'http-server'.

Теперь создайте два файла javascript: один будет действовать как основной рабочий поток, а другой - как рабочий поток Интернета. Я собираюсь сделать его предельно минималистичным и максимально простым.

Я предоставил снимок своего файла html со ссылкой на два сценария и то, как я запускал сервер и размещал этот html на сервере.

Теперь все, что нам нужно сделать, это написать код для myWorker.js и mainWorker.js.

mainWorker.js:

Этот код просто создает веб-воркера, отправляет некоторые данные в рабочий поток, а обработчик onmessage - это обратный вызов, который выполняется, когда исполнитель завершает работу с его работа.

myWorker.js:

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

3. Object.entries:

Object.keys,, представленный в ES 5, получает массив ключей объекта, Object.values ​​, , представленный в ECMA 2015, получает массив значений объекта . ES 2017 представила функцию Object.entries, которая возвращает массив массивов, содержащих как ключи, так и значения, примерно так.

4. Object.getOwnPropertyDescriptor / Object.getOwnPropertyDescriptors

Теперь мы можем использовать метод getOwnPropertyDescriptors для получения дескриптора объекта.

Вы также можете использовать Object.getOwnPropertyDescriptor (person, «возраст»), чтобы получить только дескриптор возраста.

5. padStart и padEnd:

Мое имя «Саураб Пати» состоит из 12 символов, поэтому, если требуется начало и конец заполнения, мы можем легко сделать это с помощью ES 2017, поскольку начальное заполнение выполняется символами # * в приведенном ниже коде. , пока не будет достигнута общая длина 16 символов. Функция padEnd работает аналогично и добавляет ‘% $’ в конец строки, пока общая длина не будет равна 16. Если вы используете заполнение из 12 символов, которое имеет ту же длину, что и мое имя, заполнение не применяется. Я привел снимки использования и результатов этих методов.

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