JavaScript - import (parent folder)

Olá Luiz, tudo bem com você?

Pelo que entendi da sua pergunta tem haver com esse método:

    set cliente(novoValor) {
        if (novoValor instanceof Cliente) {
            this._cliente = novoValor;
        }
    }

Que sem o import do Cliente deve estar te gerando um erro, correto?

Mas realmente, para importar será da maneira que você disse ter encontrado, no caso no começo de nosso arquivo teríamos que adicionar:

import { Cliente } from '../Cliente.js'

Dessa maneira o erro já era para sumir, pois agora temos o módulo do cliente importado :)

Na verdade a lógica vai ser sempre essa, o ../ indica voltar uma pasta, então se a sua hierarquia de pasta estiver:

• Conta
  • Conta.js
• Cliente.js

A maneira como foi feita o import já deve funcionar corretamente, e na verdade você vai ver muito assim no mundo javascript :)

Mas você disse que não funcionou, não foi um erro de escrita, ou a sua hierarquia de pastas não está diferente?

Qualquer coisa posta a maneira como você quis fazer, e como está organizado a suas pastas :)

Abraços e Bons Estudos!

Olá! Tinha um erro no código, e agora o " ../ " funcionou, obrigado!

Caso o path fique muito longo, qual a melhor prática? Seria colocar vários "../ " ? Não ficaria ruim de entender no projeto?

Então Luiz,

Ai vai depender de algumas coisas, acredito que voltar de 2~3 pastas: ../../../ não gere tanto desentendimento

Mas existem algumas bibliotecas que nos auxiliam quando começa a ficar complexas, que criam aliases que definimos, então normalmente iremos escrever em algum arquivo parecido como o package.json quais serão os nossos links, por exemplo:

"@conta": "./Conta"

E ai ao invés de fazer ../../../Conta/ContaCorrente.js para chegar na pasta, iremos indicar com @conta/ContaCorrente

A grande questão é que esse tipo de código passa por algum transformador, como por exemplo o Webpack, que normalmente utilizamos para escrever um código nas versões mais atuais do Javascript e ele fica responsável em gerar uma versão do mesmo código compátivel com diversos browsers, neste processo ele pode fazer a substituição com base no que definimos :)

Desta maneira o nosso código utilizado em produção pelos desenvolvedores estará com os atalhos, mas o gerado para colocar no ar estará da maneira correta com os imports longos :)

Mas isso é um conteúdo um pouco mais avançado, quando chegamos no Angular, React, percebemos que alguns imports utilizam dessa maneira para deixar mais simples!

Abraços :)

Obrigado pela explicação!

Era o que eu queria saber mesmo 😀