배럴 모드: 가져오기 de mó dulos de forma elegante em JavaScript

소개

// Vue
import { defineComponent, reactive, computed } from 'vue';

// Angular
import { Router, Route, ActivatedRoute } from '@angular/router';

모도로스 수입

O 컨텍스트

// Navbar.vue

import Menu from './components/menu/Menu';
import MenuList from './components/menu/MenuList';
import MenuItem from './components/menu/MenuItem';
import MenuLink from './components/menu/MenuLink';
import Select from './components/select/Select';
import SelectList from './components/select/SelectList';
import SelectOption from './components/select/SelectOption';

// Navbar.vue

import {
  Menu,
  MenuList,
  MenuItem,
  MenuLink
} from './components/menu';

import {
  Select,
  SelectList,
  SelectOption
} from './components/select';

인공 유산

Analise naíntegrae veja que existe um arquivo index.ts exportando partes de router.A escolha do nome do arquivo nãoépor acaso.sistema de mó dulos, quando Referenceiamos uma pasta, ébuscado inicialmente por um arquivo index

Levando em conta,assim ficaria nossa pasta components em uma aplicaço Vue:

components
├── menu
│   │── Menu.vue
│   │── MenuList.vue
│   │── MenuItem.vue
│   │── MenuLink.vue
│   └── index.js <-- arquivo barrel
├── select
│   │── Select.vue
│   │── SelectList.vue
│   │── SelectOption.vue
│   └── index.js <-- arquivo barrel

Agora exportamos os componentes que desejamos:

// components/menu/index.js

export { default as Menu } from './Menu.vue';
export { default as MenuList } from './MenuList.vue';
export { default as MenuItem } from './MenuItem.vue';
export { default as MenuLink } from './MenuLink.vue';

빠르다.Ao acessarmos components/menu,o arquivo barrel(index.js)seráchamado e retronaráum merge dos objetos com nossos components,e então poderemos usar a desstruturaão para extrair o que realmente precisamos:

// Navbar.vue

import { Menu, MenuList } from './components/menu';

Melhorando a Aboradagem 회사

A abordagem acimaébem interestsante,porémébom ficar atento para nãexagerar no uso de barkes.Nós Não queremos ter muitos arquivos,pois issoécontraproducente e geralmente leva a problemas de dependencia circular queás vezes podem ser bem complados de resolver

O 추천cada mó dulo tenhaum arquivo barrel,delegando ao mesmo a responsibilidade de exportar as suas partes as convenients.API pública e ser response ável por encular o acesso de suas partes를 개발합니다.Caso a localizaão de uma interna seja alterada,aqueles que utilizam seu módulo não devem ser afetados

Sabendo disso,podemos colocar um arquivo barrel na raiz da pasta components e exportar suas partes internas de forma concentrada:

components
├── index.js
├── menu
│   └── ...
├── select
│   └── ...

Agora podemos exportar de duas formas:

개인, sendo assim, n ão éneces á rio um arquivo barrel em cada pasta interna referent a um componente(recomendado):

// components/index.js

export { default as Menu } from './menu/Menu.vue';
export { default as MenuList } from './menu/MenuList.vue';
export { default as MenuItem } from './menu/MenuItem.vue';
export { default as MenuLink } from './menu/MenuLink.vue';

export { default as Select } from './select/Select.vue';
export { default as SelectList } from './select/SelectList.vue';
export { default as SelectOption } from './select/SelectOption.vue';

Ou reaproveitando os arquivos barges e re exportando no arquivo barrel base do módulo:

// components/index.js

export * from './menu';
export * from './select';

최종 결과가 없음:

// Navbar.vue

import { Menu, MenuList, Select, SelectList } from './components';

Conseguimos acessar todos os nossos components apenas referenceanicando a 파스타 구성 요소.Não precisamos saber quais components estão lá,nem lembrar das subpastas que exportam algo.Tudo o que estáacessível para importar encontra se no arquivo barrel base(API pública do módulo)

Dica:se vocèusa o VSCode,apertandoCtrl+Spacedentro das chaves lheésugerido uma lista do queépossível importar:

A indecis ão 회사

provável que vocêtenha se perguntado a differença em utilizarexport * fromvsexport {} from.유럽연합에 대한 보고서: depende do contextoduas formas de exporta ão usadas처럼 각도/공유기를 하는 예는 없습니다.Preferencialmente,opte por exportaçes descriptivas,ou melhor dizendo,export explícito,assim podemos controlar melhor o que de fato queremos expor

export * fromadiciona um toque de“mágica”.Controlar o que estamos exportandoéum pouco mais difícil,jáque precisaremos ir no arquivo queére exportado para ter uma melhor noço que realmente estásendo exposto.Por outro lado,se vocêtem uma API muito bem definida,partes importantes do seu módulo que não são constantemente alteradas,éplausível utilizar esta forma“mágica”

Avalie o seu contexto e aplique como melhor planejar.Nãoéuma regra.Não terceize suas decisões

결론

Entendemos uma aboradagem para reduzir as repetiões em importaões,melhorar o compatilhamento de código entre módulos specializados,caminhos de arquivos e reduzir quebra de dependencias,e também uma forma mais elegante de manter nosso código

Portanto,este모드comcautela를 사용합니다.Hácontextos em que eleémuitoútil.O problema nãO estáno Barrel Pattern,e sim no mau uso do mesmo

참고

• https://basarat.gitbook.io/typescript/main-1/barrel
• https://medium.com/@adrianfaciu/barrel-files-to-use-or-not-to-use-75521cd18e65
• https://hackernoon.com/react-project-architecture-using-barrels-d086146eb0f6
• http://cangaceirojavascript.com.br/barrels-simplificando-importacoes-de-modulos/
• https://srinivasankk.com/javascript-barrel/

Soli Deo Gloria