underscore js

33
Носова О.А. гр.4381

Upload: olya-nosova

Post on 23-Jan-2018

114 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Underscore js

Носова О.А. гр.4381

Page 2: Underscore js

Что такое Underscore

Имя библиотеки

Общие сведения

Подключение

Функциональность

Underscore в действии

Нужно ли это на самом деле

Аналоги в JavaScript и др. языках

Page 3: Underscore js

Это библиотека JavaScript, реализующая дополнительную функциональность для работы с массивами, объектами и функциями, изначально отсутствующие в JavaScript, но имеющую аналоги в других языках. Библиотека Underscore сможет облегчить вам процесс разработки, не изменяя встроенных объектов.

Page 4: Underscore js

Дело все в том, что как в JQuery все начинается со знака "$", так и тут все начинается со знака "_", а Underscore с английского как раз таки и переводится как нижнее подчеркивание.

Page 5: Underscore js

На данный момент Underscoreпредоставляет более 80 функций.

Среди них есть, те, которые решают более тривиальные задачи: map, select, invoke; но так же и более специфические: биндинг, javascript шаблоны и т.д.

Сама библиотека функционально основана на нативных JavaScript методах, таких как forEach, map, reduce, filter, every, indexOf, что делает её значительно быстрой.

Page 6: Underscore js

в отличие от Prototype.js, Underscore не модифицирует прототипы встроенных объектов JavaScript. Данная особенность гарантирует бесконфликтность, что позволяет замечательно сочетать этот инструмент с, например, JQuery илиBlackbone, или и тем и другим вместе.

Библиотека умеет делегировать вызовы, если какая-то функциональность реализована разработчиками браузеров.

Page 7: Underscore js

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

Найти библиотеку вы можете на сайте разработчика underscorejs.org. Заметьте, что там же вы можете найти документацию, однако она будет на английском. Если вы хотите прочитать документацию на русском языке, то можете перейти на сайт underscorejs.ru.

Page 8: Underscore js

Подключить Underscore не сложнее любой другой JavaScript-овой библиотеки.

Теперь все доступные методы можем вызывать от объекта “_” (подчёркивание).

Page 9: Underscore js

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

Коллекции

Массивы

Объекты

Функции

Утилиты

Цепные вызовы

Page 10: Underscore js

Коллекцией может быть либо массив или объект, ассоциированный массив в JavaScript, если он семантически правильный.

Underscore предоставляет много методов которые работают на коллекциях.. Вот еще несколько полезныхиз них:

Page 11: Underscore js

Pluck

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

Page 12: Underscore js

map

Cоздает массив из коллекции, где каждый элемент может быть тем или иным образом изменен с помощью функции

Page 13: Underscore js

All

All полезна, если вам нужно проверить каждое значение в коллекции на соответствию критерию. Для того, чтобы проверить, пройден ли тест студентом по каждому предмету, например

Page 14: Underscore js

Underscore имеет кучу функций, которые работают исключительно на массивах, которые в высшей степени приветствуется, поскольку, по сравнению с другими языками, JavaScript предоставляет несколько методов, касающихся массивов

Page 15: Underscore js

Uniq

Этот метод в основном разбирает массив и удаляет все повторяющиеся элементы, предоставляя вам только уникальные элементы.

Page 16: Underscore js

Range

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

Page 17: Underscore js

Intersection

Этот метод сравнивает два массива с каждым другим и возвращает список элементов, которые находятся во всех передаваемых массивов, т.е. пересечение в теории множеств.

Давайте расширим предыдущий пример, чтобы увидеть, как это работает

Page 18: Underscore js

Intersection

Легко, не так ли? Вы просто передать в список массивов для сравнения и Underscore делает все остальное

Page 19: Underscore js

В дополнение к довольно ожидаемым проверкам, Underscore предоставляет различные методы для клонирования, расширения и другие манипулировать объектами.

Page 20: Underscore js

Keys and Values

Есть массивный объект, где вам нужно только ключи или только значения? Это легко с underscore.

Page 21: Underscore js

Defaults

Этот метод весьма полезен, когда вам нужно создавать объекты с приемлемыми значениями по умолчанию, когда не могут быть использованы при его создании

Page 22: Underscore js

Underscore имеет функции, которые работают на функциях. Большинство функций, как правило, довольно сложно объяснить здесь, так что мы посмотрим на самый простой.

Page 23: Underscore js

BindСвязывает функцию с объектом. Это значит, что каждый раз когда она будет вызвана this будет указывать на данный объект.

Это особенно полезно , когда вы работаете с обработчиком событий , где this переопределен.

Page 24: Underscore js

Underscore предоставляет массу полезных функций.

Templating

Компилирует JavaScript-шаблоны в функции, которые могут быть вызваны для рендеринга этого шаблона. Полезно при рендеринге объёмных и сложных частей HTML-разметки из данных JSON. Полученные функции во время обработки данных могут интерполировать переменные, для чего используется следующий синтаксис внутри шаблона: <%= … %>, а также производить вычисления <% … %>.

Page 25: Underscore js
Page 26: Underscore js

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

Вызвав chain на объекте, с которым собираетесь работать, вы получите эффект, при котором каждый последующий метод в цепочке будет вызван на объекте, возвращённом предыдущим методом. Чтобы получить результат отработавших методов, нужно вызвать value.

Page 27: Underscore js
Page 28: Underscore js

Давайте предположим, что у вас есть случайный набор тестов и вам нужен список тех, у кого 90+ балла. Вы бы обычно пишут что-то вроде этого:

Page 29: Underscore js

Вы можете подумать, зачем же использовать эту библиотеку, когда есть JQuery? Не стоит их путать. Все дело в том, что в JQuery существует много функций, которые позволяют не беспокоиться, к примеру, с анимациями, а просто вызвать уже готовую. То же самое с Ajax и т.д. Однако эта библиотека не облегчает нам процесс написания кода. Underscore же создана как раз для этого. Давайте рассмотрим некоторые ее возможности на примере.

Page 30: Underscore js

Давайте посмотрим на то, что мы можем достичь c Underscore в следующем:

Код стал короче и более читабельным

Page 31: Underscore js

Все зависит от того, что вы пытаетесь сделать. Если использование JavaScriptограничивается игрой вокруг DOM, то ответ почти нет, так как JQuery делает большинство из того, что вы хотите сделать.

Page 32: Underscore js

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

Underscore предоставляет вам хороший набор абстракций.

Underscore возвращается в исходные реализации, если таковые имеются, чтобы убедиться, что производительность, как оптимальным, насколько это возможно.

Page 33: Underscore js

JavaScript – Array,Function,UnderScore,Lo-Dash Python - itertools, functools,funcy,toolz.fn.py Ruby – Enumerable, ActiveSupport PHP – functional-php, Inderscore.php Clojure – clojure.core Java – FunctionalJava, lambdaj C# - LINQ Objective-C – Underscore.m

встроенные внешние