JavaScript: esempio pratico di uso dello stack

Lo stack (pila in italiano) è 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 lo stack 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. In questo articolo vedremo come sfruttare lo stack per ricreare o imitare il funzionamento delle action di WordPress.

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 nello stack (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 = []; // Lo stack
		
		var sortByPriority = function( actions ) {
		
		    // Ordina lo stack per priorità
		    
			var sorted = actions.sort(function( a, b ) {
				return ( a.priority < b.priority );
				
			});
			this.actions = sorted;
		};
		
		this.addAction = function( name, callback, priority ) {
		
			// Aggiunge una action
			
			var action = {
				name: name,
				callback: callback,
				priority: priority
			};
			this.actions.push( action );
		}
		
		this.doAction = function( name ) {
		
			// Esegue una action usando il suo nome
		
			var actions = this.actions;
			for( var i = 0; i < actions.length; ++i ) {
				var action = actions[i];
			  if( typeof action === "object" ) {
				if( action.name === name ) {
					action.callback();
				}
			  }
			}
		}
		
		this.removeAction = function( name ) {
		
			// Elimina una action usando il suo nome
		
			var actions = this.actions;
			for( var i = 0; i < actions.length; ++i ) {
				var action = actions[i];
				if( action.name === name ) {
					delete action;
				}
			}	
		}
		
		this.init = function() {
		
			// Esegue le action dello stack dopo averle ordinate
			
			var actions = this.actions;
			sortByPriority( actions );
			for( var i = 0; i < this.actions.length; ++i ) {
				this.actions[i].callback();
			}
		}
	}
})();

Esempio:

document.addEventListener( "DOMContentLoaded", function() {
	
	var theCore = new Core();
		
	function one() {
		var el = document.createElement( "p" );
		el.innerHTML = "<b>1</b>";
		document.querySelector( "#output" ).appendChild( el );
	}
		
	function two() {
		var el = document.createElement( "p" );
		el.innerHTML = "<b>2</b>";
		document.querySelector( "#output" ).appendChild( el );
	}
		
	function three() {
		var 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();
		
});

See the Pen JavaScript: mimicking WordPress actions by Gabriele Romanato (@gabrieleromanato) on CodePen.