jQuery sequenza di eventi personalizzati
-
22-10-2019 - |
Domanda
Sto creando un oggetto JS personalizzato. Questo oggetto esegue alcune action
.
Voglio essere in grado di comunicare al consumo dell'oggetto (innescando eventi personalizzati) che verrà eseguita action
e action
è già stata eseguita. (Questo modello di comportamento è noto in ASP.NET in cui i controlli hanno eventi onBeforeAction
e onAfterAction
).
La parte difficile è che vorrei consumatore di essere in grado di fermare / interrompere la sequenza di eventi.
Ecco un algoritmo (in Human #) del comportamento desiderato:
this.trigger('onBeforeAction'); if (!onBeforeAction.wasCanceled){ this.doAction(); this.trigger('onAfterAction'); }
Avere questa funzionalità nel mio oggetto permetterebbe consumatore di fare qualcosa di simile:
$(myIntance).bind('onBeforeAction', function(){ if (!someCondition.satisfied) return false; return true; }); $(myIntance).bind('onAfterAction', function(){ // respond to action here });
Tutte le idee su come implementare una sequenza di eventi 'controllabile' sarebbe grande.
Grazie in anticipo.
// R
Soluzione 2
Credo di avere trovato la soluzione.
Ecco quello che mi si avvicinò con:
// my object
function Car(){
this.currentSpeed = 0;
}
Car.prototype.goFaster = function(){
var event = $.Event('beforeSpeedIncrease');
$(this).trigger(event); // notify "onBeforeAction"
if (!event.isDefaultPrevented()){
this.currentSpeed += 10; // actual action
$(this).trigger('afterSpeedIncreased'); // notify "onAfterAction"
}
}
Poi alcuni consumatori potrebbe agire in questo modo:
var speedLimit = 30;
var carUnderControl = new Car();
$(carUnderControl)
.bind('beforeSpeedIncrease', function(e){
if (carUnderControl.currentSpeed >= speedLimit){
e.preventDefault();
console.log('Speed increase prevented, current speed: ' + carUnderControl.currentSpeed);
}
})
.bind('afterSpeedIncreased', function(){
console.log('Current speed: ' + carUnderControl.currentSpeed);
});
Ho eseguito questo in Firefox con Firebug (ovviamente). Esecuzione carUnderControl.goFaster();
dalla console di Firebug per tre volte hanno mostrato Velocità corrente: ... di messaggio per tre volte. esecuzioni successive di metodo goFaster()
mostrato Aumento velocità impedito messaggio.
Questa è la funzionalità che volevo ottenere.
Tutti i consigli come migliorare questo sono molto benvenuti.
Grazie
Altri suggerimenti
(function ($) {
var origin = $.fn.click;
$.fn.click = function(event) {
//before function
origin.call(this, event);
//after function
// remember to use return as this could help with jq chainability
};
})(jQuery);
Sostituire cliccare con il tuo nome evento personalizzato:)