Как стать автором
Обновить

Как захватить мир, или javascript next уже сейчас (часть первая)

Время на прочтение3 мин
Количество просмотров13K
Доброго времени суток дорогой хабраюзер. Я очень люблю все новое и красивое и поэтому очень часто посматриваю за развитием ecma 6 aka Harmony. Да-да, вы не ошиблись, речь пойдет именно о новом javascript, хотя он еще в разработке, но многие фичи уже сейчас можно начать тестировать, так сказать, просто для своего удовольствия.

В помощь можно взять Firefox последней версии, но я нашел более другой способ для себя. Далее речь пойдет о новых возможностях javascript, что нас ждет и о slimerjs.

Итак, что же такое slimerjs? Наверное стоит познакомиться с ним ближе, если мы хотим с ним работать. По сути slimerjs есть ни что иное что и phantomjs. Это скриптовый браузер для разработчика имеющий в своем арсенале движок эквивалентный последнему Firefox. Это означает, что мы имеем полную возможность использовать его, как REPL.

Но оставим теорию на будущее и рассмотрим как же работать со slimerjs. Так как я любитель Windows, и часто сталкиваюсь с трудностью настроек, но я не унываю. Все свои действия я буду описывать для Windows, по сути особого труда настроить под другую OS нет. И так поехали.

Первым делом мы скачиваем slimerjs, распаковываем в папку, и прописываем системные переменные. В моем случае это была папка C:/Tools/slimerjs, добавляем это в переменную path. Также нам нужно установить переменную для Firefox, так как slimerjs требует Firefox, для запуска. Переменную SLIMERJSLAUNCHER в моем случае я установил так: C:\Program Files (x86)\Mozilla Firefox\firefox.exe. Что же, на этом наши магические манипуляции заканчиваются. Приступим к написанию кода, для проверки фич ecma 6.

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

1) var square = function(x) { return x * x; }

2) var square2 = function(x) x * x;

3) var square3 = x => { return x * x };

4) var square4 = x => x * x;

5) var squareAndCube = x => [x * x, x * x * x];

Четвертый вариант знаком многим разработчикам работающим с C#, Scala, Typescript. Это есть не что иное как лямбда оператор.
Пятый вариант интересен собой, тем, что это еще и деструктивная операция. Давай-те проверим все эти типы записей. Для этого нам надо создать файл, пусть он будет иметь название ecma6-test-features.js и записать в него функции описанные выше. Допишем к каждой функции console.log, и посмотрим результат запуском команды slimerjs ecma6-test-features.js. Поначалу нам откроется окошко, ясное дело, что оно нам будет мешать, но у него есть ряд назначений, о которых можно почитать в документации slimerjs. Для того чтобы избавится от нежелательного открытия окна, в конце нашего файла скрипта нужно дописать такой код slimer.exit(). Теперь мы имеем консоль похожую на nodejs, в которой мы можем выполнять свой код. Запустив наш скрипт, мы получим результат от всех выше написанных функций. Такая запись функций меня очень порадовала.
Что же на очереди еще одна возможность в ecma6 — это list comprehensions. Что такое list comprehensions известно многим, тем кому нет, я вкратце объясню. Это такая синтаксическая конструкция, которая служит для создания списков применением операций над существующими списками. Что же рассмотрим пример, чтобы понять как это.

var list = [1,2,3,4,5];
var newList = [x * x for(x of list) if(x % 2 === 0)];

Итак, что же тут происходит? Первым выражением есть функция, которая применяется к каждому элементу массива, эквивалент которой является map. Вторая запись является итератором, для прохода по элементам массива. Третья часть, которая содержит if — является эквивалентом filter. С учетом того, что было сказано, плюс возможность короткой записи функции, запишем этот кусок кода в более привычном виде.

var list = [1,2,3,4,5];
var newList = list.filter(x => x % 2 === 0).map(n => n * n);

Многим эта запись знакома. Да-да вы не ошиблись так можно писать в C#, Typescript И в других современных языках. Красиво не так-ли?

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

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

С уважением ко всем. До новых встреч.
Теги:
Хабы:
Всего голосов 26: ↑16 и ↓10+6
Комментарии14

Публикации

Истории

Работа

Ближайшие события