Există ceva în JavaScript similare cu `@import în CSS care vă permite să includeți un fișier JavaScript în interiorul un alt fișier JavaScript?
Versiunile vechi de JavaScript avut de import, includ, sau impune, atât de multe abordări diferite la această problemă au fost dezvoltate. Dar din moment 2015 (ES6), JavaScript a avut ES6 module standard de import module în Node.js, care este, de asemenea, susținută de cele mai moderne browsere. Pentru compatibilitatea cu browserele mai vechi, construi și/sau transpilation instrumente pot fi folosite.
ECMAScript (ES6) module au fost susținute în Node.js de v8.5, cu --experimentale-module de pavilion. Toate fișierele implicate trebuie să aibă
.mjs` extensie.
// module.mjs
export function hello() {
return "Hello";
}
// main.mjs
import { hello } from 'module'; // or './module'
let val = hello(); // val is "Hello";
Browsere au avut suport pentru încărcare ECMAScript module direct (fără instrumente, cum ar fi Webpack este necesar) deoarece Opera 10.1, Chrome 61, Firefox 60, și C 16. Verificați actual de sprijin la 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);
}
Citeste mai mult la https://jakearchibald.com/2017/es-modules-in-browsers/
Dinamica importurilor lasa scriptul încărca alte script-uri după cum este necesar:
<script type="module">
import('hello.mjs').then(module => {
module.hello('world');
});
</script>
Citeste mai mult la https://developers.google.com/web/updates/2017/11/dynamic-import
Stilul vechi de importul de module, încă utilizat pe scară largă în Node.js este module.exporturile/solicita de sistem.
// mymodule.js
module.exports = {
hello: function() {
return "Hello";
}
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"
Există și alte modalități pentru JavaScript pentru a include externe JavaScript conținutul în browserele care nu au nevoie de preprocesare.
Ai putea să încărcați un script suplimentar cu un apel AJAX și apoi utilizați "eval" să-l rulați. Acesta este cel mai simplu mod, dar nu este limitată la domeniul dvs. pentru a JavaScript nisip model de securitate. Folosind "eval", de asemenea, deschide usa la bug-uri, hack-uri și probleme de securitate.
Ca Dinamica Importurilor puteți să încărcați unul sau mai multe script-uri cu un "aport" apel utilizând promite pentru a controla ordinea de executie pentru script dependențe folosind Aduce Injecta bibliotecă:
fetchInject([
'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})
De jQuery biblioteca oferă funcționalitatea de încărcare într-o singură linie:
$.getScript("my_lovely_script.js", function() {
alert("Script loaded but not necessarily executed.");
});
Ai putea adăuga o etichetă script cu script-ul URL-ul în HTML. Pentru a evita costurile de jQuery, aceasta este o soluție ideală.
Script-ul poate chiar locuiesc pe un alt server. În plus, browser-ul evaluează cod. De <script> tag poate fi injectat într-fie pagina de web a
, sau introdus înainte de închiderea
tag.
Aici este un exemplu de cum ar putea funcționa:
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)
}
Această funcție va adăuga un nou <script> tag la sfârșitul secțiunea head a paginii, unde
src` atribut este setat la URL-ul care este dat de funcția ca primul parametru.
Ambele soluții sunt discutate și ilustrate în JavaScript Nebunie: Dinamic de Încărcare Script.
Acum, există o mare problemă trebuie să știi despre. A face care implică faptul că la distanță de încărcare codul. Browserele web moderne va încărca fișierul și să păstreze de executare curentă script pentru că au încărcat totul în mod asincron pentru a îmbunătăți performanța. (Acest lucru se aplică atât metoda jQuery și manualul dinamic script metodă de încărcare.)
Aceasta înseamnă că, dacă utilizați aceste trucuri direct, ai câștigat't fi capabil de a utiliza poze recent încărcate cod următoarea linie după ce a cerut să fie încărcate, pentru că va fi încă de încărcare.
De exemplu: my_lovely_script.js "conține" 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
Apoi reîncărcați pagina lovind F5. Și funcționează! Confuz... Deci, ce să fac ? Ei bine, puteți folosi hack autorul sugerează în link-ul l-am dat. În rezumat, pentru oameni într-o grabă, el foloseste un eveniment pentru a rula o funcție de apel invers, atunci când script-ul este încărcat. Astfel încât să puteți pune tot codul, folosind telecomanda de bibliotecă, în funcție de apel invers. De exemplu:
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);
}
Apoi scrii codul pe care doriți să utilizați DUPĂ scenariul este încărcat într-un funcția lambda:
var myPrettyCode = function() {
// Here, do whatever you want
};
Apoi executați toate că:
loadScript("my_lovely_script.js", myPrettyCode);
Rețineți că script-ul poate executa după DOM s-a incarcat, sau înainte de, în funcție de browser-ul și dacă ați inclus linie script-ul.async = false;
. Nu's a articol mare pe Javascript încărcare în general, care discută despre asta.
Așa cum am menționat în partea de sus a acest răspuns, mulți dezvoltatori de utilizare a construi/transpilation instrument(e) ca Coletul, Webpack, sau Babel în proiectele lor, permițându-le să folosească viitoare sintaxa JavaScript, oferă compatibilitate pentru browsere mai vechi, combina fișiere, minify, efectuați codul de divizare etc.
Dacă cineva este în căutarea pentru ceva mai avansat, încerca RequireJS. Te'll obține beneficii suplimentare, cum ar fi dependența de management, o mai bună concurență, și pentru a evita dublarea (care este, regăsirea un scenariu mai mult decât o dată).
Puteți scrie fișiere JavaScript în "module de" și apoi să faceți referire la ele ca dependențe în alte scripturi. Sau puteți folosi RequireJS ca un simplu "du-te pentru a primi acest script" soluție.
Exemplu:
Definirea dependențelor ca module:
some-dependency.js
define(['lib/dependency1', 'lib/dependency2'], function (d1, d2) {
//Your actual script goes here.
//The dependent scripts will be fetched if necessary.
return libraryObject; //For example, jQuery object
});
implementation.js este "principal" fișier JavaScript, care depinde some-dependency.js
require(['some-dependency'], function(dependency) {
//Your script goes here
//some-dependency.js is fetched.
//Then your script is executed
});
Extras din GitHub README:
RequireJS sarcini simple JavaScript fișiere, precum și mai definite module. Acesta este optimizat pentru browser-ul utilizat, inclusiv într-o rețea Lucrător, dar poate fi utilizat și în alte medii de JavaScript, cum ar fi Rinocer și Nod. Acesta pune în aplicare Asincron Modul API.
RequireJS foloseste simplu script tag-uri pentru a încărca module/fișiere, așa că ar trebui să permite pentru depanare ușoară. Acesta poate fi folosit pur și simplu pentru a încărca existente fișiere JavaScript, deci puteți adăuga la proiect existent, fără a fi nevoie de a re-scrie JavaScript fișiere.
...
Acolo de fapt is o modalitate de a încărca un fișier JavaScript nu asincron, astfel încât ai putea folosi funcțiile incluse în noul tău încărcat fișierul imediat după încărcare, și cred că acesta funcționează în toate browserele.
Aveți nevoie pentru a folosi jQuery.append()pe
$("head").append('<script type="text/javascript" src="' + script + '"></script>');
Cu toate acestea, această metodă are, de asemenea, o problemă: dacă se întâmplă o eroare la import fișier JavaScript, Firebug (și, de asemenea, Firefox Consola de Erori și Chrome Developer Tools la fel de bine) va raporta locul său incorect, care este o mare problemă dacă utilizați Firebug pentru a urmări erori JavaScript pe o mulțime (m). Firebug pur și simplu nu - 't știu despre poze recent încărcate de fișier pentru un motiv oarecare, astfel încât dacă apare o eroare în acel dosar, se raportează că aceasta a avut loc în principal HTML fișier, și veți avea probleme în a afla motivul real pentru eroare.
Dar dacă asta nu este o problema pentru tine, atunci această metodă ar trebui să funcționeze.
Am scris un plugin jQuery numit $.import_js() care folosește această metodă:
(function($)
{
/*
* $.import_js() helper (for JavaScript importing within JavaScript code).
*/
var import_js_imported = [];
$.extend(true,
{
import_js : function(script)
{
var found = false;
for (var i = 0; i < import_js_imported.length; i++)
if (import_js_imported[i] == script) {
found = true;
break;
}
if (found == false) {
$("head").append('<script type="text/javascript" src="' + script + '"></script>');
import_js_imported.push(script);
}
}
});
})(jQuery);
Deci tot ce trebuie sa faci pentru a importa JavaScript este:
$.import_js('/path_to_project/scripts/somefunctions.js');
Am făcut, de asemenea, un test simplu pentru acest lucru la Exemplu.
Acesta include un main.js dosarul în principal HTML și apoi, script-ul în main.js "utilizări"$.import_js()pentru a importa un fișier suplimentar numit
included.js`, care definește această funcție:
function hello()
{
alert("Hello world!");
}
Și imediat după, inclusiv included.js ul
, `hello () funcția este numit, și veți obține de alertă.
(Acest răspuns este un răspuns la e-satis' comentariu).
Un alt mod, care în opinia mea este mult mai curat, este de a face un sincron cerere Ajax în loc de a folosi un `<script> tag. Care este, de asemenea, cât Node.js include mânere.
Aici's un exemplu folosind jQuery:
function require(script) {
$.ajax({
url: script,
dataType: "script",
async: false, // <-- This is the key
success: function () {
// all good...
},
error: function () {
throw new Error("Could not load script " + script);
}
});
}
Puteți apoi să-l utilizați în codul tău ca pe tine'd folosesc, de obicei, include:
require("/scripts/subscript.js");
Și să fie capabil de a apela o funcție de necesar script în următoarea linie:
subscript.doSomethingCool();
Nu este o veste bună pentru tine. Foarte curând va fi capabil de a încărca codul JavaScript cu ușurință. Acesta va deveni un mod standard de a importa module de cod JavaScript și va fi parte din core JavaScript în sine.
Trebuie pur și simplu să scrie import cond de 'cond.js';
pentru a încărca un macro numit cond
dintr-un fișier cond.js
.
Așa că don't trebuie să se bazeze pe orice cadru JavaScript și nici nu aveți de a face în mod explicit Ajax apeluri.
Se referă la:
Este posibil pentru a genera dinamic un JavaScript tag-ul și adăugați-l la document HTML din interiorul altor cod JavaScript. Acest lucru va încărca vizate fișier 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");
Declarație import
este în ECMAScript 6.
Sintaxa
import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;
Poate puteți utiliza această funcție pentru că am găsit pe această pagină Cum să includă un fișier JavaScript într-un fișier 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)
}
Aici este un sincron versiunea fără jQuery:
function myRequire( url ) {
var ajax = new XMLHttpRequest();
ajax.open( 'GET', url, false ); // <-- the 'false' makes it synchronous
ajax.onreadystatechange = function () {
var script = ajax.response || ajax.responseText;
if (ajax.readyState === 4) {
switch( ajax.status) {
case 200:
eval.apply( window, [script] );
console.log("script loaded: ", url);
break;
default:
console.log("ERROR: script not loaded: ", url);
}
}
};
ajax.send(null);
}
Rețineți că pentru a obține acest lucru inter-domenii, server-ul va trebui să setați allow-origin
antet în răspunsul său.
Am scris acest cod JavaScript (folosind Prototip pentru DOM de manipulare):
var require = (function() {
var _required = {};
return (function(url, callback) {
if (typeof url == 'object') {
// We've (hopefully) got an array: time to chain!
if (url.length > 1) {
// Load the nth file as soon as everything up to the
// n-1th one is done.
require(url.slice(0, url.length - 1), function() {
require(url[url.length - 1], callback);
});
} else if (url.length == 1) {
require(url[0], callback);
}
return;
}
if (typeof _required[url] == 'undefined') {
// Haven't loaded this URL yet; gogogo!
_required[url] = [];
var script = new Element('script', {
src: url,
type: 'text/javascript'
});
script.observe('load', function() {
console.log("script " + url + " loaded.");
_required[url].each(function(cb) {
cb.call(); // TODO: does this execute in the right context?
});
_required[url] = true;
});
$$('head')[0].insert(script);
} else if (typeof _required[url] == 'boolean') {
// We already loaded the thing, so go ahead.
if (callback) {
callback.call();
}
return;
}
if (callback) {
_required[url].push(callback);
}
});
})();
Utilizare:
<script src="prototype.js"></script>
<script src="require.js"></script>
<script>
require(['foo.js','bar.js'], function () {
/* Use foo.js and bar.js here */
});
</script>
Sinteza: http://gist.github.com/284442.
Aici's generalizate versiune de cum Facebook nu pentru omniprezente Ca butonul:
<script>
var firstScript = document.getElementsByTagName('script')[0],
js = document.createElement('script');
js.src = 'https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js';
js.onload = function () {
// do stuff with your dynamically loaded script
snowStorm.snowColor = '#99ccff';
};
firstScript.parentNode.insertBefore(js, firstScript);
</script>
Dacă acesta lucreaza pentru Facebook, că va lucra pentru tine.
Motivul pentru care ne arata pentru prima script
element în loc de " șef " sau "corpul" este pentru că unele browsere nu't crea unul în cazul în care lipsește, dar am're garantate de a avea o script
element - asta. Citeste mai mult la http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/.
Dacă doriți, în pură JavaScript, puteți folosi document.scrie`.
document.write('<script src="myscript.js" type="text/javascript"></script>');
Dacă utilizați jQuery bibliotecă, puteți utiliza $.getScript
metoda.
$.getScript("another_script.js");
Puteți asambla, de asemenea, script-uri folosind PHP:
Fișier main.js.php
:
<?php
header('Content-type:text/javascript; charset=utf-8');
include_once("foo.js.php");
include_once("bar.js.php");
?>
// Main JavaScript code goes here
Cele mai multe dintre soluțiile prezentate aici implică dinamic de încărcare. Am fost în căutarea pentru un compilator care să adune toate depins fișiere într-un singur fișier de ieșire. La fel ca Mai/Sass preprocesoare face cu CSS `@import la regula. De când am't găsi ceva decent de acest fel, am scris un instrument simplu de a rezolva problema.
Deci, aici este compiler, https://github.com/dsheiko/jsic, care înlocuiește `$de import("fișier-calea") cu fișierul solicitat conținut în condiții de siguranță. Aici este corespunzătoare Plânge plugin: https://github.com/dsheiko/grunt-jsic.
Pe jQuery ramura master, ei pur și simplu înlănțui atomice fișierele sursă într-un singur începând cu intro.jsși se termină cu
outtro.js`. Asta nu't mi se potriveste, deoarece nu oferă flexibilitate în codul sursă design. Check out cum funcționează cu jsic:
src/main.js
var foo = $import("./Form/Input/Tel");
src/Form/Input/Tel.js
function() {
return {
prop: "",
method: function(){}
}
}
Acum putem rula compiler:
node jsic.js src/main.js build/mail.js
Și pentru a obține combinate fișier
build/main.js
var foo = function() {
return {
prop: "",
method: function(){}
}
};
Dacă intenția dumneavoastră de a încărca fișierul JavaScript este de a utiliza funcțiile de import/inclus fișier, puteți defini, de asemenea, un obiect global și a seta funcții ca obiect elemente. De exemplu:
A = {};
A.func1 = function() {
console.log("func1");
}
A.func2 = function() {
console.log("func2");
}
A.func1();
A.func2();
Trebuie doar să fie atenți atunci când sunteți inclusiv script-uri într-un fișier HTML. Ordinea ar trebui să fie ca mai jos:
<head>
<script type="text/javascript" src="global.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
Sau mai degrabă decât, inclusiv la timp a alerga, a folosi un script pentru a înlănțui înainte de a încărca.
Eu folosesc Pinioane (I nu't știu dacă mai sunt și alții). Vă construi codul JavaScript în fișiere separate și include comentarii care sunt procesate de Pinioane motor ca include. Pentru dezvoltarea puteți include fișiere secvențial, atunci de producție pentru a le îmbina...
Vezi de asemenea și:
În cazul în care utilizați Web workers și doriți pentru a include script-uri suplimentare în domeniul de aplicare al muncitorului, alte răspunsuri furnizate despre adăugarea de script-uri pentru " șef " tag-ul, etc. nu va lucra pentru tine.
Din fericire, Web Lucrătorii au propriile lor importScripts funcția, care este o funcție globală în domeniul de aplicare al Web Muncitor, originar din browser-ul în sine ca s face parte din caietul de sarcini.
Alternativ, ca al doilea cel mai votat răspuns la întrebarea ta repere, RequireJS poate ocupa, de asemenea, inclusiv script-uri în interiorul unui Lucrător Web (probabil de asteptare importScripts
în sine, dar cu câteva alte caracteristici utile).
Am avut o problemă simplă, dar am fost uimit de răspunsurile la această întrebare.
Am avut de a utiliza o variabilă (myVar1) definite într-un singur fișier JavaScript (myvariables.js) într-un alt fișier JavaScript (main.js).
Pentru aceasta am făcut ca mai jos:
Încărcat codul JavaScript în HTML fișier, în ordinea corectă, myvariables.js în primul rând, atunci main.js:
<html>
<body onload="bodyReady();" >
<script src="myvariables.js" > </script>
<script src="main.js" > </script>
<!-- Some other code -->
</body>
</html>
Fișier: myvariables.js
var myVar1 = "I am variable from myvariables.js";
Fișier: main.js
// ...
function bodyReady() {
// ...
alert (myVar1); // This shows "I am variable from myvariables.js", which I needed
// ...
}
// ...
După cum ați văzut, am avut de a utiliza o variabilă într-un singur fișier JavaScript într-un alt fișier JavaScript, dar n-am't nevoie pentru a include unul în altul. Am doar nevoie pentru a se asigura că primul JavaScript fișier încărcat înainte de cel de-al doilea fișier JavaScript, și, primul fișier JavaScript's variabile sunt accesibile în cel de-al doilea fișier JavaScript, mod automat.
Asta mi-a salvat ziua. Sper că acest lucru ajută.
La @import
sintaxa pentru realizarea CSS-cum ar fi JavaScript importul este posibil, folosind un instrument, cum ar fi [Amestec]() prin intermediul lor special .se amestecă
tip de fișier (a se vedea aici). Îmi imaginez aplicație, pur și simplu folosește una din metodele menționate anterior interally, deși nu - 't știu.
Din Amestecul documentația privind `.se amestecă fișiere:
se Amestecă fișiere sunt pur și simplu .js sau .css fișiere cu .se amestecă. în numele de fișier. O se amestecă fișiere pur și simplu extinde funcționalitatea normală a unui stil sau script-ul de fișiere și vă permite să importați și să combine.
Aici's un exemplu .mix
de fișier, care combină mai multe `.js fișiere într-unul singur:
// scripts-global.mix.js
// Plugins - Global
@import "global-plugins/headroom.js";
@import "global-plugins/retina-1.1.0.js";
@import "global-plugins/isotope.js";
@import "global-plugins/jquery.fitvids.js";
Amestec ieșiri acest ca scripts-global.js și, de asemenea, ca o versiune minified (
scripts-global.min.js`).
Notă: am'm nu este în nici un fel afiliat cu Amestec, altele decât folosind-o ca un front-end instrument de dezvoltare. Am dat peste această întrebare văzând-o `.se amestecă JavaScript fișier în acțiune (într-una din Amestecul boilerplates) și de a fi un pic confuz de a ("puteți face acest lucru?" m-am gândit). Apoi mi-am dat seama că a fost o cerere specifică de tip de fișier (oarecum dezamăgitoare, a fost de acord). Cu toate acestea, m-am gândit cunoștințe ar putea fi de ajutor pentru alții.
**** UPDATE: Amestecul este acum gratuit (offline).
**** UPDATE: Amestecul este acum întreruptă. Veche amestec versiuni sunt încă disponibile