Buone e cattive funzioni in JavaScript

Esistono due tipi di funzioni in JavaScript se consideriamo tale caratteristica dal punto di vista dell'efficenza e della scalabilità: buone funzioni e cattive funzioni. Vediamo come distinguerle.

Cattive funzioni

La specializzazione è un pregio ma può trasformarsi in un difetto se si creano funzioni iperspecializzate. Supponiamo di dover trasformare la prima lettera del testo degli elementi in minuscolo solo se tale carattere è in maiuscolo.

var malFunction = function() {
	var items = document.querySelectorAll( "#test li" );
	for( var i = 0; i < items.length; ++i ) {
		var item = items[i];
		var first = item.firstChild;

		if( first.nodeType === 3 ) {
			var text = first.nodeValue;
			var firstChar = text.charAt( 0 );
			if( /^[A-Z]$/.test( firstChar ) ) {
				var lower = firstChar.toLowerCase();
				first.nodeValue = text.replace( firstChar, lower );
			}
	    }
	}

};

Questa funzione svolge un compito e lo svolge bene. Quindi è una buona funzione? No, perché non è adattabile né configurabile. Se volessimo ad esempio eseguire un'altra azione sugli elementi selezionati dovremmo modificare la funzione. E se volessimo selezionare altri elementi non potremmo farlo se non modificando la prima riga del codice della funzione.

Buone funzioni

La nostra funzione svolge tre sottocompiti, ossia selezione, iterazione ed azione sugli elementi. Conoscendo queste informazioni possiamo creare una funzione più flessibile e configurabile.

var goodFunction = function( params ) {
	if( typeof params !== "object" ) {
		return false;
	}
	params.selector = params.selector || "*";
	params.callback = params.callback || function() {};

	var elements = document.querySelectorAll( params.selector ),
		len = elements.length,
		i;
	for( i = 0; i < len; ++i ) {
		var element = elements[i];
		params.callback( element );
	}
};

Ora possiamo eseguire qualsiasi azione su qualsiasi elemento e non dobbiamo più riscrivere la funzione perché questa può essere configurata tramite i suoi parametri:

document.addEventListener( "DOMContentLoaded", function() {
	goodFunction({
		selector: "#content p",
		callback: function( element ) {
			var first = element.firstChild;

			if( first.nodeType === 3 ) {
				var text = first.nodeValue;
				var firstChar = text.charAt( 0 );
				if( /^[a-z]$/.test( firstChar ) ) {
					var upper = firstChar.toUpperCase();
					first.nodeValue = text.replace( firstChar, upper );
				}
			}	
		}

	});

});

In questo caso abbiamo selezionato elementi diversi e applicato un'azione diversa su ciascuno di essi, cosa impossibile con la prima funzione senza modificare completamente il suo codice.