javascript - verlinkung - js datei erstellen




Wie füge ich eine JavaScript-Datei in einer anderen JavaScript-Datei ein? (20)

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


Das sollte tun:

xhr = new XMLHttpRequest();
xhr.open("GET", "/soap/ajax/11.0/connection.js", false);
xhr.send();
eval(xhr.responseText);

Der Anweisungsimport erfolgt 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;

Die meisten hier gezeigten Lösungen implizieren eine dynamische Belastung. Ich suchte stattdessen nach einem Compiler, der alle abhängigen Dateien zu einer einzigen Ausgabedatei zusammenstellt. Das Gleiche, wie die Less / Sass Präprozessoren sich mit der CSS- @import -Regel befassen. Da ich nichts Anständiges für diese Art gefunden habe, habe ich ein einfaches Werkzeug zur Lösung des Problems geschrieben.

Hier ist also der Compiler https://github.com/dsheiko/jsic , der $import("file-path") durch den angeforderten Inhalt der Datei sicher ersetzt. Hier ist das entsprechende Grunt Plugin: https://github.com/dsheiko/grunt-jsic .

Im jQuery- intro.js verketten sie einfach atomare Quelldateien zu einer einzigen, die mit intro.js und mit outtro.js endet. Das passt nicht zu mir, da das Quelltextdesign nicht flexibel ist. So funktioniert es mit jsic:

src / main.js

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

src / Form / Eingabe / 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 bekomme die kombinierte Datei

build / main.js

var foo = function() {
    return {
          prop: "",
          method: function(){}
    }
};

Ein anderer Weg, der meiner Meinung nach viel sauberer ist, besteht darin, eine synchrone Ajax-Anfrage zu machen, anstatt ein <script> -Tag zu verwenden. Das ist auch, wie Node.js behandelt.

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

Sie können es dann in Ihrem Code verwenden, da Sie normalerweise ein Include verwenden:

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

In der nächsten Zeile können Sie eine Funktion aus dem erforderlichen Skript aufrufen:

subscript.doSomethingCool(); 

Es gibt eine gute Nachricht für Sie. Sehr bald können Sie JavaScript-Code einfach laden. Es wird zu einer Standardmethode für das Importieren von JavaScript-Code-Modulen und wird Teil des JavaScript-Kernprogramms sein.

Sie müssen einfach import cond from 'cond.js'; schreiben import cond from 'cond.js'; um ein Makro namens cond aus einer Datei cond.js .

Sie müssen sich also nicht auf ein JavaScript-Framework verlassen oder Ajax Aufrufe explizit durchführen.

Beziehen auf:


Es ist möglich, ein JavaScript-Tag dynamisch zu generieren und aus anderen JavaScript-Codes an das HTML-Dokument anzuhängen. Dadurch wird eine gezielte JavaScript-Datei geladen.

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

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

Beachten Sie, dass der Server in seiner Antwort einen allow-origin setzen muss, damit diese Domäne domänenübergreifend funktioniert.


Ich habe gerade diesen JavaScript-Code geschrieben (mit Prototype für die 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);
        }
    });
})();

Verwendungszweck:

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


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

Wenn Ihre Absicht, die JavaScript-Datei zu laden , die Funktionen der importierten / enthaltenen Datei verwendet , können Sie auch ein globales Objekt definieren und die 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 eine HTML-Datei einfügen. Die Reihenfolge sollte wie folgt sein:

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

Wenn jemand nach etwas Fortgeschrittenem sucht, probieren Sie RequireJS . Sie erhalten zusätzliche Vorteile wie die Verwaltung von Abhängigkeiten, eine bessere Parallelität und die Vermeidung von Duplikationen (dh das Abrufen eines Skripts mehr als einmal).

Sie können Ihre JavaScript-Dateien in "modules" schreiben und dann als Abhängigkeiten in anderen Skripten referenzieren. Oder Sie können RequireJS als einfache Lösung verwenden.

Beispiel:

Definieren Sie Abhängigkeiten als Module:

einige-abhängigkeit.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 ist Ihre "wichtigste" JavaScript-Datei, die von some-dependency.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 der GitHub README:

RequireJS lädt einfache JavaScript-Dateien sowie mehr definierte Module. Es ist für die Verwendung innerhalb eines Browsers optimiert, auch in einem Web Worker. Es kann jedoch auch in anderen JavaScript-Umgebungen wie Rhino und Node verwendet werden. Es implementiert die Asynchronous Module 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 zu Ihrem vorhandenen Projekt hinzufügen können, ohne Ihre JavaScript-Dateien neu schreiben zu müssen.

...


Ich hatte ein einfaches Problem, aber ich war verblüfft über die Antworten auf diese Frage.

Ich musste eine Variable (myVar1) verwenden, die in einer JavaScript-Datei (myvariables.js) in einer anderen JavaScript-Datei (main.js) definiert ist.

Dafür habe ich folgendes gemacht:

Laden Sie den JavaScript-Code in der HTML-Datei in der richtigen Reihenfolge zuerst myvariables.js und dann main.js:

<html>
    <body onload="bodyReady();" >

        <script src="myvariables.js" > </script>
        <script src="main.js" > </script>

        <!-- Some other code -->
    </body>
</html>

Datei: myvariables.js

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

Datei: main.js

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

Wie Sie gesehen haben, hatte ich eine Variable in einer JavaScript-Datei in einer anderen JavaScript-Datei verwendet, aber ich musste keine in eine andere einbinden. Ich musste nur sicherstellen, dass die erste JavaScript-Datei, die vor der zweiten JavaScript-Datei geladen wurde, und die Variablen der ersten JavaScript-Datei automatisch in der zweiten JavaScript-Datei verfügbar sind.

Das hat meinen Tag gerettet. Ich hoffe das hilft.


Meine übliche Methode ist:

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

Es funktioniert super und verwendet für mich keine Seiten-Neuladen. Ich habe die AJAX-Methode (eine der anderen Antworten) ausprobiert, aber sie scheint für mich nicht so gut zu funktionieren.

Im Folgenden wird erläutert, wie der Code für Neugierige funktioniert: Im Wesentlichen wird ein neuer Skripttag (nach dem ersten) der URL erstellt. Es stellt den asynchronen Modus ein, sodass der Rest des Codes nicht blockiert wird, sondern ein Rückruf aufgerufen wird, wenn der Status readyState (der Status des zu ladenden Inhalts) in "Geladen" geändert wird.


Verwenden Sie ein Skript zur Verkettung vor dem Hochladen, anstatt es zur Laufzeit einzuschließen.

Ich benutze Sprockets (ich weiß nicht, ob es andere gibt). Sie erstellen Ihren JavaScript-Code in separaten Dateien und fügen Kommentare ein, die von der Sprockets-Engine als Include verarbeitet werden. Für die Entwicklung können Sie Dateien sequentiell einbinden, dann für die Produktion, um sie zusammenzuführen ...

Siehe auch:


Dieses Skript fügt eine JavaScript-Datei vor jedem anderen <script>Tag ein:

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

Es gibt auch Head.js . Es ist sehr einfach, mit folgenden Themen umzugehen:

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

Wie Sie sehen, ist es einfacher als Require.js und so bequem wie die $.getScriptMethode von jQuery . Es verfügt auch über einige erweiterte Funktionen, wie z. B. bedingtes Laden, Erkennung von Funktionen und vieles mehr .


Ich habe ein einfaches Modul geschrieben, das das Importieren / Einbinden von Modulskripts in JavaScript automatisiert. Ausführliche Erklärungen zum Code finden Sie in den JavaScript-Modulen "Require / Import / Include" .

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

Ich habe eine Funktion erstellt, mit der Sie ähnliche Wörter wie C # / Java verwenden können, um eine JavaScript-Datei einzubinden. Ich habe es sogar aus einer anderen JavaScript-Datei heraus getestet und scheint zu funktionieren. Es erfordert jedoch jQuery für ein bisschen "Magie" am Ende.

Ich habe diesen Code in einer Datei im Stammverzeichnis meines Skriptverzeichnisses abgelegt (ich habe ihn benannt global.js, aber Sie können verwenden, was Sie möchten. Wenn ich mich nicht irre, sollte jQuery die einzigen erforderlichen Skripts auf einer bestimmten Seite sein. Denken Sie daran ist weitgehend unüberprüft über einige grundlegende Verwendungszwecke hinaus, so dass möglicherweise Probleme mit der Art, wie ich es gemacht habe, bestehen kann oder nicht, yadda yadda Ich bin nicht verantwortlich, wenn Sie etwas vermasseln yadda yadda:

/**
* @fileoverview This file stores global functions that are required by other libraries.
*/

if (typeof(jQuery) === 'undefined') {
    throw 'jQuery is required.';
}

/** Defines the base script directory that all .js files are assumed to be organized under. */
var BASE_DIR = 'js/';

/**
* Loads the specified file, outputting it to the <head> HTMLElement.
*
* This method mimics the use of using in C# or import in Java, allowing
* JavaScript files to "load" other JavaScript files that they depend on
* using a familiar syntax.
*
* This method assumes all scripts are under a directory at the root and will
* append the .js file extension automatically.
*
* @param {string} file A file path to load using C#/Java "dot" syntax.
*
* Example Usage:
* imports('core.utils.extensions');
* This will output: <script type="text/javascript" src="/js/core/utils/extensions.js"></script>
*/
function imports(file) {
    var fileName = file.substr(file.lastIndexOf('.') + 1, file.length);

    // Convert PascalCase name to underscore_separated_name
    var regex = new RegExp(/([A-Z])/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);
}

Verwenden Sie besser die jQuery Methode. Um das Fertigereignis zu verzögern, rufen Sie zuerst an $.holdReady(true). Beispiel ( source ):

$.holdReady(true);
$.getScript("myplugin.js", function() {
    $.holdReady(false);
});

Wenn Sie Web Workers verwenden und zusätzliche Skripts in den Worker-Bereich aufnehmen möchten, headfunktionieren die anderen Antworten zum Hinzufügen von Skripts zum Tag usw. nicht für Sie.

Glücklicherweise haben Web Worker eine eigene importScriptsFunktion, die eine globale Funktion im Bereich des Web Worker ist, die im Browser selbst enthalten ist, da er Teil der Spezifikation ist .

Alternativ als die zweithöchsten gestimmt Antwort auf Ihre Frage Highlights , RequireJS können auch mit den Skripten in einer Web Worker Griff (wahrscheinlich Aufruf importScriptsselbst, aber mit einem paar anderen nützlichen Funktionen).





include