Kako uključiti JavaScript datoteku u drugu

Mia Chevalier

Utorak, 11. lipnja 2024. u 22:43:09

Razumijevanje uključivanja JavaScript datoteke
Kada radite na složenim web projektima, možda ćete morati uključiti jednu JavaScript datoteku u drugu. Ova praksa pomaže u modularizaciji vašeg koda, čineći ga lakšim za održavanje i organiziranijim.
Slično direktivi @import u CSS-u, JavaScript pruža načine za postizanje ove funkcionalnosti. U ovom ćemo članku istražiti različite metode za uključivanje jedne JavaScript datoteke u drugu i raspravljati o najboljim postupcima za to učinkovito.

Naredba Opis

export Koristi se za izvoz funkcija, objekata ili primitiva iz zadane datoteke ili modula u ES6.

import Koristi se za uvoz funkcija, objekata ili primitiva koji su izvezeni iz vanjskog modula, druge skripte.

createElement('script') Stvara novi element skripte u DOM-u za dinamičko učitavanje skripte.

onload Događaj koji se aktivira kada se skripta učita i izvrši.

appendChild Dodaje čvor kao posljednje dijete navedenog nadređenog čvora, koji se ovdje koristi za dodavanje skripte u glavu.

module.exports CommonJS sintaksa koja se koristi za izvoz modula u Node.js.

require CommonJS sintaksa koja se koristi za uvoz modula u Node.js.

Naredba	Opis
export	Koristi se za izvoz funkcija, objekata ili primitiva iz zadane datoteke ili modula u ES6.
import	Koristi se za uvoz funkcija, objekata ili primitiva koji su izvezeni iz vanjskog modula, druge skripte.
createElement('script')	Stvara novi element skripte u DOM-u za dinamičko učitavanje skripte.
onload	Događaj koji se aktivira kada se skripta učita i izvrši.
appendChild	Dodaje čvor kao posljednje dijete navedenog nadređenog čvora, koji se ovdje koristi za dodavanje skripte u glavu.
module.exports	CommonJS sintaksa koja se koristi za izvoz modula u Node.js.
require	CommonJS sintaksa koja se koristi za uvoz modula u Node.js.

Kako učinkovito uključiti JavaScript datoteke

Pružene skripte pokazuju različite metode uključivanja jedne JavaScript datoteke u drugu. Prvi primjer koristi i izjave, koje su dio sustava modula ES6. Pomoću u file1.js, mi izrađujemo dostupna za druge datoteke za uvoz. U , the izjava donosi greet u skriptu, omogućujući nam da je pozovemo i zapišemo poruku na konzolu.

Drugi primjer pokazuje kako dinamički učitati JavaScript datoteku pomoću metoda. Izradom elementa skripte i postavljanjem njegove URL-u vanjske JavaScript datoteke, možemo ga učitati u trenutni dokument. The događaj osigurava da je skripta potpuno učitana prije izvršavanja funkcije povratnog poziva. Treći primjer koristi CommonJS module u Node.js, gdje module.exports koristi se za izvoz funkcija iz , i koristi se u file2.js za uvoz i korištenje ove funkcije.

Uključivanje JavaScript datoteke u drugu koristeći ES6 module

Ovaj primjer pokazuje korištenje ES6 modula u JavaScriptu.

// file1.js
export function greet() {
  console.log('Hello from file1.js');
}

// file2.js
import { greet } from './file1.js';

greet();  // Output: Hello from file1.js

Dinamičko učitavanje skripte u JavaScriptu

Ova skripta prikazuje kako dinamički učitati JavaScript datoteku u preglednik pomoću vanilla JavaScripta.

// loader.js
function loadScript(url, callback) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  script.onload = function() {
    callback();
  };

  document.head.appendChild(script);
}

// main.js
loadScript('file1.js', function() {
  greet();  // Assuming greet is defined in file1.js
});

Korištenje CommonJS modula u Node.js

Ovaj primjer pokazuje kako uključiti JavaScript datoteku koristeći CommonJS u okruženju Node.js.

// file1.js
function greet() {
  console.log('Hello from file1.js');
}

module.exports = { greet };

// file2.js
const { greet } = require('./file1');

greet();  // Output: Hello from file1.js

Napredne tehnike za uključivanje JavaScript datoteke

Drugi pristup uključivanju JavaScript datoteke u drugu je korištenje alata za izradu kao što je Webpack. Webpack spaja više JavaScript datoteka u jednu datoteku, koja se može uključiti u vaš HTML. Ova je metoda korisna za velike projekte jer smanjuje broj HTTP zahtjeva i poboljšava vrijeme učitavanja. Webpack vam također omogućuje korištenje naprednih značajki poput dijeljenja koda i odloženog učitavanja, poboljšavajući performanse i korisničko iskustvo.

Osim toga, možete koristiti transpilere kao što je Babel za korištenje modernih JavaScript značajki u starijim preglednicima. Babel pretvara ES6+ kod u verziju JavaScripta koja je kompatibilna sa prethodnim verzijama. Konfiguriranjem Babela s Webpackom, možete pisati modularni i moderni JavaScript uz osiguravanje kompatibilnosti sa širokim rasponom okruženja. Ova postavka je idealna za razvoj robusnih web aplikacija koje se mogu održavati.

Kako mogu uključiti JavaScript datoteku u drugu?
Možeš koristiti i u ES6 modulima, u CommonJS ili dinamički učitavati s createElement('script').
Koja je korist od korištenja ES6 modula?
ES6 moduli pružaju standardizirani način uključivanja i upravljanja ovisnostima, poboljšavajući mogućnost održavanja i čitljivost koda.
Kako funkcionira dinamičko učitavanje skripte?
Dinamičko učitavanje skripte uključuje stvaranje a element, postavljanje svoje atribut i njegovo dodavanje u dokument, koji učitava i izvršava skriptu.
Mogu li koristiti ES6 module u starijim preglednicima?
Da, možete koristiti transpilere kao što je Babel za pretvaranje ES6 koda u ES5, čineći ga kompatibilnim sa starijim preglednicima.
Koja je razlika između i ?
koristi se u ES6 modulima, dok koristi se u CommonJS modulima, obično u Node.js okruženjima.
Kako alati za izradu poput Webpacka pomažu u uključivanju JavaScript datoteka?
Webpack spaja više JavaScript datoteka u jednu datoteku, smanjujući HTTP zahtjeve i poboljšavajući vrijeme učitavanja, te omogućuje napredne značajke poput dijeljenja koda.
Što je lijeno učitavanje u Webpacku?
Lijeno učitavanje je tehnika pri kojoj se JavaScript datoteke učitavaju na zahtjev, a ne pri početnom učitavanju stranice, čime se poboljšava izvedba.
Zašto bih trebao koristiti Babel s Webpackom?
Babel s Webpackom omogućuje vam pisanje modernog JavaScripta uz osiguravanje kompatibilnosti sa starijim okruženjima transpiliranjem koda.

Moderne tehnike za uključivanje JavaScript datoteka

Drugi pristup uključivanju JavaScript datoteke u drugu je korištenje alata za izradu kao što je Webpack. Webpack spaja više JavaScript datoteka u jednu datoteku, koja se može uključiti u vaš HTML. Ova je metoda korisna za velike projekte jer smanjuje broj HTTP zahtjeva i poboljšava vrijeme učitavanja. Webpack vam također omogućuje korištenje naprednih značajki poput dijeljenja koda i odgođenog učitavanja, poboljšavajući performanse i korisničko iskustvo.

Uključivanje jedne JavaScript datoteke u drugu može se izvršiti različitim tehnikama kao što su korištenje ES6 modula, dinamičko učitavanje skripte i CommonJS modula. Svaka metoda pruža različite prednosti ovisno o slučaju upotrebe i okruženju. ES6 moduli nude standardizirani način upravljanja ovisnostima, dok dinamičko učitavanje skripte omogućuje fleksibilnost vremena izvođenja. CommonJS moduli posebno su korisni u Node.js okruženjima. Korištenje alata za izradu kao što je Webpack i transpilera kao što je Babel dodatno poboljšava proces, omogućujući razvojnim programerima stvaranje učinkovitih, modernih i kompatibilnih web aplikacija.