È impossibile separare javascript da HTML?

Question

Per essere precisi, sto parlando di evitare questo tipo di codice:

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

Qui vorrei mettere l'evento onfocus e onkeypress gestisce separatamente, vale a dire in un file .js. Come questo:

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

Tuttavia qui il problema è che l'ID della casella di testo deve essere passato sulla funzione updateCharsLeft(). Farebbe schifo dover estrarre l'id dall'ID della casella di testo in quella funzione, quindi sarebbe effettivamente più pulito inserire semplicemente i gestori di eventi all'interno del codice HTML.

Pensieri?

Answer 1

Ho dovuto fare qualcosa di simile prima e inoltre non ero contento di analizzare il valore dell'attributo ID. La cosa migliore che posso suggerire è che si utilizza un altro attributo per il valore necessario, come l'attributo rel:

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

o secondo quanto religiosa che si sta convalida, basta usare un attributo personalizzato:

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

Answer 2

Non puoi fare questo:

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

o più ordinatamente:

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

Answer 3

Sono assolutamente convinta che si dovrebbe separare il JavaScript e HTML. Sarà più facile da trovare/mantenere ed è possibile modificare un posto anziché 10. Non ripetersi.

Vorrei esaminare utilizzando funzionalità live di jQuery. Se hai 10 input di testo, aggiungi 20 gestori di eventi in questo modo invece di 2 (uno per ogni gestore di focus sulla pagina e uno per OGNI gestore di tasti sulla pagina).

Anche per il tuo commento a karim, non vedo perché ti stia duplicando. Dovrebbe essere banale passare l'id o trasformarlo con un'espressione regolare, se necessario, purché coerente nella convenzione di denominazione Ad esempio, this.id.replace(/.*(\d+)$/,''). Tuttavia, sarebbe probabilmente anche meglio passare il riferimento diretto all'elemento DOM, e lavorare con quello nella tua funzione.

Infine, sembra che pensi che alcuni aspetti di questo faranno schifo. Forse mi manca il punto, ma puoi chiarire cosa c'è di così difficile nel mainupaliting dell'ID o del riferimento DOM o di qualsiasi altra cosa che devi fare? Magari postare un esempio di codice più lungo di quello che farai dopo.

Answer 4

Vorrei provare a gestire tutti gli eventi da un singolo blocco JavaScript. Finché sei in grado di fare riferimento a elementi nella pagina, questo dovrebbe essere possibile.

Answer 5

È sempre possibile utilizzare le funzioni di stringa per analizzare il valore e trasmetterlo, ad es.

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

Non sono sicuro di quali sarebbero le implicazioni in termini di prestazioni se dovessi farlo per molti elementi.

Answer 6

Se davvero non si vuole passare this.Id allora si potrebbe aggiungere un attributo personalizzato al tag input ...

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

È quindi impostare i gestori di eventi come questo ...

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

Personalmente mi piacciono gli attributi personalizzati. Forniscono un modo per dare ai tag HTML i metadati personalizzati e tenerli tutti nella markup. validatori HTML non piacciono però :-(

Answer 7

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

Answer 8

Questo è esattamente ciò che si concentra su Unobtrusive Javascript technique.