Hvordan ta med en JavaScript -fil i en annen JavaScript -fil

Mens han utvikler nettsteder, oppretter utvikleren mer enn en JavaScript -fil for forskjellige funksjonaliteter som hjelper til med å forbedre et nettstedets generelle ytelse eller applikasjon. Det kan også organiseres og administreres lettere. Ved å inkludere en JavaScript -fil i en annen fil, kan koden i den filen gjenbrukes flere steder. Noen ganger må programmerere for eksempel ringe hvilken som helst funksjon fra en annen fil eller få tilgang til noen variabler, noe som kan bidra til å forhindre variabel navnekonflikter.

Denne artikkelen vil demonstrere metodene for å inkludere/legge til en JS -fil i en annen JS -fil.

Hvordan ta med en JavaScript -fil i en annen JavaScript -fil?

For å inkludere/legge til en JavaScript -fil i en annen JavaScript -fil, bruk følgende måter:

• Ved hjelp av "" stikkord
• Ved hjelp av "import”Uttalelse

Metode 1: Ta med en JavaScript -fil i en annen JavaScript -fil ved hjelp av "" -merket

Før ES6 -moduler ble JavaScript -filene lagt til i andre JavaScript -filer ved å lage en "manus”Element i JavaScript -filen og bruke“src”Attributt for å legge til filens bane/beliggenhet.

Eksempel

I en HTML -fil, oppretter du et avsnitt med "

”Tag ved å tilordne en ID”tekst”For å skrive ut teksten på siden fra JavaScript:

Opprett en JavaScript -fil “Jsfile.JS”Som vil bli lagt til i den viktigste JavaScript -filen. I denne filen, skriv en kode for å skrive ut teksten på websiden ved å bruke "indrehtml”Eiendom:

dokument.getElementById ("tekst").indrehtml = 'hei jeg er Jsfile.JS lagt til i hoved JavaScript -filen ved hjelp av manus stikkord';

I “”Tag i HTML -filen eller hoved JavaScript -filen, opprett først en variabel”manus”:

var manus = dokument.CreateElement ('Script');

Nå, legg til filstien ved å bruke "src”Attributt/eiendom og legg den deretter til som barn i“hode" stikkord:

manus.src = "./Jsfile.JS ";
dokument.hode.vedlegg (manus);

Det kan sees at “Jsfile.JS”Er lagt til i den viktigste JavaScript -filen når den skriver ut teksten på websiden:

Metode 2: Inkluder en JavaScript -fil i en annen JavaScript -fil ved å bruke "import" -uttalelse

I ES6 -moduler introduseres import/eksportoppgaven for å legge til filen i en annen JavaScript -fil. Dette er en moderne metode støttet av de fleste moderne nettlesere. Den lar deg importere en JavaScript -fil som en modul, som deretter kan brukes i importfilen.

Eksempel

Importere “Jsfile.JS”I den viktigste JavaScript -filen eller“” Merk i en HTML -fil ved å bruke "import”Nøkkelord:

Produksjon

Noen ganger trenger programmerere å importere bare en funksjon i stedet for en komplett fil, for det, sjekk ut vår andre "eksportfunksjon i JavaScript" dedikert innlegg.

Merk: Å inkludere en fil i en annen fil i node.JS, "krever () ” metoden brukes. Den tillater import av en JavaScript -fil som en modul, som deretter kan brukes i importfilen som følger:

const module = krever ('./Jsfile.JS ');

Det handler om å inkludere den ene JavaScript -filen i en annen fil.

Konklusjon

For å inkludere en JavaScript -fil i en annen JavaScript -fil, bruk "”Tag ved å lage et nytt“ skript ”-element i JavaScript ved å bruke“CreateElement”Attributt eller“import”Uttalelse. Moderne nettlesere støtter "import" -uttalelsen, mens "skript" -merket er en gammel metode for å inkludere en JavaScript -fil til en annen fil. Denne artikkelen demonstrerte metodene for å inkludere/legge til en JS -fil i en annen fil.