Array
から継承された「クラス」です。 特徴的な機能は次のとおりです。配列内のすべての変更を追跡する
change
イベントの存在、および配列の作業を簡素化するための
insert()
、
update()
、
remove()
、
set()
、
get()
メソッド。 標準
Array
すべてのネイティブメソッド
Array
。
var fruits = new Arr('apple', 'orange', 'pineapple'); fruits.on('change', function(event) { 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']
イベントを変更する理由とそれらの操作方法
イベントの存在により、次のことが可能になります。
- FRPとの類似性：1つのデータの変更が他のデータの変更を伴う場合など
- 遅延レンダリング：配列で何かが変更されました-更新されたHTML（Angular）
- 変更があった場合のサーバーへのデータの自動保存
1つのイベントがサポートされています-
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）
改善に関するコメントを歓迎します！
PS：個人的な目的のために、Arr.jsを使用するコンポーネントhttps://github.com/jmas/list/blob/master/List.jsが開発されました。 このコンポーネントは、データ配列が変更されたときにHTMLを個別に更新するリストを作成するために使用されます。 コンポーネントはcomponentjsを使用して依存関係を解決します。