jQuery: definire le proprietà degli oggetti in ECMAScript 5: esempio

ECMAScript 5 ha introdotto nuove e potenti funzionalità alla programmazione object-oriented che possiamo sfruttare anche utilizzando jQuery. Vediamo un esempio pratico.

Supponiamo di dover validare dei numeri di telefono, fisso e mobile. Ovviamente avremo bisogno di due espressioni regolari. Usando gli oggetti nel modo tradizionale avremo:

var Validator = {
	valid: true,
	patterns: {
		phone: /^0\d{1,3}/,
		mobile: /^3\d{2}/
	}
};

C'è un problema: entrambe le proprietà possono essere sovrascritte. Per la prima non ci sono conseguenze, in quanto trattasi di un flag di stato che useremo nella validazione, ma per la seconda le conseguenze possono essere deleterie. Ecco come fare:

var Validator = {};

Object.defineProperties(Validator, {
	valid: {
		value: true,
		writeable: true
	},
	patterns: {
		value: {
			phone: /^0\d{1,3}/,
			mobile: /^3\d{2}/
		},
		writeable: false
	}
});

writeable: false impedisce alla proprietà patterns di essere sovrascritta. Il metodo Object.defineProperties() accetta come primo parametro l'oggetto in questione seguito dalle sue proprietà che andremo a definire.

A questo punto possiamo aggiungere l'ovvio metodo di validazione al nostro oggetto:

$.extend(Validator, {
	validate: function() {
		var $phone = $('#phone').val();
		var $mobile = $('#mobile').val();
		if(!Validator.patterns.phone.test($phone)) {
			$('#phone').addClass('error').attr('placeholder', 'Error');
			Validator.valid = false;
		}
		if(!Validator.patterns.mobile.test($mobile)) {
			$('#mobile').addClass('error').attr('placeholder', 'Error');
			Validator.valid = false;
		}
		
		return Validator.valid;
	}
});

Come si può notare, la proprietà valid può essere sovrascritta in quanto abbiamo impostato writeable su true.