¿Es imposible separar javascript de HTML?

Question

Para ser más específicos, estoy hablando acerca de cómo evitar este tipo de código:

<input type='text' id='title_33' class='title' 
    onfocus='updateCharsLeft(33);' 
    onkeypress='updateCharsLeft(33);' /> 

Aquí me gustaría poner el caso onfocus y onkeypress maneja por separado, es decir en un archivo .js. De esta manera:

$(document).ready(function() 
    { 
    $(".title").focus(updateCharsLeft); 
    $(".title").keypress(updateCharsLeft); 
); 

Sin embargo aquí el problema es que el ID de la caja de texto tiene que ser pasados ​​a la función updateCharsLeft(). Sería una pena tener que extraer la identificación de la ID del cuadro de texto en esa función, por lo que sería más limpio simplemente poner en los controladores de eventos dentro del código HTML.

¿Pensamientos?

Answer 1

He tenido que hacer algo similar antes y también no estaba contento con el análisis del valor del atributo ID. Lo mejor que puedo sugerir es que utilice otro atributo para el valor que necesita, al igual que el atributo rel:

<input type='text' id='title_33' class='title' rel='33' /> 

O dependiendo de la religiosa que está a punto de validación, sólo tiene que utilizar un atributo personalizado:

<input type='text' id='title_33' class='title' myval='33' /> 

Answer 2

¿No puede hacer esto:

$(document).ready(function() 
    { 
    $(".title").focus(function() { 
     updateCharsLeft(this.id); 
    }); 
    $(".title").keypress(function() { 
     updateCharsLeft(this.id); 
    }); 
); 

o más claramente:

$(document).ready(function() 
    { 
    $(".title .another .someother .andAnother").focus(function() { 
     updateCharsLeft(this.id); 
    }).keypress(function() { 
     updateCharsLeft(this.id); 
    }); 
); 

Answer 3

definitivamente creo que debe separar el JavaScript y HTML. Será más fácil de encontrar/mantener, y puede editar un lugar en lugar de 10. No se repita.

Me gustaría utilizar jQuery en vivo funcionalidad. Si tiene 10 entradas de texto, agregue 20 manejadores de eventos de esta manera en lugar de 2 (uno para CADA controlador de enfoque en la página y otro para CADA controlador de pulsaciones de tecla en la página).

También tengo tu comentario a karim, no veo por qué te estarías duplicando. Debe ser trivial pasar la identificación o transformarla con una expresión regular si es necesario, siempre y cuando sea coherente en su convención de nomenclatura. Por ejemplo, this.id.replace(/.*(\d+)$/,''). Sin embargo, probablemente sea mejor pasar la referencia directa del elemento DOM en su lugar, y trabajar con eso en su función.

Por último, parece pensar que algún aspecto de esto apestará. Tal vez me esté faltando el punto, pero ¿puedes aclarar qué es tan difícil acerca de cómo mainupalitar el ID o la referencia DOM o cualquier otra cosa que necesites hacer? Tal vez publique una muestra de código más larga de lo que está haciendo a continuación.

Answer 4

Intentaré gestionar todos los eventos desde un solo bloque de JavaScript. Siempre que pueda hacer referencia a elementos en la página, esto debería ser posible.

Answer 5

Siempre puede utilizar las funciones de cadena para analizar el valor y pasarlo, p. Ej.

$(".title").focus(function() { 
    var thisid = this.id; 
    updateCharsLeft(thisid.substring(thisid.indexOf("_") + 1)); 
}); 

No estoy seguro de cuáles serían las implicaciones de rendimiento si tuviera que hacer esto para muchos elementos.

Answer 6

Si realmente no quiere pasar this.Id entonces se podría añadir un atributo personalizado a la etiqueta de entrada ...

<input type='text' id='title_33' idSuffix='33' class='title'/> 

A continuación, configurar los controladores de eventos como este ...

$(document).ready(function() 
{ 
    $(".title").focus(function() { 
     updateCharsLeft(this.idSuffix); 
    }); 
    $(".title").keypress(function() { 
     updateCharsLeft(this.idSuffix); 
    }); 
); 

A mi personalmente me gustan los atributos personalizados. Proporcionan una forma de proporcionar metadatos personalizados a las etiquetas Html y mantenerlo todo en el marcado. validadores HTML no les gustan, aunque :-(

Answer 7

$(document).ready(function(){ 
    var update = function(){ updateCharsLeft(this.id.split("_")[1]); }; 
    $("input.title") 
     .focus(update) 
     .keypress(update); 
}); 

Answer 8

Esto es exactamente lo que se centra en Unobtrusive Javascript technique.