Wie kann ich eine JavaScript-Datei in eine andere JavaScript-Datei einbinden?

Question

Gibt es in JavaScript etwas Ähnliches wie @import in CSS, mit der Sie eine JavaScript-Datei in eine andere JavaScript-Datei einfügen können?

Answer 1

Es gibt eine gute Nachricht für Sie. Schon bald werden Sie JavaScript-Code einfach laden können. Es wird ein Standardverfahren für den Import von JavaScript-Code-Modulen werden und Teil des JavaScript-Kerns selbst sein.

Sie müssen nur schreiben import cond from 'cond.js'; zum Laden eines Makros namens cond aus einer Datei cond.js .

Sie sind also weder auf ein JavaScript-Framework angewiesen noch müssen Sie explizit eine Ajax Anrufe.

Siehe dazu:

• Statische Modulauflösung

• _Modul-Ladegeräte_

Answer 2

Erklärung import ist in ECMAScript 6 enthalten.

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;

Answer 3

Vielleicht können Sie diese Funktion verwenden, die ich auf dieser Seite gefunden habe Wie kann ich eine JavaScript-Datei in eine JavaScript-Datei einbinden? :

function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';

    head.appendChild(script)
}

Answer 4

Hier ist ein synchron 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);
}

Damit dies domänenübergreifend funktioniert, muss der Server folgende Einstellungen vornehmen allow-origin Header in seiner Antwort.

Answer 5

Ich habe gerade diesen JavaScript-Code geschrieben (mit Prototyp para DOM Manipulation):

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

Verwendung:

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

Gist: http://gist.github.com/284442 .