før ES6 havde Javascript modulstyringssystemer såsom re .uirejs, CommonJS og Angular ‘ s afhængighedsindsprøjtningssystem. Andre værktøjer som bro .serify og itselfebpack selv har løst mange problemer i denne sammenhæng.
i 2015 havde vi en første implementering af modulsystemet i Vanilla Javascript til Node.js ved hjælp af require vi ved alle. Men dette er endnu ikke ankommet til bro .sere.
streng tilstand
før noget, vi har brug for at tale lidt om streng tilstand., Uden det kan vi ikke tale absolut ingenting om moduler.
streng tilstand er aktiveret som standard, når vi arbejder med ES6-moduler, hvis du stadig ikke ved, hvad streng tilstand er, vil jeg give en grundlæggende introduktion.,ad6″>, i påberåbelse af metoder er ikke længere tvunget til at lave en Object
det er Ikke muligt at bruge fn.caller og fn.arguments for at få adgang til stakken, JavaScript
reserverede Ord (som f.eks. protectedstaticinterface), ikke lider af en bind
Hvis du ikke fik en anelse om, du er formodes for at bruge i 'use strict', i alle de rigtige steder, er det ved at blive standard i ES6, er det stadig en god ide at bruge 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, funktioner og alt fra, at modulet findes kun i anvendelsesområdet for dette modul, hvilket betyder, at enhver variabel, der er erklæret inden for et modul, er ikke tilgængelige for andre moduler (medmindre de udtrykkeligt er eksporteret som en del af API, og senere importeret ind i det modul, der bruger dem).,
Eksport standard
du Kan simulere opførslen af en CommonJS dybest set, at erstatte module.exports af export default:
Syntaks modul
på Den anden side af moduler i CommonJS de erklæringer, der er i export, kan kun placeres på øverste niveau i din kode, og ikke i nogen del af det., Vi antager, at denne begrænsning eksisterer for at gøre livet lettere for tolke, når de skal identificere moduler, men når man ser på det, er det en meget gyldig begrænsning, fordi der ikke er mange gode grunde til, at vi definerer dynamisk eksport inden for vores API-funktioner.
en anden grund til dette kan findes i snak om vores kære ven Williamilliam Grasel under Intercon 2017, på performanceeb app ydeevne (som kan findes her).,
han siger, at en af måderne til at udvide dens ydeevne er ved at bruge moduler, det skyldes, at modulerne er kompileret statisk, og før din kode endda overgår til bro .serfortolkeren (som f.eks. På denne måde er det kun muligt at udtrække de dele af koden, der faktisk bruges i applikationen i stedet for at importere hele modulet, og dette ville kun være muligt, hvis modulerne blev erklæret på øverste niveau, fordi alt inde i en funktion ville blive noget dynamisk, ikke statisk.,
opkaldt Eksport
i CommonJS vi kan blot oprette variabel bindinger direkte i module.exportsder vil så have de egenskaber, der opdateres i realtid:
module.exports.foo = 'bar'
vi kan gentage denne adfærd ved hjælp af navngivne eksport syntaks. I stedet for at tildele værdien til module.exports, kan vi erklære alle variabler, vi vil eksportere.,
Bemærk, at nedenstående kode er ikke at være sager med henblik på at indhente erklæringen af en variabel til en enkelt række (og derefter bruge det i en export foo), vil det give os en fejl i syntaksen, men, mere og mere ES6 til statisk analyse i stedet for kontanter strømme, dynamisk:
export var foo = 'bar'
det Er vigtigt at huske på, at vi er exportanto bindings, der er ingen værdier.
bindinger., Ikke værdier
et vigtigt punkt at bemærke er, at moduler i ES6 ikke eksporterer værdier eller referencer, men snarere bindingerne af variabler. Dette betyder i praksis, at en variabel, der hedder foo, som eksporteres, vil have et link til modulets foo, og de værdier, der er tildelt dem, vil blive underlagt værdiændringerne i foo.,=”ef1b1c4fb0″>,
, og Eksportere lister
Som du kan se nedenfor, moduler i ES6 lad exportemos lister over de medlemmer, der er udpeget til det øverste niveau:
Eksport lister
Hvis du foretrækker at eksportere det til noget med et andet navn, som du kan bruge i export { foo as fuz }, som vist nedenfor:
i Tillæg til dette, kan du angive noget i denne default, når listerne er navngivet., Nedenstående kode er det samme som at gøre en export default foo og efter export bar, men det er i en unik position:
export { foo as default, bar }
men det er en god idé at bruge bare en export default ved slutningen af filen.
bedste praksis i overensstemmelse med eksporten
alle mulighederne for at eksportere modulet vil introducere en hel del forvirring i folks sind. I de fleste tilfælde opfordres det til kun at bruge en export default (og gør dette kun i slutningen af modulet)., Derefter kan du importere API ‘ en som navnet på selve modulet.
fordelene er:
grænseflade, der er eksporteret bliver meget tydeligt, snarere end at skulle se til, hvor vi eksportere interface inde i modulet.
du skaber ikke forvirring om, hvor du skal bruge et export default eller en navngivet eksport (eller en liste over navngivne eksport). Prøv at holde sig tilexport default
konsistens. I CommonJS er det normalt at bruge en enkelt metode i et modul., Gør dette med opkaldt eksport er umuligt, fordi du vil være at udsætte et objekt med en metode inde, medmindre du brugeras defaultexport liste. Har allerede export default, som er den mest alsidige, fordi du kun kan eksportere en ting.
Brug
bliver til import hurtigere
Import
import, som er en pendant i export, det kan også bruges til at indlæse et modul fra den anden.,
først og fremmest afhænger modulerne af implementeringen af hvert sted. I øjeblikket ingen bro .ser implementerer en loader.
for at omgå, hvad der blev sagt ovenfor, det er muligt at bruge ressourcer såsom transpilers (som Babel), til at skrive ES6 kode, mens udviklingen hold af browsere bekymre sig om, hvordan at gøre indlæsning af moduler arbejde.
et cool eksempel er lodash., Den følgende linje indlæser simpelthen Lodash-biblioteket inde i vores modul. Det skaber dog ingen variabler. Det vil udføre enhver kode på det øverste niveau af Lodash.
import 'lodash'
før vi bevæger os på, en hurtig note:
import ligesom export er kun tilladt på det øverste niveau i modulet, og ikke inden for andre anvendelsesområder, sandsynligvis af samme grunde som jeg nævnte ovenfor.,
import defaults
i CommonJS vi har en import ved hjælp af require:
var _ = require('lodash')
for at importere en export default fra et andet modul ved hjælp af ES6 vi kun nødt til at vælge et navn. Syntaksen ændrer sig lidt, fordi du ikke importerer selve objektet, men en bindende., Og dette gør det nemt for analyse:
import _ from 'lodash'
Uanset eksport opkaldt
syntaks er meget, der ligner den, der bruges ovenfor:
import { map, reduce } from 'lodash'
Det er meget lig den destruktureringsdeklaration opgave, som vi har i de nye specifikationer.,navnet import, med eksport til standarder uden brug af nøglerne (men desværre vil du ikke være i stand til at give et alias til dem.
at Blande alle
Se venligst vores import af mønstre, der kan vises på ydersiden af nøglen.
Importerer alle
Hvis du ønsker at importere namespace af et modul., I modsætning til den navngivne import eller standardindstillinger importerer den alt.
Bemærk, at syntaksen nedenfor skal følges af et alias, hvor alle bindinger vil blive placeret. (Eksport til standarder skal placeres i alias.default):
import * as _ from 'lodash'
bindende _.default vil være indholdet af export default LoDash
Konklusion
Sørg for at følge flere af mine indhold på min blog, og tilmeld dig til nyhedsbrevet for at modtage ugentlige nyheder!,
med dette lukker vi en anden vejledning om ES6! Jeg anbefaler stærkt at læse mere indhold om emnet og også uddybe, fordi dette er en specifikation, der skal ankomme i alle bro !sere og skal bruges til at optimere alt, hvad vi har i dag!,
et Par ressourcer bacanas são:
Livro cangaceiro JavaScript
Livro SS6
Kursus SS6 gøre William Justen
Kursus SS6 kom Webpack do José Bernardo Cunha
PonyFoo (de onde eu tirei muito gøre materiale deste artigo, hovedsagelig os exemplos)
Side gøre MDN på import
Blog 2ality på moduler (de onde veio também algum materiale deste artigo)