Поскольку JavaScript медленно выходит из браузера, появилось несколько инструментов, которые значительно улучшают надежность JavaScript.
Один из таких инструментов называется Underscore.js, и это то, на что мы собираемся взглянуть сегодня. Давайте начнем!
Познакомьтесь с Underscore.js
Так что же конкретно делает Underscore?
Underscore — это библиотека утилитарных поясов для JavaScript, которая обеспечивает большую поддержку функционального программирования, которую вы ожидаете от Prototype.js (или Ruby), но без расширения каких-либо встроенных объектов JavaScript.
Одна из самых приятных вещей в работе на Python или Ruby — это такие необычные конструкции, как map которые значительно облегчают жизнь. К сожалению, текущая версия JavaScript довольно проста, когда дело касается утилит низкого уровня.
Как вы читали выше, Underscore.js — это изящная маленькая библиотека JavaScript, которая вносит смехотворную функциональность всего в 4 КБ.
Подчеркни в действии
«Хватит болтать о библиотеке», я слышу, как вы говорите. Вы правы! Давайте сначала посмотрим на Underscore в действии, прежде чем я продолжу тявкать.
Предположим, у вас есть произвольный массив результатов тестов, и вам нужен список с более чем 90 баллами. Вы обычно пишете что-то вроде этого:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
topScorers = [], scoreLimit = 90;
for (i=0; i<=scores.length; i++)
{
if (scores[i]>scoreLimit)
{
topScorers.push(scores[i]);
}
}
console.log(topScorers);
|
Это довольно просто и даже с оптимизацией, это довольно многословно для того, что мы пытаемся сделать.
Давайте посмотрим, что мы можем достичь с Underscore дальше.
|
1
2
3
4
5
6
|
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42],
topScorers = [], scoreLimit = 90;
topScorers = _.select(scores, function(score){ return score > scoreLimit;});
console.log(topScorers);
|
Я не знаю как вы, но у меня только что появился болван. Это невероятно лаконичный и читаемый код.
Сладкий, но мне это действительно нужно?
Ну, все зависит от того, что ты пытаешься сделать. Если вы используете JavaScript только для того, чтобы поиграть с DOM, то ответ в большинстве случаев — нет, так как jQuery выполняет большую часть того, что вы хотели бы сделать.
Да.
С другой стороны, если вы имеете дело с не-DOM кодом или даже со сложным, подумайте MVC, код переднего плана, Underscore — абсолютное благо.
Хотя некоторые функции, предоставляемые библиотекой, постепенно переходят в спецификации ECMA, она доступна не во всех браузерах, и заставить ваш код работать в разных браузерах — это еще один кошмар сам по себе. Подчеркивание предоставляет вам хороший набор абстракций, которые работают везде.
И если вы ориентированы на производительность, как и должно быть, Underscore прибегает к собственным реализациям, если таковые имеются, чтобы обеспечить максимальную производительность.
Начиная
Просто возьмите источник здесь , включите его на своей странице, и все готово.
Если вы ожидаете большой процесс настройки, вы будете сильно разочарованы. Просто возьмите источник здесь , включите его на своей странице, и все готово.
Underscore создает и предоставляет всю свою функциональность через один объект в глобальной области видимости. Этот объект является символом подчеркивания, _.
Если вам интересно, да, это очень похоже на то, как jQuery работает с символом доллара [$]. Как и в случае с jQuery, вы можете переназначить этот символ в случае возникновения конфликтов. Или, если вы похожи на меня и имеете иррациональную любовь к тильде.
Функциональный или объектно-ориентированный?
Хотя в официальном рекламном сообщении для библиотеки говорится, что она добавляет поддержку функционального программирования, на самом деле существует другой способ сделать что-то.
Давайте возьмем наш предыдущий код в качестве примера:
|
1
2
3
4
5
|
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;
topScorers = _.select(scores, function(score){ return score > scoreLimit;});
console.log(topScorers);
|
Этот метод, описанный выше, является функциональным или процедурным подходом. Вы также можете использовать более простой, возможно, более очевидный, объектно-ориентированный подход.
|
1
2
3
4
5
|
var scores = [84, 99, 91, 65, 87, 55, 72, 68, 95, 42], topScorers = [], scoreLimit = 90;
topScorers = _(scores).select(function(score){ return score > scoreLimit;});
console.log(topScorers);
|
Нет реального «правильного» способа сделать что-то, но имейте в виду, что вы можете связать метод jQuery-esque с последним методом.
Проверка функциональности
Подчеркивание обеспечивает чуть более 60 функций, которые охватывают ряд функций. По своей сути их можно разделить на группы функций, которые работают на:
- Коллекции
- Массивы
- Объекты
- функции
- коммунальные услуги
Давайте посмотрим, что делает каждый из них, и, если применимо, один или два моих фаворита из каждого раздела
Коллекции
Коллекция может быть либо массивом, либо объектом, ассоциированным массивом в JavaScript, если я хочу быть семантически верным.
Underscore предоставляет множество методов, которые работают с коллекциями. Мы видели select метод ранее. Вот еще несколько невероятно полезных.
срывать
Допустим, у вас есть симпатичный небольшой массив, содержащий пары ключ-значение, и вы хотите извлечь из каждой из них только определенное свойство. С Underscore это просто.
|
1
2
3
4
5
6
|
var Tuts = [{name : ‘NetTuts’, niche : ‘Web Development’}, {name : ‘WPTuts’, niche : ‘WordPress’}, {name : ‘PSDTuts’, niche : ‘PhotoShop’}, {name : ‘AeTuts’, niche : ‘After Effects’}];
var niches = _.pluck(Tuts, ‘niche’);
console.log(niches);
// [«Web Development», «WordPress», «PhotoShop», «After Effects»]
|
Использование pluck так же просто, как передача целевого объекта или массива, а также выбор свойства. Здесь я просто извлекаю нишу для каждого сайта.
карта
Карта создает массив из коллекции, где каждый элемент может быть видоизменен или иным образом изменен с помощью функции.
Давайте возьмем предыдущий пример и немного расширим его.
|
1
2
3
4
5
6
7
|
var Tuts = [{name : ‘NetTuts’, niche : ‘Web Development’}, {name : ‘WPTuts’, niche : ‘WordPress’}, {name : ‘PSDTuts’, niche : ‘PhotoShop’}, {name : ‘AeTuts’, niche : ‘After Effects’}];
var names = _(Tuts).pluck(‘name’).map(function (value){return value + ‘+’});
console.log(names);
// [«NetTuts+», «WPTuts+», «PSDTuts+», «AeTuts+»]
|
Поскольку я заметил, что в именах отсутствует знак плюс, я добавляю их в извлеченный массив.
Вы не ограничены простой конкатенацией здесь. Вы можете изменить переданное значение в соответствии с желаниями вашего сердца.
Все
all полезно, если вам нужно проверить, что каждое значение в коллекции соответствует определенным критериям. Чтобы проверить, прошел ли студент по каждому предмету, например.
|
1
2
3
4
5
6
|
var Scores = [95, 82, 98, 78, 65];
var hasPassed = _(Scores).all(function (value){return value>50; });
console.log(hasPassed);
// true
|
Массивы
В Underscore есть множество функций, которые работают исключительно с массивами, что весьма приветствуется, поскольку по сравнению с другими языками JavaScript предоставляет очень мало методов, работающих с массивами.
Uniq
Этот метод в основном анализирует массив и удаляет все повторяющиеся элементы, предоставляя вам только уникальные элементы.
|
1
2
3
4
5
|
var uniqTest = _.uniq([1,5,4,4,5,2,1,1,3,2,2,3,4,1]);
console.log(uniqTest);
// [1, 5, 4, 2, 3]
|
Это очень удобно, когда вы анализируете огромные наборы данных и вам нужно отсеять дубликаты. Помните, что учитывается только первый экземпляр элемента, поэтому сохраняется первоначальный порядок.
Ассортимент
Чрезвычайно удобный метод, который позволяет вам создать «диапазон» или список чисел. Давайте посмотрим на супер быстрый пример.
|
1
2
3
4
5
|
var tens = _.range(0, 100, 10);
console.log(tens);
// [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]
|
Параметры метода, в порядке, начальное значение, конечное значение и значение шага. Если вам интересно, использование отрицательного значения шага приводит к уменьшению диапазона.
пересечение
Этот метод сравнивает два массива друг с другом и возвращает список элементов, которые находятся во всех переданных массивах, т.е. пересечение в теории множеств.
Давайте расширим предыдущий пример, чтобы увидеть, как это работает.
|
1
2
3
4
5
6
7
|
var tens = _.range(0, 100, 10), eights = _.range(0, 100, 8), fives = _.range(0, 100, 5);
var common = _.intersection(tens, eights, fives );
console.log(common);
// [0, 40, 80]
|
Легко, правда? Вы просто передаете список массивов для сравнения, а Underscore делает все остальное.
Объекты
В дополнение к довольно ожидаемому
Вот некоторые из моих фаворитов.
Ключи и ценности
Есть массивный объект, где вам нужны только ключи или только значения? С Underscore так чертовски легко.
|
1
2
3
4
5
6
|
var Tuts = { NetTuts : ‘Web Development’, WPTuts : ‘WordPress’, PSDTuts : ‘PhotoShop’, AeTuts : ‘After Effects’};
var keys = _.keys(Tuts), values = _.values(Tuts);
console.log(keys + values);
// NetTuts,WPTuts,PSDTuts,AeTutsWeb Development,WordPress,PhotoShop,After Effects
|
Значения по умолчанию
Этот метод весьма полезен, когда вам нужно создавать объекты с разумными значениями по умолчанию, когда их нельзя использовать при создании.
|
1
2
3
4
5
6
7
8
|
var tuts = { NetTuts : ‘Web Development’};
var defaults = { NetTuts : ‘Web Development’, niche: ‘Education’};
_.defaults(tuts, defaults);
console.log(tuts);
// Object { NetTuts=»Web Development», niche=»Education»}
|
функции
Как бы странно это ни звучало, Underscore имеет функции, которые работают над функциями. Большинство функций, как правило, довольно сложно объяснить здесь, поэтому мы рассмотрим самые простые.
привязывать
this неуловимая часть JavaScript, и многие разработчики действительно запутываются. Этот метод стремится сделать его немного проще для решения.
|
1
2
3
4
5
6
|
var o = { greeting: «Howdy» },
f = function(name) { return this.greeting +» «+ name;
var greet = _.bind(f, o);
greet(«Jess»)
|
Это немного сбивает с толку, так что оставайтесь со мной здесь. Функции связывания в основном позволяют вам сохранять это значение всякий раз, когда и где вызывается функция.
Это особенно полезно, когда вы работаете с обработчиками событий, в которых this происходит.
коммунальные услуги
И чтобы еще больше подсластить сделку, Underscore предоставляет массу полезных функций. Поскольку у нас нет времени, давайте просто посмотрим на бигги.
шаблонирование
Уже существует множество шаблонных решений, но Underscore делает это решение достойным внимания, будучи крошечным по своей реализации и в то же время достаточно мощным.
Давайте посмотрим на быстрый пример.
|
1
2
3
4
5
6
7
|
var data = {site: ‘NetTuts’}, template = ‘Welcome!
var parsedTemplate = _.template(template, data );
console.log(parsedTemplate);
// Welcome!
|
Сначала мы создаем данные для заполнения шаблона, а затем сам шаблон. По умолчанию Underscore использует разделители в стиле ERB, хотя это полностью настраиваемо.
Имея их, мы можем просто вызвать template передавая наш шаблон и данные. Мы сохраняем результат в отдельной строке для последующего обновления содержимого по мере необходимости.
Имейте в виду, что это чрезвычайно простая демонстрация шаблонов Underscore. Вы можете найти любой код JavaScript внутри шаблона, используя разделители. Когда вам нужно перебирать сложные объекты, например, источники JSON, вы можете соединиться с превосходными функциями сбора Underscore для быстрого создания шаблонов.
Все еще не убежден, что вы должны выбрать это
JQuery и Underscore идут рука об руку.
Нет, нет, вы все неправильно поняли! Во всяком случае, jQuery и Underscore хорошо дополняют друг друга и идут рука об руку. В самом деле!
Видите, jQuery делает несколько вещей очень хорошо. DOM манипуляции и анимация являются главными среди них. Это не имеет ничего общего с более высокими или более низкими уровнями. Если фреймворки, такие как Backbone или Knockout, решают проблемы более высокого уровня, Underscore решает все относительно голые проблемы.
Для еще большей перспективы jQuery не имеет смысла вне браузера, так как большая часть его функциональности связана с DOM. Подчеркивание, с другой стороны, может быть использовано в браузере или на стороне сервера без каких-либо проблем. На самом деле Underscore имеет наибольшее количество модулей Node, зависящих от него.
Ну, вот и все на сегодня. Учитывая масштабы Underscore, мы едва поцарапали поверхность здесь. Не забудьте проверить больше библиотеки и дайте мне знать, если у вас есть какие-либо вопросы в комментариях ниже. Большое спасибо за чтение!