Доброго времени суток дорогой хабраюзер. Я очень люблю все новое и красивое и поэтому очень часто посматриваю за развитием 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.
Первое, на что я обратил свое внимание это на короткую запись функции. Найдя в просторах интернета, довольно подробно описанное использования, я решил проверить это. И о чудо, изумлению не было предела. Есть несколько вариантов записи, я приведу все.
Четвертый вариант знаком многим разработчикам работающим с C#, Scala, Typescript. Это есть не что иное как лямбда оператор.
Пятый вариант интересен собой, тем, что это еще и деструктивная операция. Давай-те проверим все эти типы записей. Для этого нам надо создать файл, пусть он будет иметь название ecma6-test-features.js и записать в него функции описанные выше. Допишем к каждой функции console.log, и посмотрим результат запуском команды slimerjs ecma6-test-features.js. Поначалу нам откроется окошко, ясное дело, что оно нам будет мешать, но у него есть ряд назначений, о которых можно почитать в документации slimerjs. Для того чтобы избавится от нежелательного открытия окна, в конце нашего файла скрипта нужно дописать такой код slimer.exit(). Теперь мы имеем консоль похожую на nodejs, в которой мы можем выполнять свой код. Запустив наш скрипт, мы получим результат от всех выше написанных функций. Такая запись функций меня очень порадовала.
Что же на очереди еще одна возможность в ecma6 — это list comprehensions. Что такое list comprehensions известно многим, тем кому нет, я вкратце объясню. Это такая синтаксическая конструкция, которая служит для создания списков применением операций над существующими списками. Что же рассмотрим пример, чтобы понять как это.
Итак, что же тут происходит? Первым выражением есть функция, которая применяется к каждому элементу массива, эквивалент которой является map. Вторая запись является итератором, для прохода по элементам массива. Третья часть, которая содержит if — является эквивалентом filter. С учетом того, что было сказано, плюс возможность короткой записи функции, запишем этот кусок кода в более привычном виде.
Многим эта запись знакома. Да-да вы не ошиблись так можно писать в C#, Typescript И в других современных языках. Красиво не так-ли?
На этом, пока все, далее я хотел рассказать и показать (потом выложить исходники всех тестов) остальные возможности работы с ecma6 уже сейчас.
Это моя первая статья. У меня было много идей, что написать, но я решил начать с этого
Буду рад услышать замечания и пожелание, для дальнейшего совершенствования себя как писателя статей.
С уважением ко всем. До новых встреч.
В помощь можно взять 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 уже сейчас.
Это моя первая статья. У меня было много идей, что написать, но я решил начать с этого
Буду рад услышать замечания и пожелание, для дальнейшего совершенствования себя как писателя статей.
С уважением ко всем. До новых встреч.
