É cada vez mais comum manipular uma quantidade enorme de html através do Javascript, seja usando Ajax ou apenas alterando elementos estáticos do html.

Alguns códigos que eu vejo tem "tripas" gigantescas de código html tudo na mesma linha, para se manter dentro de uma variável. Identação zero, não precisa dizer que o código é praticamente ilegível, né?

//Exemplo de código ilegível
var structureTable = "<table><tbody><tr><td>Name</td><td>ID</td><td>Value</td><td>Tax</td><td>Quantity</td></tr><tr><td>Name</td><td>ID</td><td>Value</td><td>Tax</td><td>Quantity</td></tr></tbody></table><hr /><h2>Tabela 2</h2><table><tbody><tr><td>Name</td><td>ID</td><td>Value</td><td>Tax</td><td>Quantity</td></tr><tr><td>Name</td><td>ID</td><td>Value</td><td>Tax</td><td>Quantity</td></tr></tbody></table>";

Neste caso a estrutura nem é tão complicada, duas tabelas apenas. Mas as vezes a coisa fica FEIA quando existem blocos muito grande de HTML que devem ser manipulados pelo javascript.

Uma solução para lidar com este problema é usar Ajax e carregar o bloco de javascript de um arquivo HTML separado e inserir ele no seu DOM, mas vejo isso como uma requisição desnecessária ao servidor – você fará uma requisição para um conteúdo que não é dinâmico.

A solução que proponho para lidar com strings que são códigos de HTML são variáveis com mais de uma linha no javascript.

Variáveis multiline no javascript

A mesma "structureTable" que defini no exemplo acima vou definir agora, usando quebra de linha para variáveis do JS. Para sinalizar a quebra de linha no Javascript você só precisa usar uma barra invertida e continuar a variável na próxima linha.

//Exemplo de código legível
var structureTable = "<table>\
<tbody>\
   <tr>\
     <td>Name</td>\
     <td>ID</td>\
     <td>Value</td>\
     <td>Tax</td>\
     <td>Quantity</td>\
   </tr>\
</tbody>";

 

E pronto, você tem sua variável legível e muito mais fácil de dar manutenção depois.