Блог Мазепина Василия

Пишу о том, что кажется интересным

Здравствуй, Underscore.js !

2016-03-19 18:33 | Комментарии

Доброго времени суток, коллеги и гости. На днях я решился изучить полезную библиотеку, и хочу поделиться с вами своими впечатлениями…

Как всем нам известно, хлеб программиста - это его знания и опыт работы.
А знания, бесспорно, надо приумножать.Чем я и решил заняться на ближайших выходных.
А изучить я решил такую javascript - библиотеку, как underscorejs.

Почему именно эта библиотека?

В свое время, в далеком 2012-13 годах на своей первой работе я имел дело с underscore, однако ввиду малой опытности не придал этой библиотеке должного внимания.
Сейчас же, после ухода с предыдущего места работы, я стал много работать с чужим кодом, другими проектами, где оказываю как програмистские, так и консультативные услуги.
И в большинстве проектов, как я заметил, используются многие библиотеки. В том числе и “черточка”. Поэтому, решил я восполнить этот пробел в знаниях, и, тем самым повысить свой Level.
Вооружившись ноутбуком, официальной документацией, и несколькими часами свободного времени, стал я изучать…

Немного воды…

Известно, что javascript является тем еще языком в плане работы с коллекциями, обьектами.
Работать то конечно можно, но иногда какие-то легкие операции (будь то обработка массива callback'ом, либо чистка множества от мусора, либо работа с событиями) превращается в рутину, хочется чего то удобного, понятного и легкого в использовании.
Так вот, Underscore.js - это и есть та самая библиотека, которая создана для того, чтобы сделать жизнь программиста легче.
По сути, она предоставляет более 60 функций, которые нам и помогут. Приведу некоторые примеры из официальной документации, которые мне особенно понравились.

А вот и примеры!

Работа с коллекциями

Работа с коллекциями
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

_.map([1, 2, 3], function(num){ return num * 3; });
// вернёт [3,6,9]

_.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
// вернёт [2,4,6]

_.where(listOfPlays, {author: "Shakespeare", year: 1611});

// вернёт
[
    {title: "Cymbeline", author: "Shakespeare", year: 1611},
    {title: "The Tempest", author: "Shakespeare", year: 1611}
]

_.every([true, 1, null, 'yes'], _.identity);
// вернёт false

var odds = _.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
// вернёт [1, 3, 5]

Работа с функциями

Работа с функциями
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

_.first([5, 4, 3, 2, 1]);
// вернёт 5

_.last([5, 4, 3, 2, 1]);
// вернёт 1

_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);
// вернёт [1, 2, 3, 101, 10]

_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]);
// вернёт [1, 2]

_.object(['moe', 'larry', 'curly'], [30, 40, 50]);
// вернёт {moe: 30, larry: 40, curly: 50}

_.range(1, 11);
// вернёт [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

var initialize = _.once(createApplication);
initialize();
initialize();
// код будет выполнен единожды

Работа с объектами

Работа с объектами
1
2
3
4
5
6
7
8
9
10
11
12
13
14

var iceCream = {flavor : "chocolate"};
_.defaults(iceCream, {flavor : "vanilla", sprinkles : "lots"});
// вернёт {flavor : "chocolate", sprinkles : "lots"}

_.has({a: 1, b: 2, c: 3}, "b");
// true


var moe   = {name : 'moe', luckyNumbers : [13, 27, 34]};
var clone = {name : 'moe', luckyNumbers : [13, 27, 34]};
moe == clone;
// false
_.isEqual(moe, clone);
// true

Функции-утилиты

Функции-утилиты
1
2
3
4
5
6
7
8
9
10

_.noConflict(); // Отвяжет переменную "_" от объекта Underscore. Вернёт ссылку на объект Underscore. 
_.times(3, function(){ renderView(); }); // Вызовет iterator 3 раза
_.random(14, 100);
// любое число в заданном диапазоне

_.escape('Curly, Larry & Moe'); //Экранирование ! Обратное действие - unescape
// "Curly, Larry & Moe"

_.now();
// вернёт текущую метку времени

Интересные особенности

Интересные особенности
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Следующие две строчки делают абсолютно одинаковые вещи! Круто? хз...
_.map([1, 2, 3], function(n){ return n * 2; });
_([1, 2, 3]).map(function(n){ return n * 2; });

 /** Вызвав chain на объекте, 
  * с которым собираетесь работать, вы получите эффект, 
  * при котором каждый последующий метод в цепочке будет вызван на объекте, 
  * возвращённом предыдущим методом. 
  * Чтобы получить результат отработавших методов, нужно вызвать value.
  */
var stooges = [{name : 'curly', age : 25}, {name : 'moe', age : 21}, {name : 'larry', age : 23}];

var youngest = _.chain(stooges)
    .sortBy(function(stooge){ return stooge.age; })
    .map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
    .first()
    .value();
// youngest будет установлена в "moe is 21"

_([1, 2, 3]).value();
// вернёт [1, 2, 3]

Что в итоге?

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

P.S., господа!

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

Комментарии