JavaScript: usare una coda prioritaria partendo dall'esempio di WordPress

In questo articolo vedremo come sfruttare le code prioritarie in JavaScript per ricreare o imitare il funzionamento delle action di WordPress.

La coda prioritaria è un concetto molto usato in programmazione ed è una delle prime cose che si apprendono quando si studiano i vari linguaggi per il Web. In JavaScript essa trova la sua naturale rappresentazione negli array. Un array viene popolato di elementi e successivamente tali elementi possono essere rimossi o possono esserne aggiunti di nuovi. Quando eseguiamo un loop sugli array operiamo su una sequenza ordinata di elementi.

WordPress non esegue le sue action secondo un ordine casuale, ma seguendo una priorità espressa da un numero intero. Maggiore è il numero, maggiore è la priorità della action. In JavaScript un semplice array non può soddisfare questo requisito, ma un array di oggetti invece si.

Ossia ciascuna action da inserire nella coda (array) dovrà essere un oggetto così strutturato:

  • dovrà avere un nome
  • dovrà avere una funzione da eseguire
  • dovrà avere un numero intero che indica la sua priorità

Prima di essere eseguite, le action dovranno essere ordinate per priorità, ossia dovremo eseguire un sorting sull'array di oggetti. Ecco una possibile implementazione:


(function() {
	
	function Core() {
		this.actions = []; // La coda
		
		const sortByPriority = actions => {
		
		    // Ordina la coda per priorità
		    
			const sorted = actions.sort( ( a, b ) => {
				a.priority < b.priority
				
			});
			this.actions = sorted;
		};
		
		this.addAction = ( name, callback, priority ) => {
		
			// Aggiunge una action
			
			const action = {
				name: name,
				callback: callback,
				priority: priority
			};
			this.actions.push( action );
		}
		
		this.doAction = name => {
		
			// Esegue una action usando il suo nome
		
			const actions = this.actions;
            actions.forEach(action => {
                if( typeof action === "object" ) {
				    if( action.name === name ) {
					    action.callback();
				    }
			    }
            });
		}
		
		this.removeAction = name => {
		
			// Elimina una action usando il suo nome
		
			const actions = this.actions;
            const actionIndex = actions.findIndex(action => action.name === name);
            actions.splice(actionIndex, 1);
		}
		
		this.init = function() {
		
			// Esegue le action della coda dopo averle ordinate
			
			const actions = this.actions;
			sortByPriority( actions );
            actions.forEach(action => {
                action.callback();
            });
		}
	}
})();

Esempio:


document.addEventListener( "DOMContentLoaded", function() {
	
	const theCore = new Core();
		
	function one() {
	    const el = document.createElement( "p" );
		el.innerHTML = "<b>1</b>";
		document.querySelector( "#output" ).appendChild( el );
	}
		
	function two() {
		const el = document.createElement( "p" );
		el.innerHTML = "<b>2</b>";
		document.querySelector( "#output" ).appendChild( el );
	}
		
	function three() {
		const el = document.createElement( "p" );
		el.innerHTML = "<b>3</b>";
		document.querySelector( "#output" ).appendChild( el );
	}
		
	theCore.addAction( "one", one, 1 );
	theCore.addAction( "two", two, 2 );
	theCore.addAction( "three", three, 0 );
		
	theCore.init();
		
});
Torna su