før ES6, Javascript hadde modul kontroll systemer som RequireJS, CommonJS, og Kantete er dependency injection system. Andre verktøy som Browserify og Webpack selv har løst mange problemer i denne sammenheng.
i 2015 vi hadde en første gjennomføring av modul-system i Vanilje Javascript for Node.js bruke require vi alle vet. Men dette har ennå ikke kommet for nettlesere.
Strenge Modus
før noe vi trenger å snakke litt om Strenge Modus., Uten det kan vi ikke snakke absolutt ingenting om moduler.
strenge modus er aktivert som standard når vi arbeider med ES6 moduler, hvis du fortsatt ikke vet hva strenge modus er, jeg vil gi en grunnleggende innføring.,ad6″> i bruken av metoder er ikke lenger tvunget til å gjøre en Object
det er Ikke mulig å bruke fn.caller og fn.arguments, for å få tilgang stabelen, JavaScript
reservert Ord (for eksempel protectedstaticinterface) ikke lider av bind
Hvis du ikke har en anelse, du er ment til bruk i 'use strict', i alle de riktige stedene, det er blitt standard i ES6, det er fortsatt en god praksis å bruke det hver gang.,
Export
No modelo CommonJS podemos exportar valores atribuindo eles ao module.exports como no snippet abaixo:
Sintaxe atual
No ES6, os módulos são arquivos que dão export uma API (basicamente igual ao CommonJS)., De erklæringer, variabler, funksjoner og noe fra den modulen finnes bare i det omfang av modulen, noe som betyr at variabelen er deklarert innenfor en modul er ikke tilgjengelig for andre moduler (med mindre de er uttrykkelig eksporteres som en del av API, og senere importert til modul som bruker dem).,
Eksport-standard
du Kan simulere virkemåten til en CommonJS i utgangspunktet, skifte module.exports av export default:
Syntaksen modulen
på Den andre siden av modulene i CommonJS, de erklæringer i export, kan bare plasseres på øverste nivå i koden din, og ikke i noen del av det., Vi antar at denne begrensningen finnes for å gjøre livet lettere for tolk når de skal identifisere moduler, men, se på det, det er en veldig gyldig begrensning, fordi det er ikke mange gode grunner for oss å definere dynamiske eksport innen våre API-funksjoner.
en annen grunn for dette kan bli funnet i de snakker om vår kjære venn William Grasel under Intercon 2017, på web app ytelse (som kan bli funnet her).,
han sier at en av måtene å utvide sin ytelse ved å bruke moduler, dette fordi modulene er satt sammen moduler statisk lenket, og før koden selv går til nettleseren tolk (V8 som for eksempel). På denne måten er det mulig å trekke ut bare deler av koden som faktisk brukes i programmet i stedet for å importere hele modulen, og dette vil bare være mulig hvis modulene ble erklært på øverste nivå, fordi noe inni en funksjon ville bli noe dynamisk, ikke statisk.,
heter Eksport
i CommonJS vi kan ganske enkelt opprette variabel bindinger direkte i module.exportssom vil da ha egenskaper som oppdateres i sanntid:
module.exports.foo = 'bar'
vi kan gjenskape dette problemet ved å bruke navnet eksport syntaks. I stedet for å tilordne verdien til module.exports, kan vi deklarere variabler vi ønsker å eksportere.,
Merk at koden nedenfor er ikke å være refactored for å trekke ut deklarasjon av en variabel til en enkelt rad (og deretter bruke det i en export foo), vil det gi oss en feil i syntaksen, men mer og mer ES6 for statisk analyse i stedet for kontantstrømmer, dynamisk:
export var foo = 'bar'
det Er viktig å huske på at vi er exportanto bindings, det er ingen verdier.
Bindinger., Ikke verdier
et viktig punkt å merke seg er at moduler i ES6 ikke eksporterer verdier eller referanser, men heller bindinger av variabler. Dette, som i praksis betyr at en variabel som heter foo, som er eksportert, vil ha en link til den modulen foo variabel, og de verdier som er tilordnet til dem, vil være underlagt verdi endringer som er gjort i foo.,=»ef1b1c4fb0″>,
, og Eksport av lister
Som du kan se nedenfor, modulene i ES6 la exportemos lister over medlemmer utnevnt til øverste nivå:
Eksporter liste
Hvis du foretrekker å eksportere det til noe med et annet navn, som du kan bruke i export { foo as fuz }, som vist nedenfor:
i Tillegg til dette, kan du angi noe sånt som dette default når listene er navngitt., Koden nedenfor er det samme som å gjøre en export default foo og etter export bar, men det er i en unik posisjon:
export { foo as default, bar }
men det er en god idé å bare bruke en export default på slutten av filen.
Beste praksis i tråd med eksport
Alle av mulighetene for eksport av modulen vil introdusere ganske mye forvirring i hodet av folk. I de fleste tilfeller er det oppfordres til å bruke bare en export default (og bare gjøre dette på slutten av modulen)., Deretter kan du importere API som navnet på modulen.
fordelene er:
grensesnitt som er eksportert blir veldig tydelig, snarere enn å måtte se etter, hvor vi eksporterer grensesnittet inne i modulen.
du trenger ikke skape forvirring om hvor de skal bruke en export default eller en navngitt eksport (eller en liste over navngitte eksport). Prøv å holde seg tilexport default
konsistens. I CommonJS det er vanlig å bruke en enkelt metode i en modul., Gjør dette med navnet eksport er umulig fordi du vil være å eksponere en gjenstand med en metode som er inne i, med mindre du brukeras default iexport liste. Allerede export default, som er den mest allsidige, fordi du er i stand til å eksportere bare en ting.
Bruk
blir import raskere
Import
import, som er motpart i export, det kan også brukes til å laste inn en modul fra andre.,
først av alt, måten moduler er lastet avhenger av gjennomføringen av hvert enkelt sted. I øyeblikket ingen nettleser implementerer et loader.
for å omgå hva som ble sagt ovenfor, er det mulig å bruke ressurser som transpilers (som Babel), til å skrive ES6 koden mens utviklingen team av nettlesere bekymre deg for hvordan å gjøre innlasting av moduler arbeid.
en kul eksempel er lodash., Følgende linje bare laster Lodash bibliotek inne i vår modul. Men det betyr ikke skape noen variabler. Det vil utføre en kode på øverste nivå i Lodash.
import 'lodash'
før vi går videre, en rask merk:
import akkurat som export er bare tillatt på øverste nivå av modulen, og ikke i andre kikkertsikter trolig for de samme grunnene som jeg sa ovenfor.,
import av standarder
i CommonJS vi har en import ved hjelp av require:
var _ = require('lodash')
hvis du vil importere en export default fra en annen modul ved hjelp av ES6 vi trenger bare å velge et navn. Syntaksen endringer litt fordi du ikke importere selve objektet, men en bindende., Og dette gjør det enkelt for analyse:
import _ from 'lodash'
se bilder av eksporten navngitt
syntaksen er svært lik den som brukes ovenfor:
import { map, reduce } from 'lodash'
Det er svært lik den destructuring oppdrag, som vi har i den nye spesifikasjonen.,navnet import, med eksport til standarder uten bruk av tastene (men, akk, du kommer ikke til å være i stand til å gi et alias til dem.
Blande alle
vennligst Se vår import av mønstre kan vises på utsiden med nøkkelen.
Importere alle
Hvis du ønsker å importere navnerommet av en modul., I motsetning til den navngitte import eller standarder, er det import alt.
Merk at syntaksen nedenfor trenger å bli fulgt av et alias hvor alle bindinger vil bli plassert. (Eksport til standarder er å bli plassert i alias.default):
import * as _ from 'lodash'
bindende _.default vil være innholdet av export default LoDash
Konklusjon
Sørg for at du følger mer av innholdet mitt på bloggen min, og registrer deg for å motta vårt nyhetsbrev for å motta ukentlige nyheter!,
med dette er vi nær en annen guide på ES6! Jeg anbefaler å lese mer innhold på emnet, og også dypere fordi dette er en spec som er å komme i alle nettlesere, og må brukes til å optimalisere alt vi har i dag!,
et Par ressurser bacanas são:
Livro cangaceiro JavaScript
Livro SS6
Kurs SS6 gjøre William Justen
Kurs SS6 com Webpack do José Bernardo Cunha
PonyFoo (de onde eu tirei muito gjøre materialet deste artigo, hovedsakelig os exemplos)
Side gjøre MDN på import
Blogg 2ality på moduler (de onde veio também algum materiale deste artigo)