Écouteur de changement de tableau

Question

Duplicata possible :
Javascript - Comment étendre Array.prototype.push() ?

Comment puis-je être notifié (exécuter une fonction prédéfinie) de toute modification d'un tableau enregistré (ou au moins de tout ajout ou suppression d'éléments) ? J'ai essayé d'utiliser le prototype. Je ne veux pas être réprimandé pour ne pas avoir fourni quelques exemples de code de mon cru. Voici donc ce que je ferais comme pour l'utiliser.

var myArray = [];
myArray.bind(function() {
    console.log('wtf'); // Wed Thu Fri and what were you thinking?
});

Je n'ai pas besoin de surenchère. Je connais essentiellement la portée de la fonction Array que je vais utiliser (push, pop, splice et peut-être quelques autres). C'est un moyen d'utiliser le MVC de Backbone. Je veux exécuter la logique sur un tableau et ensuite avoir les vues mises en évidence en conséquence. Mais la vue est déjà attachée à une collection. Toute modification de cette collection rend à nouveau les DOM actuels de la vue. Ce n'est pas ce que je veux. Je veux simplement ajouter, ou supprimer, une classe aux DOM correspondants dans la vue à des fins de CSS.

Answer 1

Ce que j'ai fait, c'est que j'ai créé mon propre type de "tableau" qui ne fait qu'étendre le prototype de tableau, auquel j'ai ensuite ajouté mes propres gestionnaires.

Par exemple :

var MyArray = function() {
    var arr = [];
    arr.push = function() {
        console.log("PUSHING", arguments);
        return Array.prototype.push.apply(this, arguments);
    }

    return arr;
};

Utilisation :

var arr = new MyArray;
arr.push(12, 3, 45);
...

Violon : http://jsfiddle.net/maniator/vF659/

Answer 2

Vous êtes à la recherche de Object.observe mais il n'est pas encore largement disponible. Dans Chrome Canary, avec "Experimental JavaScript" activé sur about:flags, vous pouvez essayer ce qui suit :

var arr = [];

Object.observe(arr, function(changes) {
    console.log("The array changed. Changes:", changes);
});

Answer 3

Quelque chose comme cela permettra de mettre en place un contrôle global des push() des tableaux.

(function() {
  var _push = Array.prototype.push;
  Array.prototype.push = function() {
    console.log("push");
    return _push.apply(this, arguments);
  }
})();

Sinon, comme Neal l'a suggéré, vous pouvez créer une autre classe.

var MonitoredArray = function() {
  var rv = [];
  var _push = rv.push;
  rv.push = function() {
    console.log("push()");
    console.log(arguments);
    return _push.apply(this, arguments);
  }
  return rv;
}

Pour mettre en place base le suivi de N appels de fonctions à la fois.

var MonitoredArray = function() {
  var rv = [];

  // the names of the functions we want to log:
  var logged_fns = ["push", "pop"];

  for (var i in logged_fns) { (function() {
    var name = logged_fns[i]
    var fn = rv[name];

    rv[name] = function() {
      console.log(name + "()");
      console.log(arguments);
      return fn.apply(rv, arguments);
    }
  })()}

  return rv;
}

Une adaptation similaire devrait également fonctionner pour le premier exemple.