OK, então existe um último lugar onde podemos usar a função de reinicialização que está no início do nosso código.
Quando a página carrega a primeira vez o que precisamos acontecer, precisamos escolher cores
aleatórias que você fez, então precisamos escolher uma cor dessas novas cores aleatórias que já temos aqui.
E então precisamos atribuir uma cor a cada quadrado na página para que possamos usar nossa função de reinicialização porque é
basicamente o que ela faz.
E eu vou limpar as coisas, na verdade, apenas executando uma função no início chamada init e
isso não existe.
E dentro de nossa função init, vamos colocar tudo o que precisa ser executado quando a página carregar.
Então, teremos init da função.
E então, dentro da nossa função de rede, a primeira coisa que podemos fazer é avançar e adicionar nossos ouvintes
de botão de modo.
E isso é realmente apenas para limpar as coisas.
Então não é apenas flutuando no meio do nada.
Então, ele irá recuar isso corretamente.
Então, este é o nosso modo de botões de ouvintes de eventos e eu vou pegar esse código aqui.
E o que isso faz é que muda a cor de cada quadrado do qual podemos simplesmente nos livrar.
Nós não precisamos mais fazer isso porque usaremos esse reset e, em seguida, também adiciona ouvintes klick a
cada quadrado para que, ao clicar, ainda precisamos de toda essa lógica, pode limpar isso um pouco.
Estamos mudando a exibição da mensagem, estamos mudando o botão de reinicialização mudando de cores.
Então, eu apenas vou copiar isso para a nossa função init porque também queremos que seja executado
no início, quando a página carrega tão bem e feito isso também.
uma vez que configuramos os manipuladores de eventos aqui para os botões de botões e para os
quadrados, queremos apenas redefinir a tela, o que significa executar a função de reinicialização e o que o reset
fará é que ele realmente gerará nossas cores então podemos simplesmente ter cores indefinidas ou uma matriz vazia no início.
E então o último último,
Vou começar com isso.
Bem, nós daremos uma matriz vazia primeiro.
E então, o que podemos fazer é definir a cor escolhida apenas para ser uma variável sem valor e salvar isso e tornar
as coisas um pouco mais limpas.
Eu vou mover meus seletores para baixo aqui, de modo que no topo, temos três variáveis ​​que não estão
selecionando coisas.
E então, temos variáveis ​​que estão selecionando os diferentes elementos na página.
ESTÁ BEM.
Então, novamente, o que acontece no começo.
Executamos a função init que irá executar todo esse código aqui.
E esse código vai configurar nossos ouvintes de botão de modo e vai configurar nossos ouvintes quadrados e depois executamos
o reset, que escolhe as cores, ele escolhe uma cor aleatória dessas cores, ele escolhe isso, altera o
conteúdo do texto e tudo isso.
E podemos livrar-se desta linha porque estamos fazendo isso agora dentro da função init que
está chamando de redefinição.
Então, vamos nos certificar de que isso funciona antes de seguir em frente.
Nós abrimos o con. Sem erros.
E você pode ver atualizar a página e todo esse código está sendo executado na função init.
E dentro de lá está reestablecendo tudo o que vemos.
Então nossos ouvintes estão configurados corretamente.
Recebemos a mensagem correta.
Vamos jogar de novo.
Tudo está funcionando bem.
Vamos jogar de modo fácil.
Aqui vamos nós.
Vamos mais uma vez.
Ótimo.
Então, funciona bem.
Há mais uma mudança que podemos fazer, que é essa
função aqui e agora é um pouco longo e algumas pessoas com quem
trabalhei têm regras realmente rígidas sobre o tempo que a função deve ser.
Algumas pessoas dirão se o seu código é maior do que 10 linhas, você precisa dividi-lo em sua própria função.
Então, podemos fazer isso aqui.
Esta poderia ser uma
função própria, tudo o que faz é configurar um modo de ouvintes do botão para que possamos fazer isso aqui.
Ou apenas
botão de modo de escrita, vamos chamá-lo de botões de modo de configuração e então declararemos essa função para baixo aqui botões de modo de configuração de função.
E aqui dentro, vamos colar esse código,
que então executará um recuo corretamente uma vez, apenas no início.
Configuramos os ouvintes do botão de modo e podemos fazer o mesmo aqui.
Copie este código e damos a este um nome
de configuração de ouvintes quadrados ou vamos chamá-lo de configurar quadrados assim e depois escreveremos uma função configurada.
E percebo que não usei uma capital, você está lá.
Então eu preciso prestar atenção a esse
conjunto de quadrados aqui e nós teremos certeza de que nosso código funciona da mesma maneira.
Então, agora, nossa init é realmente agradável e limpa.
Ele configura os botões de modo que configura os quadrados e reafirma tudo o que vemos.
Vamos tentar atualizar.
Parece que funcionou, nossa Praça ainda funciona bem.
Se os atualizarmos mais, nossos botões de modo ainda funcionam bem.
Então tudo bem e parece que tudo está funcionando bem.
Isso é o que vamos tomar para refatorar por enquanto.
Mas vou mostrar-lhe algumas coisas que gostaríamos de melhorar nos futuros vídeos.
Uma vez que aprendemos um pouco mais sobre o javascript e nos encorajamos com isso, falaremos sobre alguns padrões de
design e padrões de design são basicamente formas de estruturar seu código para que possamos ter esse código.
Funciona da mesma maneira que a mesma lógica para fazer o mesmo jogo e 10 pessoas diferentes podem escrevê-lo
de 10 maneiras diferentes e não é apenas sobre as funções que usamos ou os nomes das variáveis.
É também sobre como estruturamos as coisas em geral e a mais simples
ou uma das mais comuns é chamada de padrão de projeto do módulo.
E o que isso significa é que podemos adicionar
um monte de propriedades em objetos, por isso não temos nenhuma variável como essa flutuando em torno de que não estão dentro de um objeto.
Não temos quaisquer funções que estejam apenas por conta própria, assim, no objeto da janela.
Em vez disso, nós os adicionamos ao nosso próprio objeto.
Então, seria algo assim, você poderia ter um objeto de jogo.
E então podemos escrever o Game Point e nós faremos apenas uma parte disso.
Game dot init é uma função e nós apenas copiamos esse
código lá e faria isso por cada função única, cada variável de propriedade e, no final, simplesmente executávamos o jogo.
E o raciocínio por trás disso é um pouco mais complicado.
A versão curta é que nos ajuda a manter as coisas estruturadas e organizadas.
E também ajuda a evitar colisões de espaço para nome que mencionei anteriormente em um dos vídeos de objeto.
Então não vou passar por esse refator inteiro.
O que temos é bom o suficiente.
Isso funciona bem.
Mas como você continua
a crescer como desenvolvedor e você aprenderá mais e mais uma das coisas que você
prestará uma vez que você se encolhe com mais facilidade, os padrões de design javascript e livros escritos sobre isso.
Existem
ensaios e blogs e tantos vídeos e há cursos inteiros realmente online apenas sobre a estruturação do seu javascript.
Então esse não é o foco.
E eu ainda realmente quero
apenas focar no conteúdo o código do HTML o javascript que o C avalia a lógica e a estrutura pode vir mais tarde.
Mas eu só quero que você esteja ciente de que existem outras formas de estruturar isso