![\"Photo](\"https://images.unsplash.com/photo-1599669550575-22795a95e36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80\" "\\"Architecture")
Photo by Pierre-Axel Cotteret on Unsplash
\nEstou lendo o livro Clean Code do Robert C. Martin, popularmente chamado de Uncle Bob, e estou exatamente no capítulo sobre as funções. E uma frase que me deixou inquieto durante a semana de estudos e no trabalho foi essa:
\nExatamente, simples, direto e que me causou um certo impacto na maneira de pensar. E venho tentado aplicar no meu dia-a-dia, seja no trabalho ou estudos pessoais. Você deve estar se perguntando, porque comecei falando sobre minhas leituras?
\nPorque busquei aplicar alguns dos aprendizados do livro no código que mostrarei a seguir.
\nPassei por um desafio interessante recentemente, eu precisava pegar o texto HTML de um editor, realizar uma requisição de um conjunto de palavras, e buscar cada uma delas dentro desse HTML. Essas palavras, eram de um dicionário, previamente cadastrado, em um cenário específico da regra de negócio. Provavelmente, você já deve ter percebido a divisão em um tipo de pseudocódigo na sentença acima. Então, vamos ao “Show me the code!“.
\nAparentemente, nada muito complicado - o que de fato, não é. Então vamos lá, vou passar por cada etapa do meu processo.
\nA estrutura de dados das palavras, e do HTML eram simples. Eu tinha uma estrutura de dados parecida com essa para as palavras:
\nconst dictionaryWords = [\n {\n word: \"Otorrinolaringologista\",\n title: \"Um tipo de médico.\"\n },\n {\n word: \"Clínico\",\n title: \"Um típo de médico\"\n }\n];Temos também, o próprio HTML, vindo do editor de texto.
\nconst html = \"<div><span>O clínico\ntambém é um Otorrinolaringologista</span>\n</div>\";Definido isso, sabemos que vamos precisar apenas do word do objeto e comparar com as palavras do HTML.
\nBusquei primeiro separar cada palavra do html e colocar em um array. Criei uma função para isso:
\nconst splitString = value => {\n value.split(\" \");\n};O split retorna um array, e seu primeiro parâmetro informa a regra de separação ou split dos elementos. No nosso caso, eu precisava de tudo que possuia um espaço em branco entre eles. Mas temos um problema, existem tags HTML dentro. Que no nosso caso, não é interessante para realizar a comparação de palavras.
\nFoi quando precisava de ajuda do RegEX para substituir cada tag HTML interna por vazio ou \"\". Então criei também uma função para fazer isso:
\nconst htmlStringReplacer = value => {\n value.replace(/<[^>]+>/g, \"\")\n };Com isso, pude substituir cada tag HTML por uma string vazia.
\nErick Elliot é um monstro do javascript, ele possui bastante conteúdo sobre Funcional programming e cursos relacionados. Mas comento dele aqui em específico de um vídeo do youtube dele, onde ele comenta sobre a simplicidade do código, o quanto isso é importante.\nE um trecho me chamou atenção, como ele utiliza dos reducers para criar soluções simples.
\n const pipe = (...functions) => value => {\n return functions.reduce((currentValue,\n currentFunction) => {\n return currentFunction(currentValue);\n }, value);\n};O método reducer abaixo, nos permite reduzir um output para apenas um valor de retorno.
\n Array<any>.reduce(callbackfn: (previousValue: any,\n currentValue: any, currentIndex: number,\n array: any[]) => any, initialValue: any): anyNos seus parâmetros, informamos o valor anterior previousValue e o valor atual currentValue, que neste momento, são informações mais relevantes para nosso cenário.\nNa função pipe acima, reduzimos o conjunto de funções com o spread operator e tratamos cada resultado da função separadamente, o output anterior da função passada é utilizado como parâmetro da função atual. Como se fosse uma pequena escada, onde subimos cada degrau, um passo de cada vez para chegar a um fim.
\nCom essa informação, podemos partir para o último passado do nosso desafio.
\n cont data = pipe(\n htmlStringReplacer,\n splitString)(html);As duas primeiras funções realizam o tratamento do dado html, onde a ordem importa, pois cada dado é passado, como passo a passo.\nO resultado do dado obtivo vem a seguir:
\n [\"O\", \"clínico\", \"também\", \"é\", \"um\",\n \"Otorrinolaringologista\"]Que é exatamente que estávamos buscando. Apenas as palavras e sem nenhum vestígio do HTML.
\nO grande ensinamento que retiro do pequeno desafio, é que podemos criar soluções com pequenas funções, e obter ótimos resultados, sem precisar criar elementos complexos, que podem tornar o trabalho confuso. Por hoje é isso, obrigado se leu até aqui.
\nGostou do conteúdo? Compartilha com seus amigo(a)s.
","timeToRead":4,"frontmatter":{"title":"Grandes soluções, pequenas funções","date":"October 20, 2020","description":"Passei por um desafio interessante recentemente, eu precisava pegar o texto HTML de um editor, realizar uma requisição de um conjunto de palavras, e buscar cada uma delas dentro desse HTML.","tags":["JAVASCRIPT"]}}},"pageContext":{"slug":"/grandes-soluções-pequenas-funções/","previous":{"fields":{"slug":"/1breakpoint/"},"frontmatter":{"title":"Breakpoint #1 - Front-end Mentors, Arquitetura CSS","tags":["CSS"]}},"next":{"fields":{"slug":"/2021-novo-ano-novos-desafios/"},"frontmatter":{"title":"2021 - Novo Ano, Novos Desafios","tags":["GERAL"]}},"language":"en","i18n":{"language":"en","languages":["pt","en"],"defaultLanguage":"pt","generateDefaultLanguagePage":false,"routed":true,"originalPath":"/writing/grandes-soluções-pequenas-funções/","path":"en/writing/grandes-soluções-pequenas-funções/"}}},"staticQueryHashes":["63159454"]}