Wie kann ich die Javascript-Datei in eine andere Javascript-Datei einfügen?

Hat JavaScript etwas Ähnliches wie CSS @import , mit dem Sie eine JavaScript-Datei in eine andere JavaScript-Datei @import können?

4465
04 июня '09 в 14:59 2009-06-04 14:59 Alec Smart ist für den 4. Juni 09 um 09:59 Uhr 2009-06-04 14:59 eingestellt
@ 56 Antworten
  • 1
  • 2

In älteren Versionen von JavaScript gab es keinen Import, keine Inklusion oder Anforderung, daher wurden viele unterschiedliche Ansätze für dieses Problem entwickelt.

Seit 2015 (ES6) ist der Standard von ES6-Modulen zum Importieren von Modulen in Node.js in JavaScript verfügbar , das auch von den meisten modernen Browsern unterstützt wird .

Zur Kompatibilität mit älteren Browsern können Sie die Build- und / oder Transfer- Tools verwenden.

ES6-Module

ECMAScript (ES6) -Module werden in Node.js seit Versionsmodulen --experimental-modules Flag- --experimental-modules . Alle .mjs Dateien müssen die Erweiterung .mjs .

 // main.mjs import { hello } from 'module'; // or './module' let val = hello(); // val is "Hello"; 

ECMAScript-Module in Browsern

Browser unterstützen das direkte Laden von ECMAScript-Modulen (keine Tools wie Webpack erforderlich), beginnend mit Safari 10.1, Chrome 61, Firefox 60 und Edge 16. Überprüfen Sie die aktuelle Unterstützung in caniuse .

 // hello.mjs export function hello(text) { const div = document.createElement('div'); div.textContent = 'Hello ${text}'; document.body.appendChild(div); } 

Weitere Informationen finden Sie unter https://jakearchibald.com/2017/es-modules-in-browsers/

Dynamischer Import in Browsern

Durch den dynamischen Import kann das Skript bei Bedarf weitere Skripts laden:

Informationen finden Sie unter https://developers.google.com/web/updates/2017/11/dynamic-import. 

Node.js erfordert

Der alte Importstil von Modulen, der in Node.js immer noch weit verbreitet ist, ist das Modul module.exports / required .

 // server.js const myModule = require('./mymodule'); let val = myModule.hello(); // val is "Hello" 

Es gibt andere Möglichkeiten, externen JavaScript-Inhalt in Browsern zu aktivieren, für die keine Vorverarbeitung erforderlich ist.

AJAX-Download

Sie können ein zusätzliches Skript mit einem AJAX-Aufruf laden und dann eval , um es auszuführen. Dies ist der einfachste Weg, der jedoch aufgrund des JavaScript-Sandbox-Sicherheitsmodells auf Ihre Domäne beschränkt ist. Die Verwendung von eval eröffnet auch den Weg für Fehler, Hacking und Sicherheitsprobleme.

Download herunterladen

Wie beim dynamischen Import können Sie ein oder mehrere Skripts laden, indem Sie fetch mit Versprechen aufrufen, fetch die Reihenfolge zu steuern, in der Skriptabhängigkeiten mithilfe der Fetch Inject- Bibliothek ausgeführt werden:

 fetchInject([ 'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js' ]).then(() => { console.log('Finish in less than ${moment().endOf('year').fromNow(true)}') }) 

JQuery wird geladen

Die jQuery- Bibliothek bietet einzeiliges Laden:

 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) } 

Diese Funktion fügt am Ende des Head-Abschnitts der Seite ein neues <script> , wobei das src Attribut auf die URL gesetzt ist, die als erster Parameter an die Funktion übergeben wird.

Beide Lösungen werden in JavaScript Madness: dynamisches Laden von Skripts erläutert und veranschaulicht.

Erkennung, wann das Skript ausgeführt wurde

Jetzt gibt es ein großes Problem, das Sie beachten sollten. Dies bedeutet, dass Sie den Code remote herunterladen. Moderne Webbrowser laden die Datei und führen das aktuelle Skript weiterhin aus, da sie alles asynchron laden, um die Leistung zu verbessern. (Dies gilt sowohl für die jQuery-Methode als auch für die Methode zum manuellen dynamischen Skriptladen.)

Das heißt, wenn Sie diese Tricks direkt verwenden, können Sie Ihren neu heruntergeladenen Code nicht in der nächsten Zeile verwenden, nachdem Sie nach dem Download gefragt haben, da er immer noch geladen wird.

Zum Beispiel: my_lovely_script.js enthält MySuperObject :

Dann schreiben Sie den Code, den Sie verwenden möchten, nachdem das Skript in die Lambda-Funktion geladen wurde:

 loadScript("my_lovely_script.js", myPrettyCode); 

Beachten Sie, dass das Skript nach dem Laden des DOM oder früher ausgeführt werden kann, abhängig vom Browser und davon, ob die script.async = false; aktiviert ist script.async = false; Es gibt einen großartigen Artikel zum Herunterladen von Javascript im Allgemeinen, der dies bespricht.

Quellcode zusammenführen / vorverarbeiten

Wie oben in dieser Antwort erwähnt, verwenden viele Entwickler in ihren Projekten Build- / Transfer-Tools wie Parcel, Webpack oder Babel, wodurch sie die aufkommende JavaScript-Syntax verwenden, Rückwärtskompatibilität für ältere Browser bieten, Dateien zusammenführen, Dateien minimieren, Code aufteilen können usw.

3838
04 июня '09 в 15:13 2009-06-04 15:13 Die Antwort ist gegeben e-satis 04 Juni '09 um 15:13 2009-06-04 15:13

Wenn jemand nach etwas Fortgeschrittenem sucht, versuchen Sie RequireJS . Sie erhalten zusätzliche Vorteile wie die Verwaltung von Abhängigkeiten, eine verbesserte Parallelität und die Vermeidung von Duplizierungen (dh das Skript wird mehrmals erhalten).

Sie können Ihre JavaScript-Dateien in "modules" schreiben und dann als Abhängigkeiten in anderen Skripten betrachten. Sie können RequireJS auch als einfache Lösung verwenden, um dieses Skript auszuführen.

Beispiel:

Definieren Sie Abhängigkeiten als Module:

einige-abhängigkeit.js

border=0
 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 }); 

creation.js ist Ihre "wichtigste" Javascript-Datei, die von einigen abhängigen.js abhängig ist

 require(['some-dependency'], function(dependency) { //Your script goes here //some-dependency.js is fetched. //Then your script is executed }); 

Auszug aus GitHub README:

RequireJS lädt einfache JavaScript-Dateien sowie spezifischere Module. Es ist für die Verwendung im Browser, einschließlich des Web Worker, optimiert, kann jedoch auch in anderen JavaScript-Umgebungen wie Rhino und Node verwendet werden. Es implementiert die asynchrone Modul-API.

RequireJS verwendet einfache Skript-Tags zum Laden von Modulen / Dateien, sodass ein einfaches Debugging möglich ist. Es kann einfach zum Laden vorhandener JavaScript-Dateien verwendet werden, sodass Sie sie einem vorhandenen Projekt hinzufügen können, ohne die JavaScript-Dateien neu schreiben zu müssen.

...

532
07 июня '12 в 23:55 2012-06-07 23:55 Die Antwort wird von John Strickler am 7. Juni 12 um 23:55 2012-06-07 23:55 gegeben

Tatsächlich gibt es eine Möglichkeit, eine Javascript-Datei nicht asynchron herunterzuladen, sodass Sie die Funktionen Ihrer neu hochgeladenen Datei sofort nach dem Download verwenden können. Ich denke, das funktioniert in allen Browsern.

Sie müssen jQuery.append() im <head> -Element Ihrer Seite verwenden, das heißt:

 $("head").append('<script type="text/javascript" src="' + script + '"></script>'); 

Diese Methode hat jedoch auch ein Problem: Wenn in der importierten JavaScript-Datei ein Fehler auftritt, melden Firebug (sowie die Firefox-Fehlerkonsole und die Chrome Developer Tools auch ihren Standort falsch). Dies ist ein großes Problem, wenn Sie Firebug verwenden, um JavaScript-Fehler häufig zu verfolgen (ich tue dies Aus irgendeinem Grund kennt Firebug die kürzlich hochgeladene Datei einfach nicht. Wenn also ein Fehler in dieser Datei auftritt, wird gemeldet, dass er in Ihrer Haupt- HTML- Datei aufgetreten ist und Sie Probleme haben werden, die wahre Fehlerursache zu finden.

Wenn dies jedoch kein Problem für Sie ist, sollte diese Methode funktionieren.

In der Tat habe ich ein jQuery-Plugin namens $ .import_js () geschrieben, das diese Methode verwendet:

 (function($) {  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); 

Daher müssen Sie zum Importieren von JavaScript nur Folgendes tun:

 $.import_js('/path_to_project/scripts/somefunctions.js'); 

Ich habe auch in Beispiel einen einfachen Test gemacht.

Sie enthält die Datei main.js im Haupt-HTML- main.js Anschließend verwendet das Skript in main.js $.import_js() , um eine zusätzliche Datei namens included.js zu importieren, die diese Funktion definiert:

 function hello() { alert("Hello world!"); } 

Unmittelbar nach dem hello() der included.js wird die Funktion hello() aufgerufen, und Sie erhalten eine Benachrichtigung.

(Diese Antwort ist eine Antwort auf den e-sat-Kommentar).

173
28 апр. Antworten Kipras 28 April 2011-04-28 18:25 '11 am 18:25 2011-04-28 18:25

Ein anderer Weg, der meiner Meinung nach viel sauberer ist, besteht darin, eine synchrone Ajax-Anfrage zu machen, anstatt <script> . Darüber hinaus verarbeitet es Node.js.

Hier ist ein Beispiel für die Verwendung von 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); } }); } 

Dann können Sie es in Ihrem Code verwenden, als würden Sie normalerweise Folgendes einschließen:

 require("/scripts/subscript.js"); 

Und Sie können die Funktion aus dem erforderlichen Skript in der folgenden Zeile aufrufen:

 subscript.doSomethingCool(); 
138
08 сент. Die Antwort wird von Ariel Sep 08 gegeben 2011-09-08 21:22 '11 um 21:22 2011-09-08 21:22

Gute Nachrichten für dich. Sehr bald können Sie JavaScript-Code problemlos laden. Dies wird zur Standardmethode, um JavaScript-Codemodule zu importieren und Teil des JavaScript-Kerns selbst zu werden.

Sie müssen nur import cond from 'cond.js'; schreiben import cond from 'cond.js'; Laden Sie das Makro mit dem Namen cond aus der Datei cond.js

Daher müssen Sie sich nicht auf eine JavaScript-Infrastruktur verlassen und Ajax- Aufrufe nicht explizit durchführen.

Beziehen sich auf:

90
03 июля '12 в 16:32 2012-07-03 16:32 Die Antwort ist gegeben Imdad 3. Juli 12 um 04:32 2012-07-03 16:32

Sie können ein JavaScript-Tag dynamisch generieren und aus einem anderen JavaScript-Code einem HTML-Dokument hinzufügen. Dies lädt die Javascript-Zieldatei.

 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"); 
78
04 июня '09 в 15:02 2009-06-04 15:02 antwortete auf Svitlana Maksymchuk am 4. Juni 09 um 15:02 Uhr 2009-06-04 15:02

import in ECMAScript 6.

Syntax

 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; 
61
17 апр. Antwort von draupnie am 17. April 2015-04-17 04:56 '15 am 4:56 2015-04-17 04:56

Vielleicht können Sie diese Funktion verwenden, die ich auf dieser Seite gefunden habe: Wie füge ich eine Javascript-Datei in eine Javascript-Datei ein? :

 function include(filename) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = filename; script.type = 'text/javascript'; head.appendChild(script) } 
51
04 июня '09 в 15:04 2009-06-04 15:04 Die Antwort wird von Arnaud Gouder de Beauregard am 04. Juni 09 um 15:04 2009-06-04 15:04 gegeben

Hier ist die synchrone Version ohne 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); } 

Um diese funktionierende Domäne zu erhalten, muss der Server in der Antwort einen allow-origin festlegen.

47
11 дек. Die Antwort wird von heinob 11 Dez. gegeben. 2013-12-11 14:54 '13 am 14:54 2013-12-11 14:54

Ich habe gerade diesen Javascript-Code geschrieben (unter Verwendung eines Prototyps , um das DOM zu bearbeiten ):

 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); } }); })(); 

Verwenden:

 <script src="prototype.js"></script> <script src="require.js"></script> <script> require(['foo.js','bar.js'], function () {  }); </script> 

Die Quintessenz: http://gist.github.com/284442 .

43
23 янв. Antwort gegeben nornagon 23. Januar 2010-01-23 08:20 '10 um 8:20 2010-01-23 08:20

Hier ist eine verallgemeinerte Version, wie Facebook dies für ihren omnipräsenten Like-Button tut:

36
08 июля '15 в 5:41 2015-07-08 05:41 Die Antwort wird gegeben Dan Dascalescu 8. Juli 15 um 5:41 2015-07-08 05:41

Wenn Sie reines Javascript möchten, können Sie document.write .

 document.write('<script src="myscript.js" type="text/javascript"></script>'); 

Wenn Sie die jQuery-Bibliothek verwenden, können Sie die $.getScript Methode verwenden.

 $.getScript("another_script.js"); 
30
13 нояб. Die Antwort wird von Venu immadi am 13. November gegeben. 2013-11-13 12:18 13 um 12:18 2013-11-13 12:18

Dies ist wahrscheinlich die größte Schwäche von JavaScript meiner Meinung nach. Im Laufe der Jahre hatte ich kein Problem, Abhängigkeiten zu verfolgen. In jedem Fall scheint es die einzig praktikable Lösung zu sein, das in der HTML-Datei enthaltene Skript zu verwenden, und es ist daher schrecklich, Ihren JavaScript-Code vom Benutzer abhängig zu machen, einschließlich der Quelle, die Sie benötigen, und dessen Wiederverwendung unfreundlich zu machen.

Sorry, wenn sich das nach einem Vortrag anhört;) Dies ist meine (schlechte) Angewohnheit, aber ich möchte das betonen.

Das Problem bezieht sich auf alles andere im Web, auf die Geschichte von Javascript. Es war wirklich nicht für die Verwendung in der heutigen Verbreitung konzipiert. Netscape hat eine Sprache entwickelt, mit der Sie verschiedene Dinge verwalten können. Sie haben jedoch nicht angenommen, dass sie für viele Dinge weit verbreitet ist, wie es jetzt üblich ist, und sie hat sich aus irgendeinem Grund von dort aus erweitert, ohne einige der grundlegenden Schwächen der ursprünglichen Strategie zu beeinträchtigen.

Dies ist natürlich keine. HTML wurde nicht für eine moderne Webseite entwickelt. Es wurde entwickelt, um die Logik des Dokuments zum Ausdruck zu bringen, sodass Leser (Browser in der modernen Welt) es in einer geeigneten Form anzeigen können, die sich innerhalb der Möglichkeiten des Systems befand, und es dauerte Jahre (bis auf das Hacken von MS und Netscape). CSS löst dieses Problem, aber es war >

Wir hoffen, dass JavaScript (insbesondere jetzt, da es Teil des Standards ist) entwickelt wird, um das Konzept der korrekten Modularität (wie auch einiger anderer Dinge) wie jede andere (vorhandene) Programmiersprache der Welt zu akzeptieren, und dieser Unsinn wird verschwinden. Bis du es einfach nur magst und ich es nicht akzeptiere, habe ich Angst.

30
24 мая '12 в 12:51 2012-05-24 12:51 Die Antwort wird von Stephen Whipp am 24. Mai 12 um 12:51 2012-05-24 12:51 gegeben

Die meisten der hier vorgestellten Lösungen gehen von einer dynamischen Belastung aus. Stattdessen suchte ich nach einem Compiler, der alle abhängigen Dateien in einer Ausgabedatei sammelt. Genauso wie die Less / Sass @import mit der CSS- @import Regel. Da ich so etwas Anständiges nicht fand, habe ich ein einfaches Werkzeug zur Lösung eines Problems geschrieben.

Hier ist also der Compiler https://github.com/dsheiko/jsic , der $import("file-path") zuverlässig $import("file-path") angeforderten Dateiinhalt ersetzt. Hier ist das passende Grunt- Plugin: https://github.com/dsheiko/grunt-jsic .

Im Haupt-jQuery-Thread führen sie einfach atomare Quelldateien zu einer zusammen, beginnend mit intro.js und endend mit outtro.js . Dies passt nicht zu mir, da es keine Flexibilität bei der Entwicklung von Quellcode bietet. So funktioniert es mit JSIC:

Src / main.js

 var foo = $import("./Form/Input/Tel"); 

SRC / Form / login /Tel.js

 function() { return { prop: "", method: function(){} } } 

Jetzt können wir den Compiler ausführen:

 node jsic.js src/main.js build/mail.js 

Und holen Sie sich die zusammengeführte Datei

build /main.js

 var foo = function() { return { prop: "", method: function(){} } }; 
24
14 июля '13 в 0:44 2013-07-14 00:44 Die Antwort wird von Dmitry Sheiko 14. Juli 13 um 0:44 2013-07-14 00:44 gegeben

Sie können Ihre Skripte auch mit PHP erstellen:

Datei 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 
24
28 дек. Die Antwort wird von Calmarius am 28. Dezember gegeben. 2010-12-28 00:03 11 um 0:03 2010-12-28 00:03

Wenn Ihre Absicht, eine JavaScript-Datei hochzuladen, Funktionen aus der importierten / eingeschlossenen Datei verwendet , können Sie auch ein globales Objekt definieren und Funktionen als Objektelemente festlegen. Zum Beispiel:

global.js

 A = {}; 

file1.js

 A.func1 = function() { console.log("func1"); } 

file2.js

 A.func2 = function() { console.log("func2"); } 

main.js

 A.func1(); A.func2(); 

Sie müssen nur vorsichtig sein, wenn Sie Skripts in die HTML-Datei einfügen. Die Reihenfolge sollte wie folgt aussehen:

 <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> 
20
24 июля '15 в 9:53 2015-07-24 09:53 Die Antwort wird von Adem İlhan am 24. Juli 15 um 15.53 Uhr 2015-07-24 09:53 gegeben

Dies sollte tun:

 xhr = new XMLHttpRequest(); xhr.open("GET", "/soap/ajax/11.0/connection.js", false); xhr.send(); eval(xhr.responseText); 
18
24 марта '13 в 22:32 2013-03-24 22:32 Die Antwort wird am 24. März 13 um 10:32 Uhr 2013-03-24 22:32 gegeben

Oder verwenden Sie zum Einfügen nicht zur Laufzeit ein Skript, um es vor dem Laden zusammenzuführen.

Ich benutze Sternchen (ich weiß nicht, ob es andere gibt). Sie erstellen Ihren JavaScript-Code in separaten Dateien und enthalten Kommentare, die vom Sprockets-Mechanismus verarbeitet werden, genau wie die enthaltenen. Für die Entwicklung können Sie Dateien sequentiell einschließen und dann für die Produktion, um sie zu kombinieren ...

Siehe auch:

17
07 июня '12 в 23:48 2012-06-07 23:48 Die Antwort wird von JMawer am 07. Juni '12 um 23:48 2012-06-07 23:48 gegeben

Wenn Sie Web Workers verwenden und zusätzliche Skripts in den Mitarbeiterbereich aufnehmen möchten, weitere Antworten zum Hinzufügen von Skripts zum head Tag usw. Funktioniert nicht für dich.

Glücklicherweise verfügt Web Workers über eine eigene Funktion importScripts , eine globale Funktion im Bereich Web Worker, die im Browser selbst eingebettet ist, da sie Teil der Spezifikation ist .

Darüber hinaus kann RequireJS als zweithöchste Antwort auf Ihre Frage auch die Einbeziehung von Skripten in den Web Worker übernehmen (wahrscheinlich die aufrufenden importScripts selbst, jedoch mit mehreren anderen nützlichen Funktionen).

14
01 янв. Die Antwort gibt Turnerj vom 01. Januar 2015-01-01 11:58 '15 am 11:58 2015-01-01 11:58

У меня была простая проблема, но я был озадачен ответами на этот вопрос.

Мне пришлось использовать переменную (myVar1), определенную в одном файле JavaScript (myvariables.js) в другом файле JavaScript (main.js).

Для этого я сделал, как показано ниже:

Загрузил код JavaScript в HTML файле в правильном порядке, сначала myvariables.js, затем main.js:

 <html> <body onload="bodyReady();" > <script src="myvariables.js" > </script> <script src="main.js" > </script> <!-- Some other code --> </body> </html> 

Файл: myvariables.js

 var myVar1 = "I am variable from myvariables.js"; 

Файл: main.js

 // ... function bodyReady() { // ... alert (myVar1); // This shows "I am variable from myvariables.js", which I needed // ... } // ... 

Как вы видели, я использовал переменную в одном файле JavaScript в другом файле JavaScript, но мне не нужно было включать одну в другую. Мне просто нужно было убедиться, что первый файл JavaScript загружен раньше, чем второй файл JavaScript, и переменные первого файла JavaScript доступны во втором файле JavaScript автоматически.

Это спасло мой день. Hoffe das hilft.

13
ответ дан Manohar Reddy Poreddy 22 июля '15 в 5:15 2015-07-22 05:15

Синтаксис @import для импорта CSS-подобного JavaScript возможен с помощью такого инструмента, как Mixture, через специальный .mix файла .mix (см. Здесь ). Я предполагаю, что приложение просто использует один из вышеупомянутых методов, хотя я не знаю.

Из документации Mixture по файлам .mix :

Файлы микширования - это просто файлы.js или.css с.mix. в имени файла. Файл микширования просто расширяет функциональность обычного файла стиля или скрипта и позволяет импортировать и комбинировать.

Вот пример файла .mix который объединяет несколько файлов .js в один:

 // 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"; 

Mixture выводит это как scripts-global.js а также как уменьшенную версию ( scripts-global.min.js ).

Примечание: я никоим образом не связан с Mixture, за исключением того, что использую его как интерфейсный инструмент разработки. Я столкнулся с этим вопросом, увидев .mix JavaScript .mix в действии (в одном из шаблонов Mixture), и немного растерялся ("Вы можете это сделать?", - подумал я про себя). Затем я понял, что это тип файла для приложения (несколько разочаровывающий, согласился). Тем не менее, полагал, что знания могут быть полезны для других.

ОБНОВЛЕНИЕ : Mixture теперь бесплатна (не в сети).

ОБНОВЛЕНИЕ : Смесь теперь прекращена. Старые релизы смеси все еще доступны

12
ответ дан Isaac Gregson 14 марта '14 в 7:40 2014-03-14 07:40

Мой обычный метод:

 var require = function (src, cb) { cb = cb || function () {}; var newScriptTag = document.createElement('script'), firstScriptTag = document.getElementsByTagName('script')[0]; newScriptTag.src = src; newScriptTag.async = true; newScriptTag.onload = newScriptTag.onreadystatechange = function () { (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')  (cb()); }; firstScriptTag.parentNode.insertBefore(newScriptTag, firstScriptTag); } 

Это прекрасно работает и не использует перезагрузки страницы для меня. Я попробовал метод AJAX (один из других @), но, похоже, он мне не подходит.

Вот объяснение того, как работает код для любопытных: по сути, он создает новый тег сценария (после первого) URL-адреса. Он устанавливает его в асинхронный режим, чтобы не блокировать остальную часть кода, а вызывает обратный вызов, когда readyState (состояние загружаемого содержимого) меняется на "загружен".

11
ответ дан Christopher Dumas 31 мая '13 в 22:31 2013-05-31 22:31

Я написал простой модуль, который автоматизирует работу по импорту/включению скриптов модуля в JavaScript. Для подробного объяснения кода, обратитесь к сообщению в блоге JavaScript require/import/include modules .

 // ----- USAGE ----- require('ivar.util.string'); require('ivar.net.*'); require('ivar/util/array.js'); require('http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'); ready(function(){ //Do something when required scripts are loaded }); //-------------------- var _rmod = _rmod || {}; //Require module namespace _rmod.LOADED = false; _rmod.on_ready_fn_stack = []; _rmod.libpath = ''; _rmod.imported = {}; _rmod.loading = { scripts: {}, length: 0 }; _rmod.findScriptPath = function(script_name) { var script_elems = document.getElementsByTagName('script'); for (var i = 0; i < script_elems.length; i++) { if (script_elems[i].src.endsWith(script_name)) { var href = window.location.href; href = href.substring(0, href.lastIndexOf('/')); var url = script_elems[i].src.substring(0, script_elems[i].length - script_name.length); return url.substring(href.length+1, url.length); } } return ''; }; _rmod.libpath = _rmod.findScriptPath('script.js'); //Path of your main script used to mark //the root directory of your library, any library. _rmod.injectScript = function(script_name, uri, callback, prepare) { if(!prepare) prepare(script_name, uri); var script_elem = document.createElement('script'); script_elem.type = 'text/javascript'; script_elem.title = script_name; script_elem.src = uri; script_elem.async = true; script_elem.defer = false; if(!callback) script_elem.onload = function() { callback(script_name, uri); }; document.getElementsByTagName('head')[0].appendChild(script_elem); }; _rmod.requirePrepare = function(script_name, uri) { _rmod.loading.scripts[script_name] = uri; _rmod.loading.length++; }; _rmod.requireCallback = function(script_name, uri) { _rmod.loading.length--; delete _rmod.loading.scripts[script_name]; _rmod.imported[script_name] = uri; if(_rmod.loading.length == 0) _rmod.onReady(); }; _rmod.onReady = function() { if (!_rmod.LOADED) { for (var i = 0; i < _rmod.on_ready_fn_stack.length; i++){ _rmod.on_ready_fn_stack[i](); }); _rmod.LOADED = true; } }; _.rmod = namespaceToUri = function(script_name, url) { var np = script_name.split('.'); if (np.getLast() === '*') { np.pop(); np.push('_all'); } if(!url) url = ''; script_name = np.join('.'); return url + np.join('/')+'.js'; }; //You can rename based on your liking. I chose require, but it //can be called include or anything else that is easy for you //to remember or write, except "import", because it is reserved //for future use. var require = function(script_name) { var uri = ''; if (script_name.indexOf('/') > -1) { uri = script_name; var lastSlash = uri.lastIndexOf('/'); script_name = uri.substring(lastSlash+1, uri.length); } else { uri = _rmod.namespaceToUri(script_name, ivar._private.libpath); } if (!_rmod.loading.scripts.hasOwnProperty(script_name)  !_rmod.imported.hasOwnProperty(script_name)) { _rmod.injectScript(script_name, uri, _rmod.requireCallback, _rmod.requirePrepare); } }; var ready = function(fn) { _rmod.on_ready_fn_stack.push(fn); }; 
11
ответ дан stamat 12 апр. '13 в 19:34 2013-04-12 19:34

На современном языке это было бы

 function loadJs( url ){ return new Promise( resolve => { const script = document.createElement( "script" ); script.src = url; script.onload = resolve; document.head.appendChild( script ); }); } 
10
ответ дан Dmitry Sheiko 20 июля '17 в 18:15 2017-07-20 18:15
 var js = document.createElement("script"); js.type = "text/javascript"; js.src = jsFilePath; document.body.appendChild(js); 
10
ответ дан Sam4Code 22 авг. '12 в 7:33 2012-08-22 07:33

Также есть Head.js. Это очень легко иметь дело с:

 head.load("js/jquery.min.js", "js/jquery.someplugin.js", "js/jquery.someplugin.css", function() { alert("Everything is ok!"); }); 

Как видите, это проще, чем Require.js и так же удобно, как метод jQuery $.getScript . Он также имеет некоторые расширенные функции, такие как условная загрузка, обнаружение функций и многое другое .

9
ответ дан Ale 22 нояб. '13 в 21:40 2013-11-22 21:40

Я пришел к этому вопросу, потому что искал простой способ поддерживать коллекцию полезных плагинов JavaScript. Увидев некоторые решения здесь, я придумал это:

  1. Установите файл с именем "plugins.js" (или extensions.js или что у вас есть). Храните ваши файлы плагинов вместе с этим одним основным файлом.

  2. plugins.js будет иметь массив с именем "pluginNames []", который мы будем повторять для каждого(), а затем добавлять тег к заголовку для каждого плагина.

    //устанавливаем массив для обновления при добавлении или удалении файлов плагинов var pluginNames = ["lettering", "fittext", "butterjam" и т.д.]; // один скрипт-тег для каждого плагина $.each(pluginNames, function() {$ ('head'). append ('');});

  3. вручную вызовите только один файл в вашей голове:
    <script src="js/plugins/plugins.js"></script>

Я обнаружил, что, хотя все плагины вставлялись в тег head так, как они должны, они не всегда запускались браузером при нажатии на страницу или обновлении.

Я считаю более надежным просто писать теги сценария в PHP include. Вы должны написать это только один раз, и это так же много работы, как и вызов плагина с использованием JavaScript.

9
ответ дан rgb_life 01 дек. '11 в 8:36 2011-12-01 08:36

Этот скрипт добавит файл JavaScript в начало любого другого <script> :

 (function () { var li = document.createElement('script'); li.type = 'text/javascript'; li.src= "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"; li.async=true; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })(); 
9
ответ дан Vicky Gonsalves 26 окт. '13 в 6:42 2013-10-26 06:42

Есть много потенциальных @ на этот вопрос. Мой ответ, очевидно, основан на ряде из них. Это то, чем я закончил, прочитав все ответы.

Проблема с $.getScript и действительно любым другим решением, которое требует обратного вызова при завершении загрузки, состоит в том, что если у вас есть несколько файлов, которые используют его и зависят друг от друга, у вас больше нет способа узнать, когда все сценарии были загружены (один раз они вложены в несколько файлов).

Beispiel:

file3.js

 var f3obj = "file3"; // Define other stuff 

file2.js:

 var f2obj = "file2"; $.getScript("file3.js", function(){ alert(f3obj); // Use anything defined in file3. }); 

file1.js:

 $.getScript("file2.js", function(){ alert(f3obj); //This will probably fail because file3 is only guaranteed to have loaded inside the callback in file2. alert(f2obj); // Use anything defined in the loaded script... }); 

Вы правы, когда говорите, что можете указать, что Ajax будет работать синхронно или использовать XMLHttpRequest , но в настоящее время наблюдается тенденция отклонять синхронные запросы, поэтому вы можете не получить полную поддержку браузера ни сейчас, ни в будущем.

Вы можете попытаться использовать $.when для проверки массива отложенных объектов, но теперь вы делаете это в каждом файле, и file2 будет считаться загруженным, как только $.when выполняется, а не при выполнении обратного вызова, поэтому file1 по-прежнему продолжает выполнение до загрузки file3. Это действительно до сих пор та же проблема.

Я решил идти назад, а не вперед. Спасибо document.writeln . Я знаю, что это табу, но при правильном использовании это работает хорошо. Вы получите код, который можно легко отладить, правильно отобразить в DOM и убедиться, что зависимости загружены правильно.

Конечно, вы можете использовать $ ("body"). Append(), но тогда вы больше не сможете правильно отлаживать.

HINWEIS. Вы должны использовать это только во время загрузки страницы, в противном случае вы получите пустой экран. Другими словами, всегда размещайте это перед/за пределами document.ready . Я не проверял использование этого после загрузки страницы в событии щелчка или чем-то подобном, но я почти уверен, что это потерпит неудачу.

Мне понравилась идея расширения jQuery, но, очевидно, вам не нужно.

Перед вызовом document.writeln он проверяет, что скрипт еще не загружался, оценивая все элементы скрипта.

Я предполагаю, что сценарий не выполняется полностью до тех пор, пока не будет выполнено событие document.ready . (Я знаю, что использование document.ready не требуется, но многие люди используют его, и обработка этого является гарантией.)

Когда дополнительные файлы загружены, обратные вызовы document.ready будут выполняться в неправильном порядке. Чтобы решить эту проблему, когда скрипт действительно загружен, импортированный скрипт сам реимпортируется, и выполнение останавливается. Это приводит к тому, что для исходного файла теперь выполняется обратный вызов document.ready после любого из любых сценариев, которые он импортирует.

Вместо этого вы можете попытаться изменить readyList список jQuery, но это readyList как худшее решение.

Lösung:

 $.extend(true, { import_js : function(scriptpath, reAddLast) { if (typeof reAddLast === "undefined" || reAddLast === null) { reAddLast = true; // Default this value to true. It is not used by the end user, only to facilitate recursion correctly. } var found = false; if (reAddLast == true) // If we are re-adding the originating script we do not care if it has already been added. { found = $('script').filter(function () { return ($(this).attr('src') == scriptpath); }).length != 0; // jQuery to check if the script already exists. (replace it with straight JavaScript if you don't like jQuery. } if (found == false) { var callingScriptPath = $('script').last().attr("src"); // Get the script that is currently loading. Again this creates a limitation where this should not be used in a button, and only before document.ready. document.writeln("<script type='text/javascript' src='" + scriptpath + "'></script>"); // Add the script to the document using writeln if (reAddLast) { $.import_js(callingScriptPath, false); // Call itself with the originating script to fix the order. throw 'Readding script to correct order: ' + scriptpath + ' < ' + callingScriptPath; // This halts execution of the originating script since it is getting reloaded. If you put a try / catch around the call to $.import_js you results will vary. } return true; } return false; } }); 

Verwenden:

file3:

 var f3obj = "file3"; // Define other stuff $(function(){ f3obj = "file3docready"; }); 

File2:

 $.import_js('js/file3.js'); var f2obj = "file2"; $(function(){ f2obj = "file2docready"; }); 

File1:

 $.import_js('js/file2.js'); // Use objects from file2 or file3 alert(f3obj); // "file3" alert(f2obj); // "file2" $(function(){ // Use objects from file2 or file3 some more. alert(f3obj); //"file3docready" alert(f2obj); //"file2docready" }); 
8
ответ дан curlyhairedgenius 11 янв. '15 в 23:19 2015-01-11 23:19

Я создал функцию, которая позволит вам использовать словоблудие, аналогичное С#/Java, для включения файла JavaScript. Я проверил это немного даже внутри другого файла JavaScript, и это, кажется, работает. Это требует jQuery, хотя для немного "магии" в конце.

Я поместил этот код в файл в корне моего каталога скриптов (я назвал его global.js , но вы можете использовать все, что захотите. Если я не ошибаюсь, и jQuery должен быть единственными необходимыми скриптами на данной странице. Имейте в виду, что это в значительной степени непроверено за пределами некоторого базового использования, поэтому могут возникнуть или не возникнуть какие-либо проблемы с тем, как я это сделал, используйте на свой страх и риск yadda yadda Я не несу ответственности, если вы что-то испортили yadda yadda:

  if (typeof(jQuery) === 'undefined') { throw 'jQuery is required.'; }  var BASE_DIR = 'js/';  function imports(file) { var fileName = file.substr(file.lastIndexOf('.') + 1, file.length); // Convert PascalCase name to underscore_separated_name var regex = new RegExp(/([AZ])/g); if (regex.test(fileName)) { var separated = fileName.replace(regex, ",$1").replace(',', ''); fileName = separated.replace(/[,]/g, '_'); } // Remove the original JavaScript file name to replace with underscore version file = file.substr(0, file.lastIndexOf('.')); // Convert the dot syntax to directory syntax to actually load the file if (file.indexOf('.') > 0) { file = file.replace(/[.]/g, '/'); } var src = BASE_DIR + file + '/' + fileName.toLowerCase() + '.js'; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; $('head').find('script:last').append(script); } 
7
ответ дан Wayne Molina 20 янв. '12 в 0:27 2012-01-20 00:27
  • 1
  • 2

Другие вопросы по меткам или Задайте вопрос