Arr.js: events for the standard array
Arr.js is a “class” inherited from the standard
The presence of an event allows you to do:
One event is supported -
')
You can understand what happened in the array by passing to the
View a working example on JSBin .
I want to add that the idea is not new, there is github: // MatthewMueller / array . But the code seemed to me too overloaded, which in fact can lead to performance problems. Therefore, it was decided to "expand" the standard
Plans: there is a desire to cover the library with high-quality tests - it would be good if someone, who is well versed in this, helped.
It is not planned to expand the list of methods, except for the
Arr.js repository and documentation (en) .
Comments on improvements are welcome!
PS: For personal use, a https://github.com/jmas/list/blob/master/List.js component was developed that uses Arr.js. The component is used to create lists that update HTML themselves when the array of data changes. The component uses componentjs to resolve dependencies.
Array . Distinctive features are: the presence of a change event to track any changes in the array, and the methods insert() , update() , remove() , set() , get() for simplified work with the array. All the native methods of the standard Array . var fruits = new Arr('apple', 'orange', 'pineapple'); fruits.on('change', function(event) { alert('I changed fruits: ' + fruits.join(', ')); }); fruits.push('banana'); Code: Examples of how basic methods work
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'] Why change event and how to work with them
The presence of an event allows you to do:
- the similarity of FRP: when a change in some data should entail a change in other data, and so on
- deferred rendering: something changed in the array - updated HTML (ala angular)
- automatic saving of data to the server in case of any changes
One event is supported -
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"] } You can understand what happened in the array by passing to the
handler object, event . The properties of the event : type object can be: insert , update , remove . The items property lets you know which elements of the array were affected.Illustrative example
// 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); View a working example on JSBin .
In custody
I want to add that the idea is not new, there is github: // MatthewMueller / array . But the code seemed to me too overloaded, which in fact can lead to performance problems. Therefore, it was decided to "expand" the standard
Array .Plans: there is a desire to cover the library with high-quality tests - it would be good if someone, who is well versed in this, helped.
It is not planned to expand the list of methods, except for the
removeListener() method.Arr.js repository and documentation (en) .
Comments on improvements are welcome!
PS: For personal use, a https://github.com/jmas/list/blob/master/List.js component was developed that uses Arr.js. The component is used to create lists that update HTML themselves when the array of data changes. The component uses componentjs to resolve dependencies.
Source: https://habr.com/ru/post/238197/
All Articles