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

5

Quais são algumas das formas recomendadas de escrever JavaScript para controlar o comportamento de exibição de HTML na tela, mantendo um código de boa manutenção? Basicamente, eu comecei a procurar maneiras de manter HTML / CSS fora do JS (assumindo que é a prática recomendada), mas eu poderia também verificar as últimas formas de escrever bem o JavaScript. Veja abaixo para mais detalhes.

Meu problema específico

Eu tenho arquivos JS parecidos com isto:

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

if (selection[index].selected) {
    result += '<TABLE class="list_grey" style="float: left; margin-left: 20px;">';
    result += '<TR>';
    result += '<TH colspan="2">Data</TH>';
    result += '</TR>';

    var flag = "All";

    if (selection[index].flag == 'P')
        flag = "Premium";

    result += '<TR>';
    result += '<TD>Flag</TD>';
    result += '<TD>' + flag + '</TD>';
    result += '</TR>';
    result += '</TABLE>';
}

document.getElementById('final').innerHTML = result;

Na verdade, toda a base de código JS com que eu trabalho é atormentada por isso. Você pode ver aqui HTML, CSS JS e JSON ( selection var obtém seu conteúdo do JSON preparado pelo PHP anteriormente). Eu quero fazer isso melhor.

Meu nível de experiência

Sou novo em escrever um bom JS ou em ter experiência com padrões JS, ferramentas, dicas, técnicas e assim por diante. Estou procurando ajuda com eles.

Meu problema específico:

Eu tenho uma série de tabelas e dados para serem mostrados ao usuário. É uma "série", então o usuário pode selecionar qual "elemento" da série está atualmente ativo na tela. Um "elemento" é essencialmente uma parte parcial do HTML (com JS e CSS e HTML) e é descrito abaixo:

"elemento": um bloco de HTML que serve como dados estáticos (tabelas, títulos e divs) e uma longa cadeia JSON que codifica alguns dados previamente preparados. A string JSON é atribuída a uma variável JS e essa variável JSON data / JS armazena os registros numerados 1 a n , onde cada i contém vários dados a serem injetados no bloco de HTML, formando "HTML parcial". / p>

Eu tenho botões de navegação na tela, permitindo ao usuário percorrer a "série", onde o HTML é o mesmo, mas os dados dentro dele mudam.

Estou procurando uma boa maneira de escrever essa funcionalidade "passo através de blocos de HTML" usando o que é considerado um bom código JS de manutenção. Ou seja, estou procurando as seguintes características:

  • separação de interesses
  • código mais limpo - eu preciso de ferramentas ou técnicas que me permitam evitar misturar HTML com JS com CSS (como no exemplo), a menos que seja necessário ou conveniente. (o que eu tenho agora não é conveniente)
  • Eu prefiro técnicas ao invés de ferramentas, mas aberto a considerar / avaliar ferramentas bem estabelecidas. Por "técnicas", quero dizer puro JS, HTML, CSS, PHP abordagens. Por "ferramentas", eu atualmente conheço e confio no jQuery, e para outras ferramentas prefiro ter algum histórico para elas.

Observação sobre visibilidade / ocultação de HTML

Eu devo também notar que no meu caso o HTML é estático, também não muda estruturalmente conforme eu passo pelos elementos. No entanto, com base na variável de seleção JSON /, alguns blocos de HTML são mostrados / ocultos (como é mostrado no meu exemplo). Uma vez que eles são mostrados / ocultados no tempo de renderização da página, eles permanecem ocultos durante toda a seleção.

    
por Dennis 23.07.2014 / 18:06
fonte

4 respostas

5

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.

    
por 23.07.2014 / 19:38
fonte
2

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.

    
por 23.07.2014 / 20:03
fonte
0

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.

    
por 23.07.2014 / 18:06
fonte
0

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.

    
por 30.07.2014 / 13:30
fonte