Fizemos um bom trabalho até agora na organização. Obter nosso HTML dividido em um modelo foi um grande passo. Estamos mais turvando as águas, por assim dizer. Nossos diferentes bits de funcionalidade em JavaScript são divididos em seções discretas, tornando as coisas mais fáceis de entender e manter. Sei que estamos trabalhando com uma demonstração bem pequena, mas espero que você possa imaginar como, à medida que um aplicativo fica mais complicado e com mais linhas de código, essa organização é incrivelmente valiosa.
JavaScript não tem nenhuma “opinião”, por assim dizer, sobre organização. É provavelmente por isso que algumas pessoas adoram e outras se sentem perdidas nele. Como você escolhe organizá-lo depende totalmente de você. É também provável que seja por isso que algumas pessoas realmente se agarram a estruturas que, opinativas ou não, fornecem uma estrutura organizacional. Por exemplo, Backbone. Mas essa é outra série!
Para nossa demonstração, vamos simplesmente organizar em torno de um objeto que simplesmente criamos.
var Movies = ( )Tudo o que estamos fazendo aqui está relacionado a colocar alguns filmes na página, portanto, vamos incluí-lo em uma “coisa” chamada Filmes. Lembre-se de que estamos apenas fazendo tudo o que faz sentido para nós organizacionalmente. Isso tem a vantagem de colocar apenas uma variável no “escopo global” também. Se fizéssemos tudo no escopo global, seria uma confusão de variáveis substituindo acidentalmente (e funções e tudo o mais) declaradas em outro lugar.
Porém, um objeto como esse não “faz” nada. Precisamos “dar o pontapé inicial”.
var Movies = ( init: function() ( ) ) Movies.init();Ter uma função chamada init é quase um padrão que permite que qualquer pessoa que leia este código saiba que o código contido nele é o que é executado quando esse grupo de código é executado. Isso deve ser lido um pouco como um índice do que acontece com esse grupo de código. Em seguida, criamos outras funções (mais propriedades do objeto Movies) que fazem as coisas que precisamos fazer, em pedaços discretos. Lembre-se de que podemos chamar as coisas do que quisermos, do que fizer sentido para nós.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( // Templating here ), getData: function() ( // Data getting here ), appendMoviesToPage: function(data) ( // Display logic here ), bindUIActions: function() ( // Event delegating binding here. ) ) Movies.init();Muito claro eh? Você pode notar que appendMovesToPagenão é chamado no init. Isso porque não podemos chamar isso até que tenhamos dados para enviar. Esses dados virão de uma chamada Ajax, o que significa que precisamos de um retorno de chamada. Então getDatavou acabar chamando aquele.
Tudo o mais que será preenchido aqui é apenas mover pedaços de código que já escrevemos para o lugar certo.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), getData: function() ( $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) ( Movies.appendMoviesToPage(data); )); ), appendMoviesToPage: function(data) ( var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += Movies.compiled(data.movies(i)); ) $("#movies").append(html); ), bindUIActions: function() ( $(document).on("click", ".module-movie", function() ( alert("movie added"); )); ) ) Movies.init();
E feito.
Vamos examinar as quatro preocupações que descrevemos anteriormente e ver o que fizemos a respeito delas.
- Obtendo os dados. Nós movemos o JSON para um arquivo que poderíamos usar
$.getJSON, como é provável que precisaríamos fazer em uma situação real. Além de apenas praticar isso, isso nos permitirá escrever testes em torno dele. - Lógica de exibição. Agora temos uma função muito específica appendMoviesToPage que é chamada quando estamos prontos para anexar nossos filmes à página. Funções de propósito único são ótimas para (novamente) organização, compreensão e manutenção.
- Manipulação de eventos. Usando a delegação de eventos, não estamos mais misturando essa “lógica de negócios” com a lógica de exibição ou modelo. Nem mesmo precisamos nos preocupar com a execução do pedido de origem, porque, em última análise, estamos anexando os eventos ao
document. Nossa funcionalidade funcionará independentemente de quando / como o modelo é anexado à página. - Templating. Totalmente movido para usar bibliotecas destinadas especificamente a modelos.
Eu chamaria isso de vitória. É aqui que terminamos:
Veja a Pen BwbhI de Chris Coyier (@chriscoyier) no CodePen