Arr.js: події для стандартного масиву

Arr.js — це клас, успадкований від стандартного
Array
. Відмітними особливостями є: наявність події
change
при будь-яких змінах в масиві і методи
insert()
,
update()
,
remove()
,
set()
,
get()
для спрощеної роботи з масивом. Доступні всі «рідні» методи стандартного
Array
.

var fruits = new Arr('apple', 'orange', 'pineapple');

fruits.on('change', function() {
alert('I changed fruits: ' + fruits.join(', '));
});

fruits.push('banana');


Код: Приклади роботи основних методів
var fruits = new Arr('apple', 'orange', 'pineapple');

fruits.get(0);
// apple

fruits.get(10, 'lime'); // trying to get undefined element - return defaultValue
// lime

fruits.get(20); // trying to get undefined element
// null

fruits.set(1, 'nut');
// ['nut', 'orange', 'pineapple']

fruits.insert(['lime', 'banana', 'kivi']);
// ['nut', 'orange', 'pineapple', 'lime', 'banana', 'kivi']

fruits.remove(function(item, index) {
if (item.indexOf('apple') !== -1) { // remove only items where word "apple" is founded
return true;
}
});
// ['nut', 'orange', 'lime', 'banana', 'kivi']

fruits.update(function(item, index) {
if (item.indexOf('nut') !== -1) { // update "nut" to "apple"
return 'apple';
}
});
// ['apple', 'orange', 'lime', 'banana', 'kivi']



Навіщо подія change і як з ними працювати
Наявність події дозволяє зробити:
  • подобу FRP: коли зміна одних даних повинно спричинити за собою зміну інших даних і так далі
  • відкладений рендеринг: що змінилося в масиві — оновили HTML (ala angular)
  • автоматичне збереження даних на сервер при будь-яких змінах
Підтримується одна подія —
change
.

var fruits = new Arr('apple', 'orange', 'pineapple');

fruits.on('change', function(event) { // handler
console.log(event);
});

fruits.push('banana');
// { "type": "insert", "items": ["banana"] }

fruits.remove(function(item) { return item == 'banana'; });
// { "type": "remove", "items": ['banana"] }

Зрозуміти що сталося в масиві можна по переданому в
handler
об'єкта
event
. Властивості об'єкта
event
:
type
може приймати значення:
insert
,
update
,
remove
. Властивість
items
дозволяє дізнатися які елементи масиву були порушені.

Наочний приклад
// Масив в якому плануємо зберігати дані про погоду
var weatherList = new Arr;

// При зміні в масиві - перересовываем список
weatherList.on('change', function() {
var el = $('#weather');
var celsius, maxCelsius, minCelsius, weather;

el.html(");

weatherList.forEach(function(item) {
celsius = Math.floor(item.main.temp - 273);
maxCelsius = Math.floor(item.main.temp_max - 273);
minCelsius = Math.floor(item.main.temp_min - 273);
weather = item.weather.pop().main;
el.append('<li><b>' + item.name + '</b> ' + ' ' + celsius + ' (max: ' + maxCelsius + ', min: ' + minCelsius + ') ' + weather + '</li>');
});
});

// Завантаження погоди сервісу, оновлення масиву weatherList
function loadWeather(lat, lng) {
$.get('http://api.openweathermap.org/data/2.5/find?lat=' + lat + '&lon=' + lng + '&cnt=10').done(function(data) {
// clear weather list
weatherList.remove(function() { return true; });

// insert items
weatherList.insert(data.list);
});
}

// Погода в Києві
loadWeather(50.4666537, 30.5844519);

Подивитися робочий приклад на JSBin.

В ув'язненні
Хочу додати, що ідея не нова, є github://MatthewMueller/array. Але код мені здався занадто перевантаженим, що власне може вилитися в проблеми з продуктивністю. Тому було прийнято рішення розширити» стандартний
Array
.

Плани: є бажання покрити бібліотеку якісними тестами — було б добре, якби хто-небудь, хто добре розбирається у цьому допоміг.

Розширювати список методів поки не планується, за винятком методу
removeListener()
.

Репозиторій Arr.js і документація (en).

Коментарі щодо поліпшення вітаються!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.