Como escrever JavaScript enquanto mantém HTML / CSS fora dele

Use um padrão mvw (modelo / visão / qualquer coisa)

• model: "pure" javascript library modelando conceitos abstratos. Esta parte geralmente contém objetos & nomes de métodos relacionados ao domínio da aplicação (negócio de carro - > objetos de carro / contratos de seguro) e a lógica de acesso de dados.
• view: uma linguagem personalizada que descreve como sua interface do usuário se parece. De preferência, a linguagem deve estar próxima do HTML.
• algo para fazer as duas partes se comunicarem sem que uma dependa demais da outra. Uma mudança nos dados do modelo deve resultar em uma mudança nos elementos correspondentes da visão (modelo - > visão). Um mouse de clique do mouse resulta em uma chamada de método em algum lugar do modelo (modelo view - >).

Com esses conceitos, você pode escolher pilhas diferentes

• Você pode usar uma estrutura grande, como angular. As visões são html dom template. O modelo é dividido entre controladores & serviços.
• você pode usar o backbone (~ model) + jquery (~ view)
• você pode usar o react.js

... a lista continua. O número de ferramentas disponíveis é realmente muito assustador. Verifique o link para obter uma boa lista de exemplos.

Exemplo de solução com angular

Em angular, a conexão entre o modelo & a visualização é realizada com um viewmodel & ligação de dados de dupla via. Um modelo de exibição é um objeto javascript. Tanto a visão & o modelo pode ler & escreva para este objeto e reaja a mudanças.

na sua opinião, você escreve o HTML:

<TABLE class="list_grey" style="float: left; margin-left: 20px;" ng-hide="hideAll">
<TR ng-repeat="row in rows">
    <td ng-repeat="val in row" ng-class="{selected : val.sel}"> {{ val.label }} </td>
</TR>
</TABLE>

no seu controlador, você lida apenas com valores de javascript:

$scope.rows = [
    [{label : "foo"}, {label : "bar"}],
    [{label : "foo2"}, {label : "bar2", sel : true}]
]

$scope.hideAll = false;

ng-repeat permite exibir uma lista de itens. ng-class & ng-hide são usados para controlar a classe & visibilidade dos elementos.

Palavras finais

Usando outras estruturas, a organização resultante pode variar, mas a separação essencial ainda existe. Em react.js, a ligação de dados é unidirecional, o que implica uma construção diferente. O framework mvw geralmente lida com a comunicação entre os componentes, então você não precisa usar jquery.

Isso é bom se o seu projeto não for trivial. Gerenciar um aplicativo complexo com apenas jquery pode levar a uma confusão de interações de retorno de chamada que podem se tornar difíceis de manter.

Usar uma estrutura mvw completa, como angular ou ember, requer algum aprendizado. Algumas outras bibliotecas têm um escopo menor, como o react.js & knockout.js.

Claro que você não precisa começar a aprender uma dessas ferramentas agora. O importante é conseguir a separação entre a visão & o modelo. Você pode usar jquery para escrever funções que editarão o dom de acordo com a observação feita em uma biblioteca javascript pura.

Você também pode usar jquery para escrever os retornos de chamada (view - > model). (model - > view) pode ser escrito usando publisher / observer. Esta parte deve ser o menor possível e ser a única coisa que conecta o modelo e as visualizações.

Dependendo de quais navegadores você precisa oferecer suporte , talvez seja possível aproveitar os tag de modelo HTML 5 .

A tag de modelo permite que você mantenha seus elementos HTML parciais no arquivo HTML, mas não os tenha processados no navegador. Para realmente exibir o conteúdo, você clona o conteúdo do modelo e o adiciona ao DOM usando o javascript. Você pode clonar e adicionar quantas vezes for necessário durante o tempo de execução, enquanto apenas define e mantém o conteúdo do HTML uma vez, mantendo as coisas legais e SECA.

Manter seu CSS e JS em arquivos separados também é uma prática muito boa, para que você possa executar minification para melhorar a velocidade de downloads da sua página. Também permite que o seu css e js sejam reutilizados em várias páginas do seu site e armazenados em cache pelo navegador entre essas solicitações, melhorando novamente o desempenho do site. Ele também permite que você use ferramentas diferentes para os diferentes tipos de arquivo ou use um IDE de desenvolvimento da web que tenha realce de sintaxe diferente e outros recursos específicos do idioma com base no idioma do arquivo.

HTML5 rocks tem um bom tutorial sobre a tag de modelo com código de amostra .

Juntando

• extraia o HTML no seu JS e coloque-o em uma tag de modelo no seu arquivo html principal

• coloque o css no seu próprio arquivo

• coloque o JS em seu próprio arquivo

• inclua os arquivos css e js em seu arquivo html

• no seu arquivo js, crie funções separadas para clonar o conteúdo da tag de modelo, adicione seus dados JSON à parte apropriada do conteúdo clonado, adicione o conteúdo ao DOM.

• no seu arquivo js, crie uma função para chamar as funções acima apropriadamente com base no selection var

• vincule seus eventos de navegação aos botões de navegação

Advertências

Como essa é uma tag nova , ela só funciona em alguns navegadores (atualmente o Firefox e Chrome). Se seu site precisar funcionar em outros navegadores, você deverá usar um polyfill que é alternativo javascript e código html que lida com os casos em que o suporte ao navegador ainda não está disponível.

Minhas ideias iniciais

• extrair HTML de JS e colocar HTML em arquivo HTML (mesmo com CSS)
• carregar JS no arquivo HTML do container pai
• no arquivo JS use JS / jQuery para mostrar / ocultar os DIVs em HTML conforme necessário, conforme selection var
• use JS / jQuery para ligar eventos de navegação a botões
• eventos de navegação preenchem as células da tabela por meio dos atributos id atribuídos.

É um pouco trabalhoso reescrever o que eu tenho agora, mas espero que o resultado final seja mais sustentável e mais fácil de ampliar / personalizar. Ou seja, para HTML, posso ir para o HTML e editá-lo, além de usar ferramentas HTML para coisas lá, em vez de lidar com HTML incorporado como strings em JavaScript. Mesmo com CSS. Eu ainda não tenho certeza se esse esforço valerá a pena, já que as coisas funcionam como estão agora ... exceto que é uma grande bagunça de um arquivo JS.

Carregando dados

var selection = eval("(" + document.getElementById("result").innerHTML + ")");

Esse é um método bastante horrível. Em primeiro lugar, qualquer tag HTML legal no código JSON seria analisada, portanto, isso poderia ser usado para um ataque de injeção. Segundo, dependendo do navegador, muitos detalhes podem ser diferentes na string innerHTML do texto original. Em geral, a configuração de innerHTML deve ser feita com cautela e somente se ela fornecer vantagens substanciais para as alternativas. E simplesmente não consigo pensar em nenhum motivo legítimo para ler innerHTML .

Eu consideraria um arquivo JSON separado carregado com XMLHttpRequest como o principal método de entrega de dados para um aplicativo de navegador JavaScript. No back-end, você pode gerar o arquivo JSON com PHP, se quiser.

Se você realmente quer os dados diretamente no arquivo HTML, um lugar muito melhor para colocá-los seria dentro de uma tag de script, o PHP pode fazer isso muito bem:

<script>
    var dataFromServer = <?php echo str_replace('</','<\/',$wellFormedJSON)?>
</script>

Observe que, como a sequência </script> pode fazer parte do JSON bem formado, mas não faz parte do JavaScript em um arquivo HTML, é necessário escapar da sequência </ , isso geralmente é feito como <\/ , que é equivalente como parte de uma string JSON ou JavaScript.

Como alternativa, você pode criar um arquivo JSONP e carregá-lo com uma tag script normal, mas observe que isso torna os dados disponíveis para outros domínios, portanto, não é possível colocar dados privados nesse arquivo.

Página dinâmica

Ocultar e mostrar elementos usando CSS é um método razoável de criar conteúdo dinâmico, mas não funciona para tudo e coloca o HTML longe do código que o modifica, o que pode ser um pouco trabalhoso. / p>

innerHTML parece fácil de usar, mas infelizmente é um método bastante propenso a introduzir problemas de segurança, pois o que você achava que era um texto simples pode ser interpretado como tags HTML. É perfeitamente possível usar innerHTML de maneira segura, escapando de tudo o que é perigoso, mas você só precisa cometer um erro ao introduzir um buraco. Geralmente é o método de melhor desempenho para gerar um novo DOM, mas, salvo nos poucos casos em que isso realmente importa, aconselho que você evite isso, especialmente como um desenvolvedor inexperiente.

Você pode criar elementos DOM usando document.createElement e métodos relacionados. É relativamente simples e não possui armadilhas de segurança. Ele também permite anexar funções em um escopo local como manipuladores de eventos, o que é bastante bacana quando você começa a usar encerramentos. Mas o código resultante tende a ser bastante longo e um tanto entediante para escrever, o que eu consideraria o principal motivo para obter uma biblioteca para a construção de DOM.