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.