La mejor estructura para código JS

Lo primero es tener claro lo que queremos hacer, en nuestro caso, queremos hacer un validador de expresiones regulares como el pasado post.

La diferencia es que vamos a coger el código del validador y lo vamos a parametrizar y a meter en un objeto, que nos pueda servir de ejemplo y modelo para futuras soluciones.

Ahora lo importante es separar la configuración del objeto y lo que sería la lógica. Para esto nos crearemos un fichero “config.js” y otro llamado “validator.js”.

Fichero: config.js

var App = App || {};

App.Config = {
    /**
     * Configuración 
     */
    'validator': {
        'idField'    : "field",
        'msgError'   : "No pas\u00f3 la validaci\u00f3n",
    	'msgSuccess' : true,
    	'expReg'     : true
    }
};

Fichero: validator.js

var App = App || {};

App.Validator = function($, config)
{
    /**
     * Versión del js
     */
    var version = '1.0';

    var msgError = config['msgError'];
    var msgSuccess = config['msgSuccess'];
    var expReg = config['expReg'];   
    var idField = config['idField']; 
    
    /**
     * Inicializa el objeto
     */
    function init() {
        
       
    }

    /**
     * Valida si el valor introducido cumple con la expresion regular definida para el objeto
     */
    function validate(expRegTemp) {

       if(expRegTemp != ''){
           expReg = expRegTemp;
       }

       var campo = document.getElementById(idField);
        
       if ((campo.value.match(expReg))){
           if((campo.value!='')) {
              alert(msgSuccess); 
           }
       }else{
           alert(msgError);
           campo.focus();
       } 
    }
    
    /**
     * Ejecutable al instanciar el objeto
     */

    init();
    
    /**
     * Métodos públicos
     */
    return {
        version: function() {
            return version;
        }
        ,init     : init
        ,validate : validate
    };
};

Ahora desde nuestro .html deberemos instanciar el objeto y pintar nuestro formulario con la llamada a la acción.


Fichero: index.html

	
                 
		
		
		
		
		
		

                .......
	
	


            

                
                
               
            


           
        

Se me ha ocurrido que puede ser útil añadir un “.zip” con el ejemplo funcionando para que quede un poco más claro. Espero que esto le sea útil a alguien, yo cuando me enseño un “compi” a programar así todas las funcionalidades de Javascript(JS) ví la luz, y desde entonces solo lo hago así.

Esta forma de programar nos ofrece mejor legibilidad del código, mayor escalabilidad, y nos permite controlar mejor las dependencias de un objeto JS.