Ali v jeziku JavaScript obstaja nekaj podobnega kot @import
v CSS, kar omogoča vključitev datoteke JavaScript v drugo datoteko JavaScript?
Stare različice JavaScripta niso imele funkcij import, include ali require, zato so bili razviti številni različni pristopi k tej težavi. Od leta 2015 (ES6) pa ima JavaScript standard ES6 modules za uvoz modulov v Node.js, ki ga podpira tudi večina sodobnih brskalnikov. Za združljivost s starejšimi brskalniki je mogoče uporabiti orodja build in/ali transpilation.
Moduli ECMAScript (ES6) so v Node.js podprti od različice 8.5 z zastavico --experimental-modules
. Vse vključene datoteke morajo imeti končnico .mjs
.
// module.mjs
export function hello() {
return "Hello";
}
// main.mjs
import { hello } from 'module'; // or './module'
let val = hello(); // val is "Hello";
Brskalniki imajo podporo za neposredno nalaganje modulov ECMAScript (orodja, kot je Webpack, niso potrebna) od Safari 10.1, Chrome 61, Firefox 60 in Edge 16. Preverite trenutno podporo na spletnem mestu caniuse.
<script type="module">
import { hello } from './hello.mjs';
hello('world');
</script>
// hello.mjs
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
Več na https://jakearchibald.com/2017/es-modules-in-browsers/.
Dinamični uvozi omogočajo skripti, da po potrebi naloži druge skripte:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Več na https://developers.google.com/web/updates/2017/11/dynamic-import
Stari način uvoza modulov, ki se še vedno pogosto uporablja v Node.js, je sistem module.exports/require.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
Obstajajo tudi drugi načini za vključitev zunanjih vsebin JavaScript v brskalnike, ki ne zahtevajo predhodne obdelave.
S klicem AJAX lahko naložite dodatno skripto in jo nato za zagon uporabite eval
. To je najbolj enostaven način, vendar je zaradi varnostnega modela peskovnika JavaScript omejen na vašo domeno. Uporaba eval
prav tako odpira vrata hroščem, vdorom in varnostnim težavam.
Podobno kot pri dinamičnem uvozu lahko naložite eno ali več skript s klicem fetch
z uporabo obljub za nadzor vrstnega reda izvajanja odvisnosti skript z uporabo knjižnice Fetch Inject:
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
Knjižnica jQuery zagotavlja funkcionalnost nalaganja v eni vrstici:
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
V HTML lahko dodate oznako script z naslovom URL skripte. To je idealna rešitev, če se želite izogniti režijskim stroškom programa jQuery.
Skripta je lahko celo v drugem strežniku. Poleg tega brskalnik oceni kodo. Oznako <script>
lahko vstavite v <head>
spletne strani ali pa jo vstavite tik pred zaključno oznako </body>
.
Tukaj je primer, kako to lahko deluje:
function dynamicallyLoadScript(url) {
var script = document.createElement("script"); // create a script DOM node
script.src = url; // set its src to the provided URL
document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)
}
Ta funkcija bo dodala novo oznako <script>
na konec razdelka head strani, kjer bo atribut src
nastavljen na naslov URL, ki je funkciji podan kot prvi parameter.
Obe rešitvi sta obravnavani in prikazani v članku JavaScript Madness: Dynamic Script Loading.
Sedaj je treba vedeti za eno veliko težavo. To pomeni, da kodo naložite na daljavo. Sodobni spletni brskalniki bodo naložili datoteko in še naprej izvajali vašo trenutno skripto, saj zaradi izboljšanja zmogljivosti vse nalagajo asinhrono. (To velja tako za metodo jQuery kot za ročno dinamično nalaganje skript.)
To pomeni, da če te trike uporabite neposredno, ne boste mogli uporabiti novo naložene kode v naslednji vrstici po tem, ko ste jo zahtevali naložiti, saj se bo še vedno nalagala.
Na primer: my_lovely_script.js
vsebuje MySuperObject
:
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
var s = new MySuperObject();
Error : MySuperObject is undefined
Nato ponovno naložite stran s pritiskom na F5. In deluje! Zavajajoče... Tako, kaj naj storim v zvezi s tem? Uporabite lahko kramp, ki ga predlaga avtor na povezavi, ki sem vam jo dal. Če povzamemo, za ljudi, ki se jim mudi, uporabi dogodek za zagon povratne funkcije, ko se naloži skripta. Tako lahko vso kodo, ki uporablja oddaljeno knjižnico, vstavite v funkcijo povratnega klica. Na primer:
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
Nato kodo, ki jo želite uporabiti PO nalaganju skripte, zapišite v funkcijo lambda:
var myPrettyCode = function() {
// Here, do whatever you want
};
Nato vse to zaženete:
loadScript("my_lovely_script.js", myPrettyCode);
Upoštevajte, da se lahko skripta izvede po nalaganju DOM ali pred njim, odvisno od brskalnika in tega, ali ste vključili vrstico script.async = false;
. O tem piše v odličnem članku o nalaganju Javascripta na splošno.
Kot je omenjeno na začetku tega odgovora, številni razvijalci v svojih projektih uporabljajo orodja za sestavljanje/prepolnjevanje, kot so Parcel, Webpack ali Babel, ki jim omogočajo uporabo prihajajoče sintakse JavaScripta, zagotavljanje povratne združljivosti za starejše brskalnike, združevanje datotek, miniranje, izvajanje delitve kode itd.
Možno je dinamično ustvariti oznako JavaScript in jo dodati dokumentu HTML znotraj druge kode JavaScript. To bo naložilo ciljno datoteko JavaScript.
function includeJs(jsFilePath) {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = jsFilePath;
document.body.appendChild(js);
}
includeJs("/path/to/some/file.js");
Morda lahko uporabite to funkcijo, ki sem jo našel na tej strani Kako vključim datoteko JavaScript v datoteko JavaScript?:
function include(filename)
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';
head.appendChild(script)
}