compactar codigo con funciones "personalizadas"

[oms02]

Hola!

Vereis, tengo el siguiente codigo:

Código Javascript:

$('#dato1').focusout(function(){
    if($(this).val().length > 0)
        {validaNombre();}
    else
        {valido($(this));}
});
$('#dato2').focusout(function(){
    if($(this).val().length > 0)
        {validaClave();}
    else
        {valido($(this));}
});
$('#dato4').focusout(function(){
    if($(this).val().length > 0)
        {validaMail();}
    else
        {valido($(this));}
});
 

He conseguido resumirlo de una manera bastante basica...ya de paso me gustaria saber si se podria hacer de alguna manera "mas mejor", pero la pregunta principal es....como leches hago que funcione esto??

Código Javascript:

var numInput = ['#dat1','#dat2','#dat4'];
var funciones = ['validaNombre();',"validaClave();",'validaMail();'];
 
for(var i=0;i<3;i++){
    $(numInput[i]).focusout(function(){
        if($(this).val().length > 0)
            {funciones[i];}
        else
            {valido($(this),colorVacio);}
    });
}
 

si no me equivoco el problema lo esta provocando la llamada al array funciones...pero no se como leches hacer que funcione...

No me he molestado en explicar de que va el asunto...es que creo que no hace falta tp, no??

A alguien se le ocurre como leches podria llamar a esas funciones ..??

Muchas gracias!

[Dradi7]

Puedes hacerlo de esta manera

Código Javascript:

// DONDE INPUT PUEDE SER CUALQUIER HTMLELEMENT P, DIV, BUTTON, A, ETC.
$('input[id^="dato"]').focusout(function(){
if($(this).val().length > 0)
   {validaNombre();}
else
   {valido($(this));}
});
 

[oms02]

Hola Dradi7

Lo que ocurre es que las funciones que se deben ejecutar al hacer el focusout son diferentes para cada input.

he conseguido que al menos se lea el array "funciones" y se produzca la llamada a dichas funciones:

Código Javascript:

var funciones = [validaNombre(),validaClave(),validaMail()];
 

pero ahora el problema se ha traducido en que dicha llamada me la hace al cargar la pagina (logico supongo, pues leera el array)...asi que ahora es el focusout el problema...

[Dradi7]

Iniciado por oms02

Hola Dradi7

Lo que ocurre es que las funciones que se deben ejecutar al hacer el focusout son diferentes para cada input.

he conseguido que al menos se lea el array "funciones" y se produzca la llamada a dichas funciones:

Código Javascript:

var funciones = [validaNombre(),validaClave(),validaMail()];
 

pero ahora el problema se ha traducido en que dicha llamada me la hace al cargar la pagina (logico supongo, pues leera el array)...asi que ahora es el focusout el problema...

OJO que no necesariamente por compactar el código estas acelerando la carga y el uso de recursos.

Bueno en cuanto a porque tu código ejecuta los procedimientos es por esto

Código Javascript:

var funciones = [validaNombre(),validaClave(),validaMail()];
 

al hacer esto estas realizando una función que sea "auto ejecutable" y siempre lo va a ejecutar como lo estabas haciendo antes estaba bien.

Si quieres hacerlo de una manera sencilla, y poco codigo puedes hacer lo siguiente usando atributos data

Código HTML:

<a id="dato1" href="#" data-validate="0">ok</a><br/>
<a id="dato2" href="#" data-validate="0">ok</a><br/>
<a id="dato3" href="#" data-validate="0">ok</a><br/>
<a id="dato4" href="#" data-validate="1">ok</a><br/>
<a id="dato5" href="#" data-validate="1">ok</a><br/>
<a id="dato6" href="#" data-validate="1">ok</a><br/>
<a id="dato7" href="#" data-validate="2">ok</a><br/>
<a id="dato8" href="#" data-validate="2">ok</a><br/>
<a id="dato9" href="#" data-validate="2">ok</a><br/>
<a id="dato10" href="#" data-validate="2">ok</a><br/>
 

Puedes cambiar los a por input

Código Javascript:

<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        var funciones = ["validarNombre","validarClave","validarEmail"];
        $('a[id^="dato"]').click(function(){
            var funcion = $(this).attr("data-validate");
            window[funciones[funcion]]();
        });
    });
</script>
 

otra forma seria poner en los mismos data-validate el nombre de la función a validar y ya no seria necesaria crear la variable funciones y lo llamarías de frente así window[funcion]();

[oms02]

Muchas gracias por tu idea Dradi, suena bien.

Respecto a este asunto:

OJO que no necesariamente por compactar el código estas acelerando la carga y el uso de recursos.

me podrias decir si puedo ayudarme de algun programa, etc... que se dedique a mirar este tipo de cosas...es que soy consciente de lo que comentas, pero es una duda constante a lo largo de la programacion de la pagina web...nunca se si seria mas apropiado hacerlo asi, o asa, o sino....

Bueno, muchisimas gracias!

[Dradi7]

Bueno ante todo comentarte lo siguiente programas que sepa creo que no hay (si es que hay corrigenme).

Debes aclarar estos puntos siempre para poder realizar cualquier tipo de aplicación, hablaremos de aplicaciones web:

Define la envergadura de tu proyecto

Si tu proyecto es grande entonces talves sea recomendable por ejemplo el uso de JQuery, porque te digo esto porque es una librería que tiene bastantes bondades pero la mayoría de esas bondades uno no usa en el proyecto, solo un 20% usamos de la capacidad de JQuery, en todo caso puedes usar http://zeptojs.com/ que es un JQuery resumido digamoslo así en donde solo se usa lo mas importante de esta librería, en otro caso podrías usar puro JavaScript que seria lo recomendable también.

Trata en lo posible que la carga de tus Script sean al ultimo de tu pagina y/o que sea dinamicamente

Esto generaría una pequeña velocidad al momento de mostrar tus paginas web y al generarlos dinamicamente aun un poco mas

Verifica que no se repitan funciones y código javascript innecesario

A veces cuando uno empieza a realizar su pagina web puede existir por ejemplo ValidarNombre, ValidarDireccion en ambos casos por ejemplo los dos validan que el objeto no sobrepase el limite de caracteres o este en blanco porque no mejor crear una sola función donde le envié como parámetro el objeto y la longitud máxima permitida no crees que seria mejor eso.

Trata siempre de declarar las variables necesarias y que se van a utilizar como variables publicas en todo el proyecto, porque podría ser el caso que crees variables en cada archivo js y puedan quedar en memoria generando lentitud en la carga

No es recomendable tampoco usar algunas funciones nativas del JavaScript como Eval porque es un comando pesado y lento ademas que se puede realizar inyecciones a través de el, otros mas for in, etc.

Que pasa si el Javascript del Cliente esta desactivado

A veces un programador web no toma en cuenta esto y solo valida en lado Cliente error fatal si tu haces esto puedes estar cometiendo un error irreparable siempre hay que tratar de validar también del lado Servidor pero siempre validando que el Javascript esta deshabilitado.

Bueno podría hablar mas pero es extenso, en la web existe bastante información de este tema en el cual debes siempre revisar

JavaScript Optimization