LoDash - пять методов

Reading time ~8 minutes

Библиотека LoDash - это развитие и продолжение библиотеки Underscore.js. Если выбирать, какой библиотекой пользоваться, то выбор будет однозначно за LoDash. Достаточно сравнить колличество методов Underscore.js vs LoDash - LoDash Documentation.

Еще один большой плюс LoDash - это ее модульность. Каждый ее метод доступен в виде отдельного модуля \ модулей, который \ которые можно подключить и использовать; а не “тянуть” всю библиотеку (хотя она и небольшая - 4\22 kB).

Например, подключить только методы для работы с массивами:

var array = require('lodash/array');

Или же подключить только один метод

1
chunk
, чтобы уменьшить итоговую сборку:

var chunk = require('lodash/chunk');

Или вот так - нам нужны только два модуля

1
random
и
1
foreach
для генерации случайный фоновых заливок у коллекции блоков.

Тогда можно поступить так - устанавливаем всего два модуля вместо всей библиотеки lodash:

$ npm i --save lodash.random
$ npm i --save lodash.foreach

… и используем их, ибо только они нам нужны сейчас:

var random = require('lodash.random');
var forEach = require('lodash.foreach');

var items = document.querySelectorAll('.gallery__item');
forEach( items, function (el) {
    el.style.backgroundColor = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
});

В этой статье я познакомлюсь с пятью методами LoDash, которые я отложил “на потом” при знакомстве с Underscore.js. Это методы для работы с функциями -

1
.delay()
,
1
.once()
,
1
.after()
,
1
.before()
,
1
.debounce()
.

lodash - .delay()

Метод

1
.delay()
очень прост, но тем не менее - весьма полезен на практике. Это возможность запускать функцию с временной задержкой.

Самый простой пример - через 2 секунды в консоли браузера появится сообщение

1
Hello World
:

_.delay(function (text) {
    console.log(text);
}, 2000, 'Hello World' );

Справка по этому методу в официальной документации - Lodash - Delay.

lodash - .once()

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

Простой пример с кнопкой -

1
alert
выскочит только один раз при нажатии кнопки:

function iAmOnce() {
    alert('Hello!');
}
var callMeOnce = _.once(iAmOnce);
document.querySelector('#once').addEventListener('click', callMeOnce, false);

Второй пример интереснее. Посмотрим на разметку. Затем на javascript-код.

<div class="block"></div>
<div id="secondo" class="block">
    <div id="count"></div>
</div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

Эта часть кода - украшательство, генерирование случайного цвета для каждого из блоков

1
class="block"
при помощи метода .random():

$(document).ready( function () {
var blocks = document.querySelectorAll('.block');
_.forEach( blocks, function (el) {
    el.style.backgroundColor = 'rgb(' + _.random(255) + ',' + _.random(255) + ',' + _.random(255) + ')';
});

Здесь функция

1
callOnce()
сработает только один раз и при условии, когда блок
1
secondo
“поднимется” от нижней границы окна браузера на высоту 85% от общей высоты окна.

1
iterrator
“отщекнется” один раз и изменит содержимое блока
1
id="count"
с 0 на 1:

$(document).ready( function () {
    var second = $('#secondo');
    var iterrator = 0;
    var counter = $('#count').text(iterrator);

    var callOnce = _.once( function () {
        ++iterrator;
        counter.text(iterrator);
    });

    $(window).on('scroll', function () {
        if ( $(window).scrollTop() > second.offset().top - $(window).height() * 0.85 ) {
            callOnce();
        }
    });
});

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

1
.once()
находится здесь - LoDash - Once Method.

lodash - .before()

Метод

1
.before()
- счетчик выполнения функции; метод запустит функцию менее n-раз (less than n times). В приведенном ниже примере клик по элементу
1
#before
сработает 9 раз и запустит функцию 9 раз (и не более того):

var sayHello = function () {
    console.log('Hello');
};
document.querySelector('#before').addEventListener('click', _.before(10, sayHello), false);

Можно сказать и так - метод

1
.before()
ограничивает максимальное количество запусков функции - не более n-раз.

Официальная документация по методу

1
.before()
находится здесь - LoDash - Before Method.

lodash - .after()

Метод

1
.after()
- еще один счетчик выполнения функции. Прямая противоположность методу
1
.before()
.

Этот метод ограничивает количество попыток запуска функции - после n-попыток функцию можно будет запускать неограниченное количество раз:

var sayAfter = function () {
    console.log('After');
};
document.querySelector('#after').addEventListener('click', _.after(5, sayAfter), false);

Код выше выведет в консоль браузера текст

1
After
только после пятой попытки и далее сколько угодно раз. Где на практике можно применить такой подход - не приходит на ум, если честно )

Официальная документация по методу

1
.after()
находится здесь - LoDash - After Method.

lodash - .debounce()

Интересный и полезный на практике метод - запустить функцию

1
function
с временной задержкой; отсчет временной задержки идет с момента последнего запуска функции
1
function
.

Метод имеет большое количество аргументов - ссылка на официальную документацию - Lodash - Debounce Method.

Пример ниже будет выводить окно

1
Call me after 2 second!
с задержкой в 2 секунды после события
1
resize
- то есть, когда будут изменены размеры окна браузера:

var callMe = function () {
    alert('Call me after 2 second!')
};
$(window).on( 'resize', _.debounce( callMe, 2000 ) );

Заключение

Вот я в меру своих сил и освоил несколько интересных методов библиотеки LoDash. Наиболее полезными для меня показались методы

1
.debounce()
и
1
.once()
.

Что сказать - библиотека LoDash просто замечательная и чрезвычайно полезная. К тому же она постоянно развивается - ее автор John-David Dalton не устает ее совершенствовать.

Немного пофлудил по JavaScript … останавливаться пока не собираюсь )


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017