Nesta lição, vamos dar uma olhada em refatorando nosso código e documentando-o. E há boas notícias aqui. Se chegarmos a este ponto, pode significar que estamos perto ao final do que temos que fazer para o código, ou pelo menos essa iteração por meio de o que temos que fazer para o código. Então, algumas dessas coisas provavelmente vão soar como o bom senso, mas em minha carreira de consultoria e programação Eu descobri que às vezes o bom senso não é tão comum. Então, se você já conhece essas coisas, ótimo para você. Em primeiro lugar, queremos olhar maneiras de anexar manipuladores de eventos e todos nós adquirimos hábitos de codificação, certo? O problema aqui com esses dois manipuladores de eventos é que queremos fazer duas coisas diferentes quando alguém clica em um botão específico. O problema com a maneira como o fizemos é um destes vai sobrescrever o outro por causa da maneira como fizemos a atribuição do evento, então realmente queremos evitar isso e espero que não venha para o estágio de refatoração antes de descobrirmos isso. Mas se isso acontecer, então vamos mudar isso para algo diferente. Por exemplo, se você tiver jQuery, pode usar no. Se você estiver usando JavaScript normal você pode adicionar um ouvinte de evento. Isso garante que quaisquer manipuladores adicionais não substitua os manipuladores anteriores como tínhamos lá. Até agora tudo bem. Novamente, talvez um tipo de conhecimento de bom senso. A próxima coisa é, e às vezes fico com o mesmo hábito, Eu entro em um método e não tenho certeza de quais coisas sobre um objeto específico em um método de que vou precisar. Perceba que tenho nomes espalhados por lá em algumas configurações diferentes e sinto que, ao refatorar o que realmente quero fazer é voltar e tornar o código mais sucinto, ou pelo menos menos suscetível aos meus erros de digitação porque eu sou um grande em jQuery de apenas fazer isso e esquecer o sinal de libra e então meu código não funciona. Então, se eu fosse mudar isso, Vou apenas criar variáveis. Então, esta é a caixa suspensa então posso apenas fazer o índice selecionado ou posso juntar em um jQuery, encontre e obtenha a opção selecionada e fazer a pré-pendência quando estiver pronto para colocar algo lá. Então, apenas algumas dicas rápidas aqui em apenas se salvar de si mesmo. Que tal isso? A próxima coisa pode parecer elementar, mas o que não queremos fazer é acabar com algum tipo de arquivo de script separado onde nós basta despejar um monte de funções lá. Normalmente você o verá chamado de nosso arquivo utils, certo, porque não sabemos mais como chamá-lo. Aqui vai uma dica. Se você não tem um nome verdadeiro e claro qual é o seu arquivo, então você provavelmente tem muita coisa despejada em um arquivo. Portanto, há apenas alguns aqui, mas eu tenho adicionar e subtrair e multiplicar, e então aqui está o problema também, que está lá fora no namespace global porque tenho outro suplemento no arquivo deste cliente e se estou usando os dois na mesma página, agora eu tenho um conflito. Então, no que diz respeito a este, uma das coisas que podemos fazer é apenas colocar isso em um módulo. E também podemos explorar apenas colocá-lo em uma classe também. Mas com módulos JavaScript, isso dá a você a opção de apenas exportar certas funções e você não está colocando as coisas lá fora no namespace global ou pelo menos é uma construção mais fácil para ter certeza de que você não o faz. Então, eu tinha tudo isso aqui, por exemplo, some, subtraia e multiplique. E outra coisa que vejo quando vejo isso é, você sabe, todos eles têm o mesmo conjunto de parâmetros. Se você está tendo essa situação, o que você pode querer olhar está transformando isso em um objeto ao invés porque queremos que nossa lista de parâmetros seja tão concisa quanto possível, especialmente aqueles de vocês que vêm do mundo funcional, isso certamente é uma preocupação. Então, talvez se tivermos todos esses e eles estão presos em uma aula de utilitários com um monte de outro código que talvez não devesse estar lá, vamos apenas colocar isso em outro lugar. Então eu criei uma classe chamada ops de matemática, e, novamente, estes não são inovadores operações de tipo matemático, são muito simples, mas estou tentando demonstrar mais um ponto sobre como podemos criar nossa funcionalidade sem ter que tê-lo disponível no namespace global. Agora eu tenho essa aula chamada ops de matemática isso requer um construtor, mas observe que cada um dos somar e subtrair e os métodos de multiplicação agora levam um único parâmetro chamado triplo, e o que criei para apoiar isso é apenas outra classe chamada tripla e valida que essas coisas são números a fim de criá-lo e vai em frente e dá a eles seus valores para que eu possa passar aqueles lá. Agora também queria falar um pouco sobre documentação. Agora você pode notar que tenho alguns comentários extras lá com alguns tokens extras e esta é uma maneira para documentar seu código e é um pacote chamado JS doc. Você pode obtê-lo em vários lugares. O lugar de onde o obtive é o NPM aqui, então, se você ainda não tem, é uma questão simples de ir para a linha de comando e fazer uma instalação NPM do JS doc. Assim que tiver esse pacote, agora você pode começar a criar esses comentários. E na verdade, se você quiser, você nem mesmo precisa digitar tudo isso. Posso tentar este aqui, por exemplo. Se eu simplesmente fizer isso, lá vamos nós, a barra e dois asteriscos, ele vai realmente ler a assinatura da função para mim e meio que construir o início dessa documentação. Agora, o que fiz com eles é que especifiquei o tipo de dados do parâmetro e também o tipo de dados do que volta. O resto é apenas uma descrição. E o que vamos fazer é construir uma página de documentação e isso vai aparecer aqui. Então, podemos simplesmente colocar um texto arbitrário logo depois de qualquer coisa aqui e isso irá construir as páginas HTML quando voltarmos para a linha de comando e crie isso. E no que diz respeito ao básico, o parâmetro é apenas, você pode colocar os nomes lá, e novamente, qualquer descrição que você quiser. Não sei se preciso disso ou não, mas você sabe, é assim com os comentários. Enquanto o estamos lendo, pensamos, bem, sabemos exatamente o que é, mas como voltamos algum tempo depois ou como outra pessoa usa nosso código, provavelmente uma boa ideia colocar isso lá. Portanto, designei isso como um construtor. Existem informações sobre todos os parâmetros. Isso aparecerá como uma descrição e qualquer coisa que retorne um valor marcamos como retornos com o tipo. Agora, se você vai criar documentação para arquivos diferentes, você também pode usar isso para criar um link nas páginas HTML que você cria para que as pessoas possam navegar de um para o outro. Agora, essas classes estão fortemente acopladas neste ponto e assim nesta página, eu quero dar um link à documentação para triplos e triplos Dou um link para as operações de matemática. Portanto, você pode fazer o quanto quiser. E se você voltar para sua linha de comando, vamos fazer JS doc e então preciso dizer aonde ir a fim de obter arquivos para construir, e, opcionalmente, também posso dizer onde colocar os arquivos quando ele os constrói. Então, para este projeto, Eu só vou deixar fazer o que quiser até onde vai colocar esses arquivos. Mas eu queria pegar a documentação de tudo que está aqui nos scripts. Então, qualquer coisa que eu tenha documentação, vou pegar uma página para, caso contrário, ele simplesmente irá ignorá-lo. E o melhor resultado aqui, lá vamos nós, é que eu faço isso e só recebo o prompt de comando de volta. Portanto, devo ter uma pasta de saída. Aí está. Esse é o padrão que ele cria em meu aplicativo e posso obter tudo isso por meio de index dot HTML. Portanto, há as classes que está documentando. Eu não fiz nenhuma descrição na página básica, mas há operações matemáticas. Aqui está meu construtor. Existe cada um dos métodos. Ele me diz onde está no código e posso usar esse link para navegar para a outra aula e você pode ver que eu não fiz descrições para tudo, mas quando eu faço isso aparece bem ali. Portanto, uma boa maneira prática de fazer a documentação. É só fazer alguns comentários e todos nós sabemos disso, é mais fácil se você fizer no momento em que você está criando, não fazendo isso mais tarde. Obrigado por assistir. Em nossa próxima lição, vamos falar sobre agrupamento e minimização enquanto nos preparamos para enviar nosso produto.
