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

Dieses Skript fügt eine JavaScript-Datei an den Anfang einer beliebigen anderen <script> Tag:

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

Answer 2

Halten Sie sie schön, kurz, einfach und wartbar! :]

// Third-party plugins / script (don't forget the full path is necessary)
var FULL_PATH = '', s =
[
    FULL_PATH + 'plugins/script.js'      // Script example
    FULL_PATH + 'plugins/jquery.1.2.js', // jQuery Library
    FULL_PATH + 'plugins/crypto-js/hmac-sha1.js',      // CryptoJS
    FULL_PATH + 'plugins/crypto-js/enc-base64-min.js'  // CryptoJS
];

function load(url)
{
    var ajax = new XMLHttpRequest();
    ajax.open('GET', url, false);
    ajax.onreadystatechange = function ()
    {
        var script = ajax.response || ajax.responseText;
        if (ajax.readyState === 4)
        {
            switch(ajax.status)
            {
                case 200:
                    eval.apply( window, [script] );
                    console.log("library loaded: ", url);
                    break;
                default:
                    console.log("ERROR: library not loaded: ", url);
            }
        }
    };
    ajax.send(null);
}

// Initialize a single load
load('plugins/script.js');

// Initialize a full load of scripts
if (s.length > 0)
{
    for (i = 0; i < s.length; i++)
    {
        load(s[i]);
    }
}

Dieser Code ist einfach ein kurzes Funktionsbeispiel, das podría zusätzliche Funktionen für eine vollständige Unterstützung auf einer (oder mehreren) Plattformen benötigen.

Answer 3

Ich habe ein einfaches Modul geschrieben, das das Importieren/Einbinden von Modulskripten in JavaScript automatisiert. Eine ausführliche Erläuterung des Codes finden Sie in diesem Blogbeitrag JavaScript erfordern/importieren/einschließen von Modulen .

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

Answer 4

Ich bin auf diese Frage gekommen, weil ich nach einer einfachen Möglichkeit gesucht habe, eine Sammlung nützlicher JavaScript-Plugins zu verwalten. Nachdem ich einige der Lösungen hier gesehen hatte, kam ich auf diese Idee:

1. Legen Sie eine Datei namens "plugins.js" (oder extensions.js oder wie immer Sie wollen) an. Halten Sie Ihre Plugin-Dateien zusammen mit dieser einen Master-Datei.

2. plugins.js wird ein Array namens pluginNames[] über die wir iterieren werden each() , dann ein anhängen <script> Tag im Kopfbereich für jedes Plugin

   //set array to be updated when we add or remove plugin files var pluginNames = ["lettering", "fittext", "butterjam", etc.];

   //one script tag for each plugin $.each(pluginNames, function(){ $('head').append('<script src="js/plugins/' + this + '.js"></script>'); });

3. Rufen Sie manuell nur die eine Datei in Ihrem Kopf auf:
   <script src="js/plugins/plugins.js"></script>

ABER:

Auch wenn alle Plugins in den Head-Tag eingefügt werden, werden sie nicht immer vom Browser ausgeführt, wenn Sie auf die Seite klicken oder die Seite aktualisieren.

Ich habe festgestellt, dass es zuverlässiger ist, die Skript-Tags einfach in ein PHP-Include zu schreiben. Man muss es nur einmal schreiben und das ist genauso viel Arbeit wie der Aufruf des Plugins mit JavaScript.

Answer 5

Es gibt mehrere Möglichkeiten, Module in JavaScript zu implementieren. Hier sind die beiden beliebtesten:

ES6-Module

Die Browser unterstützen dieses Modulationssystem noch nicht, so dass Sie für die Verwendung dieser Syntax einen Bundler wie Webpack . Die Verwendung eines Bundlers ist in jedem Fall besser, da dieser alle Ihre verschiedenen Dateien zu einer einzigen (oder mehreren zusammenhängenden) Datei zusammenfassen kann. Dadurch werden die Dateien schneller vom Server zum Client übertragen, da jede HTTP-Anfrage mit einem gewissen Overhead verbunden ist. Durch die Verringerung der gesamten HTTP-Anfrage verbessern wir also die Leistung. Hier ist ein Beispiel für ES6-Module:

// main.js file

export function add (a, b) {
  return a + b;
}

export default function multiply (a, b) {
  return a * b;
}

// test.js file

import {add}, multiply from './main';   // For named exports between curly braces {export1, export2}
                                        // For default exports without {}

console.log(multiply(2, 2));  // logs 4

console.log(add(1, 2));  // logs 3

CommonJS (verwendet in Node.js)

Dieses Modulationssystem wird in Node.js verwendet. Sie fügen Ihre Exporte grundsätzlich zu einem Objekt hinzu, das module.exports . Sie können dann auf dieses Objekt über eine require('modulePath') . Wichtig ist hierbei, dass diese Module zwischengespeichert werden, wenn Sie also require() ein bestimmtes Modul zweimal, so wird das bereits erstellte Modul zurückgegeben.

// main.js file

function add (a, b) {
  return a + b;
}

module.exports = add;  // Here we add our 'add' function to the exports object

// test.js file

const add = require('./main');

console.log(add(1,2));  // logs 3