Stare wersje JavaScript nie importowały, nie zawierały ani nie wymagały, dlatego opracowano wiele różnych podejść do tego problemu.
Ale od 2015 r. (ES6) JavaScript ma standard modułów ES6 do importowania modułów w Node.js, który jest również obsługiwany przez większość nowoczesnych przeglądarek .
W celu zapewnienia zgodności ze starszymi przeglądarkami można używać narzędzi do budowania, takich jak Webpack i Rollup, i / lub narzędzi do transpozycji, takich jak Babel .
Moduły ES6
Moduły ECMAScript (ES6) są obsługiwane w Node.js od wersji 8.5, z --experimental-modulesflagą, i od co najmniej Node.js wersji 13.8.0 bez flagi. Aby włączyć „ESM” (w porównaniu z poprzednim systemie modułu CommonJS stylu node.js za [ „CJS”]) użyć albo "type": "module"w package.jsonlub dać pliki z rozszerzeniem .mjs. (Podobnie moduły napisane przy użyciu poprzedniego modułu CJS Node.js można nazwać, .cjsjeśli domyślnym jest ESM.)
Używanie package.json:
{
"type": "module"
}
Następnie module.js:
export function hello() {
return "Hello";
}
Następnie main.js:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
Używając .mjsbędziesz miał module.mjs:
export function hello() {
return "Hello";
}
Następnie main.mjs:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
Moduły ECMAScript w przeglądarkach
Przeglądarki mają obsługę bezpośredniego ładowania modułów ECMAScript (nie są wymagane żadne narzędzia, takie jak Webpack) od Safari 10.1, Chrome 61, Firefox 60 i Edge 16. Sprawdź bieżącą obsługę w caniuse . Nie ma potrzeby używania .mjsrozszerzenia Node.js ; przeglądarki całkowicie ignorują rozszerzenia plików w modułach / skryptach.
<script type="module">
import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}
Czytaj więcej na https://jakearchibald.com/2017/es-modules-in-browsers/
Dynamiczne importowanie w przeglądarkach
Dynamiczne importowanie pozwala skryptowi ładować inne skrypty w razie potrzeby:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Czytaj więcej na https://developers.google.com/web/updates/2017/11/dynamic-import
Wymagane są pliki Node.js
Starszym stylem modułu CJS, wciąż szeroko stosowanym w Node.js, jest module.exports/require system.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
Istnieją inne sposoby włączania przez JavaScript zewnętrznych treści JavaScript w przeglądarkach, które nie wymagają wstępnego przetwarzania.
Ładowanie AJAX
Możesz załadować dodatkowy skrypt z wywołaniem AJAX, a następnie użyć go evaldo uruchomienia. Jest to najprostszy sposób, ale jest ograniczony do Twojej domeny ze względu na model bezpieczeństwa piaskownicy JavaScript. Korzystanie evalrównież otwiera drzwi do błędów, włamań i problemów bezpieczeństwa.
Pobierz ładowanie
Podobnie jak w przypadku dynamicznych importów, możesz załadować jeden lub wiele skryptów z fetchwywołaniem, używając obietnic do kontrolowania kolejności wykonywania zależności skryptów za pomocą biblioteki 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)}`)
})
Ładowanie jQuery
JQuery biblioteki zapewnia funkcjonalność ładowania w jednej linii :
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
Dynamiczne ładowanie skryptu
Możesz dodać tag HTML ze skryptu URL do HTML. Jest to idealne rozwiązanie, aby uniknąć narzutów związanych z jQuery.
Skrypt może nawet znajdować się na innym serwerze. Ponadto przeglądarka ocenia kod. <script>Znacznik może być wstrzykiwany do każdej strony internetowej <head>, lub włożona tuż przed zamykającym </body>tagiem.
Oto przykład, jak to może działać:
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 funkcja doda nowy <script>znacznik na końcu sekcji nagłówka strony, gdzie srcatrybut jest ustawiony na adres URL podany funkcji jako pierwszy parametr.
Oba te rozwiązania zostały omówione i zilustrowane w JavaScript Madness: Dynamic Script Loading .
Wykrywanie, kiedy skrypt został wykonany
Teraz jest duży problem, o którym musisz wiedzieć. Oznacza to, że zdalnie ładujesz kod . Nowoczesne przeglądarki internetowe załadują plik i wykonają bieżący skrypt, ponieważ ładują wszystko asynchronicznie, aby poprawić wydajność. (Dotyczy to zarówno metody jQuery, jak i metody ręcznego dynamicznego ładowania skryptów.)
Oznacza to, że jeśli użyjesz tych sztuczek bezpośrednio, nie będziesz mógł użyć nowo załadowanego kodu w następnym wierszu po tym, jak poprosiłeś o jego załadowanie , ponieważ nadal będzie się ładował .
Na przykład: my_lovely_script.jszawiera 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
Następnie ponownie ładujesz uderzanie strony F5. I to działa! Zagmatwane...
Co z tym zrobić?
Możesz użyć hacka, który autor sugeruje w linku, który ci podałem. Podsumowując, dla osób, którym się spieszy, używa zdarzenia do uruchomienia funkcji zwrotnej po załadowaniu skryptu. Możesz więc umieścić cały kod za pomocą biblioteki zdalnej w funkcji wywołania zwrotnego. Na przykład:
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);
}
Następnie piszesz kod, którego chcesz użyć PO załadowaniu skryptu do funkcji lambda :
var myPrettyCode = function() {
// Here, do whatever you want
};
Następnie wykonujesz to wszystko:
loadScript("my_lovely_script.js", myPrettyCode);
Zauważ, że skrypt może zostać wykonany po załadowaniu DOM lub wcześniej, w zależności od przeglądarki i tego, czy podałeś wiersz script.async = false;. Ogólnie jest świetny artykuł na temat ładowania Javascript .
Scalanie / przetwarzanie wstępne kodu źródłowego
Jak wspomniano na początku tej odpowiedzi, wielu programistów używa w swoich projektach narzędzi do kompilacji / transpilacji, takich jak Parcel, Webpack lub Babel, co pozwala im korzystać z nadchodzącej składni JavaScript, zapewniać zgodność wsteczną dla starszych przeglądarek, łączyć pliki, minimalizować, wykonać dzielenie kodu itp.