create - Javascript: Adjunte el Escuchador de eventos al Arreglo para el evento Push()

dispatchevent

Question

¿Hay alguna forma de saber cuándo un usuario ha insertado (mediante push ()) un elemento en una matriz?

Básicamente tengo una secuencia de comandos asíncrona que permite al usuario enviar comandos a una matriz. Una vez que se carga mi script, ejecuta los comandos. El problema es que el usuario puede enviar comandos adicionales a la matriz después de que mi script ya se haya ejecutado y necesito que se lo notifique cuando esto suceda. Tenga en cuenta que esto es solo una matriz regular que el usuario crea a sí mismo. Google Analytics hace algo similar a esto.

También encontré esto, que es donde creo que Google lo hace, pero no entiendo muy bien el código: Aa = función (k) {return Object.prototype [ha] .call (Object (k)) == "[object Formación]"

También encontré un gran ejemplo que parece cubrir las bases, pero no puedo hacer que mi método de inserción adicional funcione correctamente: http://jsbin.com/ixovi4/4/edit

Answer 1

prueba esto:

var MyArray = function() { };
MyArray.prototype = [];
MyArray.prototype.push = function() {
console.log(''push now!'');
for(var i = 0; i < arguments.length; i++ ) {
Array.prototype.push.call(this, arguments[i]);
}
};
var arr = new MyArray();
arr.push(2,3,''test'',1);

puede agregar funciones después de empujar o antes de empujar

Answer 2

No probado, pero supongo que algo así podría funcionar:

Array.prototype.push = function(e) {
this.push(e);
callbackFunction(e);
}

Answer 3

Una forma mucho mejor es usar el hecho de que esos métodos modifican la longitud de la matriz. La forma de aprovechar esto es bastante simple (CoffeeScript):

class app.ArrayModelWrapper extends Array
constructor: (arr,chName,path)->
vl = arr.length
@.push.apply(@,arr)
Object.defineProperty(@,"length",{
get: ->vl
set: (newValue)=>
console.log("Hello there ;)")
vl = newValue
vl
enumerable: false
})

Answer 4

¿Por qué no solo hacer algo como esto?

Array.prototype.eventPush = function(item, callback) {
this.push(item);
callback(this);
}

Luego define un controlador.

handler = function(array) {
console.log(array.length)
}

A continuación, utilice eventPush en el lugar donde desea que suceda un evento específico pasando en el controlador de la siguiente manera:

a = []
a.eventPush(1, handler);
a.eventPush(2, handler);

Answer 5

Podría usar una función ''eventify'' que anule la inserción en la matriz pasada.

var eventify = function(arr, callback) {
arr.push = function(e) {
Array.prototype.push.call(arr, e);
callback(arr);
};
};

En el siguiente ejemplo, se deben generar 3 alertas, ya que eso es lo que hace el controlador de eventos (devolución de llamada) después de que se haya llamado a eventify.

var testArr = [1, 2];
testArr.push(3);
eventify(testArr, function(updatedArr) {
alert(updatedArr.length);
});
testArr.push(4);
testArr.push(5);
testArr.push(6);

Answer 6

Esto agregará una función llamada onPush a todas las matrices, por defecto no debería hacer nada para que no interfiera con las matrices de funcionamiento normal.

simplemente anule onPush en una matriz individual.

Array.prototype.oldPush = Array.prototype.push;
Array.prototype.push = function(obj){
this.onPush(obj);
this.oldPush(obj);
};
//Override this method, be default this shouldnt do anything. As an example it will.
Array.prototype.onPush = function(obj){
alert(obj + ''got pushed'');
};
//Example
var someArray = [];
//Overriding
someArray.onPush = function(obj){
alert(''somearray now has a '' + obj + '' in it'');
};
//Testing
someArray.push(''swag'');

Esto alerta que ''ahora hay un paquete de swags''

Answer 7

Si quieres hacerlo en una única matriz:

var a = [];
a.push = function(item) {
Array.prototype.push.call(this, item);
this.onPush(item);
};
a.onPush = function(obj) {
// Do your stuff here (ex: alert(this.length);)
};

Answer 8

para el propósito de la depuración puede intentarlo. Y rastrear la función de llamada desde la pila de llamadas.

yourArray.push = function(){debugger;}

Answer 9

Me gustaría envolver la matriz original alrededor de una interfaz de observador simple como ese.

function EventedList(list){
this.listbase = list;
this.events = [];
}
EventedList.prototype.on = function(name, callback){
this.events.push({
name:name,
callback:callback
});
}
//push to listbase and emit added event
EventedList.prototype.push = function(item){
this.listbase.push(item);
this._emit("added", item)
}
EventedList.prototype._emit = function(evtName, data){
this.events.forEach(function(event){
if(evtName === event.name){
event.callback.call(null, data, this.listbase);
}
}.bind(this));
}

Entonces lo instanciaría con una matriz básica

 //returns an object interface that lets you observe the array
var evtList = new EventedList([]);
//attach a listener to the added event
evtList.on(''added'', function(item, list){
console.log("added event called: item = "+ item +", baseArray = "+ list);
})
evtList.push(1) //added event called: item = 1, baseArray = 1
evtList.push(2) //added event called: item = 2, baseArray = 1,2
evtList.push(3) //added event called: item = 3, baseArray = 1,2,3

también puede extender al observador para observar otras cosas como prePush o postPush o cualquier evento que desee emitir mientras interactúa con la matriz base interna.

Answer 10

Algunas veces necesita hacer cola antes de que una devolución de llamada esté disponible. Esto resuelve ese problema. Empuje cualquier elemento (s) a una matriz. Una vez que desee comenzar a consumir estos elementos, pase la matriz y una devolución de llamada a QueuedCallback() . QueuedCallback sobrecargará array.push como devolución de llamada y luego recorrerá los elementos en cola. Continúa presionando ítems a esa matriz y se reenviarán directamente a tu devolución de llamada. La matriz permanecerá vacía.

Compatible con todos los navegadores e IE 5.5+.

var QueuedCallback = function(arr, callback) {
arr.push = callback;
while (arr.length) callback(arr.shift());
};

Uso de muestra aquí .

Answer 11

La única forma sensata de hacerlo es escribir una clase que envuelva una matriz:

function EventedArray(handler) {
this.stack = [];
this.mutationHandler = handler || function() {};
this.setHandler = function(f) {
this.mutationHandler = f;
};
this.callHandler = function() {
if(typeof this.mutationHandler === ''function'') {
this.mutationHandler();
}
};
this.push = function(obj) {
this.stack.push(obj);
this.callHandler();
};
this.pop = function() {
this.callHandler();
return this.stack.pop();
};
this.getArray = function() {
return this.stack;
}
}
var handler = function() {
console.log(''something changed'');
};
var arr = new EventedArray(handler);
//or
var arr = new EventedArray();
arr.setHandler(handler);
arr.push(''something interesting''); //logs ''something changed''