file llamar - ¿Cómo incluyo un archivo JavaScript en otro archivo JavaScript?



incluir html (25)

¿Hay algo en JavaScript similar a @import en CSS que le permita incluir un archivo JavaScript dentro de otro archivo JavaScript?


Answers

Esto debería hacer:

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

O en lugar de incluirlo en el tiempo de ejecución, use un script para concatenar antes de cargar.

Yo uso Sprockets (no sé si hay otros). Construye su código JavaScript en archivos separados e incluye comentarios que son procesados ​​por el motor de Sprockets como se incluye. Para el desarrollo, puede incluir archivos de forma secuencial, luego, para que la producción los combine ...

Ver también:


Acabo de escribir este código JavaScript (utilizando Prototype para la manipulación de DOM ):

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

Uso:

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


Si quieres en JavaScript puro, puedes usar document.write .

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

Si usa la biblioteca jQuery, puede usar el método $.getScript .

$.getScript("another_script.js");

Este script agregará un archivo JavaScript en la parte superior de cualquier otra <script>etiqueta:

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

La mayoría de las soluciones mostradas aquí implican carga dinámica. En su lugar, estaba buscando un compilador que reuniera todos los archivos dependientes en un único archivo de salida. De la misma forma que los preprocesadores Less / Sass ocupan de CSS @import at-rule. Como no encontré nada decente de este tipo, escribí una herramienta simple para resolver el problema.

Así que aquí está el compilador, https://github.com/dsheiko/jsic , que reemplaza $import("file-path") con el contenido del archivo solicitado de forma segura. Aquí está el complemento Grunt correspondiente: https://github.com/dsheiko/grunt-jsic .

En la rama maestra de jQuery, simplemente concatenan archivos fuente atómicos en uno solo, comenzando con intro.js y terminando con outtro.js . Eso no me conviene, ya que no proporciona flexibilidad en el diseño del código fuente. Echa un vistazo a cómo funciona con jsic:

src / main.js

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

src / Form / Input / Tel.js

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

Ahora podemos ejecutar el compilador:

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

Y consigue el archivo combinado.

construir / main.js

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

Tal vez pueda usar esta función que encontré en esta página ¿Cómo incluyo un archivo JavaScript en un archivo 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)
}

Si alguien está buscando algo más avanzado, pruebe RequireJS . Obtendrá beneficios adicionales como la administración de dependencias, una mejor concurrencia y evitará la duplicación (es decir, recuperar un script más de una vez).

Puede escribir sus archivos JavaScript en "módulos" y luego hacer referencia a ellos como dependencias en otros scripts. O puede usar RequireJS como una solución simple "vaya a obtener este script".

Ejemplo:

Definir dependencias como módulos:

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

implementacion.js es su archivo "principal" de JavaScript que depende de some-dependency.js

require(['some-dependency'], function(dependency) {

    //Your script goes here
    //some-dependency.js is fetched.   
    //Then your script is executed
});

Extracto de GitHub README:

RequireJS carga archivos JavaScript simples así como módulos más definidos. Está optimizado para su uso en el navegador, incluso en un trabajador web, pero se puede usar en otros entornos de JavaScript, como Rhino y Node. Implementa la API del módulo asíncrono.

RequireJS utiliza etiquetas de script sin formato para cargar módulos / archivos, por lo que debería permitir una fácil depuración. Puede usarse simplemente para cargar archivos JavaScript existentes, de modo que puede agregarlo a su proyecto existente sin tener que volver a escribir sus archivos JavaScript.

...


Mi método habitual es:

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

Funciona muy bien y no utiliza recarga de página para mí. He probado el método AJAX (una de las otras respuestas) pero no parece funcionar tan bien para mí.

Aquí hay una explicación de cómo funciona el código para aquellos que son curiosos: esencialmente, crea una nueva etiqueta de script (después de la primera) de la URL. Lo establece en modo asíncrono para que no bloquee el resto del código, pero llama a una devolución de llamada cuando el estado preparado (el estado del contenido que se va a cargar) cambia a 'cargado'.


También hay Head.js . Es muy fácil tratar con:

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

Como ve, es más fácil que Require.js y tan conveniente como el $.getScriptmétodo de jQuery . También tiene algunas características avanzadas, como carga condicional, detección de características y mucho más .


Tenía un problema simple, pero me desconcertaron las respuestas a esta pregunta.

Tuve que usar una variable (myVar1) definida en un archivo JavaScript (myvariables.js) en otro archivo JavaScript (main.js).

Para esto hice lo siguiente:

Cargó el código JavaScript en el archivo HTML, en el orden correcto, primero myvariables.js, luego main.js:

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

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

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

Archivo: myvariables.js

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

Archivo: main.js

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

Como viste, usé una variable en un archivo JavaScript en otro archivo JavaScript, pero no tuve que incluir una en otro. Solo necesitaba asegurarme de que el primer archivo JavaScript cargado antes del segundo archivo JavaScript, y las variables del primer archivo JavaScript estén accesibles en el segundo archivo JavaScript automáticamente.

Esto salvó mi día. Espero que esto ayude.


Escribí un módulo simple que automatiza el trabajo de importar / incluir scripts de módulos en JavaScript. Para obtener una explicación detallada del código, consulte la publicación de blog que requiere JavaScript / 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);
};

Si su intención de cargar el archivo JavaScript está utilizando las funciones del archivo importado / incluido , también puede definir un objeto global y establecer las funciones como elementos de objeto. Por ejemplo:

global.js

A = {};

file1.js

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

archivo2.js

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

main.js

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

Solo debe tener cuidado al incluir scripts en un archivo HTML. El orden debe ser como en el siguiente:

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

Aquí está la versión generalizada de cómo Facebook lo hace para su omnipresente botón Me gusta:

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

Si funciona para Facebook, funcionará para ti.

La razón por la que buscamos el primer elemento de script lugar de la head o el body es porque algunos navegadores no crean uno si faltan, pero estamos seguros de que tenemos un elemento de script , este. Lea más en http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/ .


He creado una función que le permitirá usar una palabrería similar a C # / Java para incluir un archivo JavaScript. Lo he probado un poco incluso desde dentro de otro archivo JavaScript y parece funcionar. Sin embargo, sí requiere jQuery para un poco de "magia" al final.

Puse este código en un archivo en la raíz de mi directorio de secuencias de comandos (lo nombré global.js, pero puedes usar lo que quieras. A menos que me equivoque y jQuery deberían ser las únicas secuencias de comandos requeridas en una página dada. Ten en cuenta esto En gran medida no se ha probado más allá de algún uso básico, por lo que puede o no haber problemas con la forma en que lo he hecho; úselo bajo su propio riesgo yadda yadda No soy responsable si arruina algo 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);
}

Aquí hay una versión sincrónica sin 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);
}

Tenga en cuenta que para obtener este dominio cruzado de trabajo, el servidor deberá establecer el encabezado de allow-origin permitido en su respuesta.


Hay una buena noticia para ti. Muy pronto podrás cargar código JavaScript fácilmente. Se convertirá en una forma estándar de importar módulos de código JavaScript y formará parte de JavaScript en sí.

Simplemente tienes que escribir las condiciones de import cond from 'cond.js'; para cargar una macro llamada cond desde un archivo cond.js

Por lo tanto, no tiene que depender de ningún marco de JavaScript ni tiene que hacer llamadas Ajax explícitamente.

Referirse a:


Las versiones anteriores de JavaScript no importaban, incluían ni requerían, por lo que se han desarrollado muchos enfoques diferentes para este problema.

Pero desde 2015 (ES6), JavaScript ha tenido los módulos estándar ES6 para importar módulos en Node.js, que también es compatible con la mayoría de los navegadores modernos .

Para la compatibilidad con navegadores más antiguos, se pueden usar herramientas de build y / o transpilation .

Módulos ES6

Los módulos ECMAScript (ES6) se han admitido en Node.js desde v8.5, con el --experimental-modules . Todos los archivos involucrados deben tener la extensión .mjs .

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

Módulos ECMAScript en navegadores

Los navegadores han tenido soporte para cargar módulos ECMAScript directamente (no se requieren herramientas como Webpack) since Safari 10.1, Chrome 61, Firefox 60 y Edge 16. Verifique el soporte actual en 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);
}

Lea más en: since

Importaciones dinámicas en navegadores.

Las importaciones dinámicas permiten que el script cargue otros scripts según sea necesario:

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

Lea más en: https://developers.google.com/web/updates/2017/11/dynamic-import

Node.js requiere

El antiguo estilo de importación de módulos, todavía muy utilizado en Node.js, es el module.exports/require sistema module.exports/require .

// mymodule.js
module.exports = {
   hello: function() {
      return "Hello";
   }
}
// server.js
const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"   

Existen otras formas para que JavaScript incluya contenidos de JavaScript externos en los navegadores que no requieren preprocesamiento.

AJAX Cargando

Podría cargar un script adicional con una llamada AJAX y luego usar eval para ejecutarlo. Esta es la forma más sencilla, pero está limitada a su dominio debido al modelo de seguridad de la zona de pruebas de JavaScript. El uso de eval también abre la puerta a errores, trucos y problemas de seguridad.

jQuery Cargando

La biblioteca jQuery proporciona la funcionalidad de carga en una línea :

$.getScript("my_lovely_script.js", function() {
   alert("Script loaded but not necessarily executed.");
});

Carga dinámica de script

Podría agregar una etiqueta de script con la URL del script en el HTML. Para evitar la sobrecarga de jQuery, esta es una solución ideal.

El script puede incluso residir en un servidor diferente. Además, el navegador evalúa el código. La etiqueta <script> puede inyectarse en la página web <head> o insertarse justo antes de la etiqueta de cierre </body> .

Aquí hay un ejemplo de cómo esto podría funcionar:

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

Esta función agregará una nueva etiqueta <script> al final de la sección de encabezado de la página, donde el atributo src se establece en la URL que se asigna a la función como primer parámetro.

Ambas soluciones se discuten e ilustran en JavaScript Madness: Dynamic Script Loading .

Detectar cuándo se ha ejecutado el script.

Ahora, hay un gran problema que debes conocer. Hacer eso implica que carga el código de forma remota . Los navegadores web modernos cargarán el archivo y continuarán ejecutando su script actual porque cargan todo de forma asíncrona para mejorar el rendimiento. (Esto se aplica tanto al método jQuery como al método manual de carga dinámica de scripts).

Significa que si usa estos trucos directamente, no podrá usar su código recién cargado en la siguiente línea después de pedir que se cargue , ya que seguirá cargándose.

Por ejemplo: my_lovely_script.js contiene 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

Luego recargas la página pulsando F5 . ¡Y funciona! Confuso...

Entonces, ¿qué hacer al respecto?

Bueno, puedes usar el truco que sugiere el autor en el enlace que te di. En resumen, para las personas que tienen prisa, usa un evento para ejecutar una función de devolución de llamada cuando se carga el script. Así que puedes poner todo el código usando la biblioteca remota en la función de devolución de llamada. Por ejemplo:

function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    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);
}

Luego escribe el código que desea usar DESPUÉS de que el script se cargue en una función lambda :

var myPrettyCode = function() {
   // Here, do whatever you want
};

Entonces corres todo eso

loadScript("my_lovely_script.js", myPrettyCode);

Tenga en cuenta que la secuencia de comandos puede ejecutarse después de que el DOM se haya cargado, o antes, según el navegador y si incluyó la línea script.async = false; . Hay un gran artículo sobre la carga de Javascript en general que discute esto.

Código fuente de combinación / preprocesamiento

Como se mencionó en la parte superior de esta respuesta, muchos desarrolladores utilizan herramientas de compilación / transpilación como Parcel, Webpack o Babel en sus proyectos, lo que les permite usar la próxima sintaxis de JavaScript, proporcionar compatibilidad con versiones anteriores de navegadores más antiguos, combinar archivos, minimizar, realizar división de código etc.


En realidad, existe una forma de cargar un archivo JavaScript no de forma asíncrona, por lo que podría usar las funciones incluidas en su archivo recién cargado inmediatamente después de cargarlo, y creo que funciona en todos los navegadores.

jQuery.append() usar jQuery.append() en el elemento <head> de su página, es decir:

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

Sin embargo, este método también tiene un problema: si ocurre un error en el archivo JavaScript importado, Firebug (y también la Consola de errores de Firefox y las Herramientas para desarrolladores de Chrome también) informará de su ubicación de forma incorrecta, lo cual es un gran problema si utiliza Firebug para realizar un seguimiento Los errores de JavaScript bajan mucho (lo hago). Firebug simplemente no conoce el archivo recién cargado por alguna razón, por lo que si ocurre un error en ese archivo, informa que ocurrió en su archivo HTML principal y tendrá problemas para descubrir la verdadera razón del error.

Pero si eso no es un problema para ti, entonces este método debería funcionar.

De hecho, he escrito un complemento de jQuery llamado $ .import_js () que usa este método:

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

Así que todo lo que necesitas hacer para importar JavaScript es:

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

También hice una prueba simple para esto en el Example .

Incluye un archivo main.js en el HTML principal y luego el script en main.js usa $.import_js() para importar un archivo adicional llamado included.js , que define esta función:

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

Y justo después de incluir included.js , se llama a la función hello() y se recibe la alerta.

(Esta respuesta es en respuesta al comentario de e-satis).


En caso de que esté utilizando Trabajadores Web y desee incluir secuencias de comandos adicionales en el ámbito del trabajador, las otras respuestas proporcionadas sobre la adición de secuencias de comandos a la etiqueta de head , etc. no funcionarán para usted.

Afortunadamente, los Trabajadores Web tienen su propia función importScripts , que es una función global en el ámbito del Trabajador Web, nativa del navegador en sí, ya que forma parte de la especificación .

Alternativamente, como la segunda respuesta más votada a sus preguntas resaltadas , RequireJS también puede manejar la inclusión de scripts dentro de un Trabajador Web (es probable que llame a importScripts sí, pero con algunas otras características útiles).


En lenguaje moderno seria

function loadJs( url ){
  return new Promise( resolve => {
    const script = document.createElement( "script" );
    script.src = url;
    script.onload = resolve;
    document.head.appendChild( script );
  });
}

var js = document.createElement("script");

js.type = "text/javascript";
js.src = jsFilePath;

document.body.appendChild(js);

También puedes ensamblar tus scripts usando PHP :

Archivo 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

La @importsintaxis para lograr la importación de JavaScript similar a CSS es posible usando una herramienta como Mixture a través de su .mixtipo de archivo especial (ver here ). Me imagino que la aplicación simplemente usa uno de los métodos antes mencionados, aunque no lo sé.

De la documentación de la mezcla en .mixarchivos:

Los archivos de mezcla son simplemente archivos .js o .css con .mix. en el nombre del archivo. Un archivo mix simplemente extiende la funcionalidad de un estilo normal o un archivo de script y le permite importar y combinar.

Aquí hay un .mixarchivo de ejemplo que combina varios .jsarchivos en uno:

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

La mezcla produce esto como scripts-global.jsy también como una versión minificada ( scripts-global.min.js).

Nota: No estoy afiliado de ninguna manera con Mixture, aparte de usarlo como una herramienta de desarrollo de front-end. Me encontré con esta pregunta al ver un .mixarchivo JavaScript en acción (en una de las placas de mezclas de Mixture) y estar un poco confundido ("puedes hacer esto", pensé para mí mismo). Luego me di cuenta de que era un tipo de archivo específico de la aplicación (algo decepcionante, de acuerdo). Sin embargo, imaginé que el conocimiento podría ser útil para otros.

ACTUALIZACIÓN : La mezcla ahora es gratuita (fuera de línea).

ACTUALIZACIÓN : La mezcla ahora está descontinuada. Todavía están disponibles versiones antiguas de mezclas .


¿Qué pasa con una solución de JavaScript ?

Declara un fragmento:

var fragment = document.createDocumentFragment();

Agregue el elemento deseado al fragmento:

fragment.appendChild(document.getElementById('source'));

Adjuntar fragmento al elemento deseado:

document.getElementById('destination').appendChild(fragment);

Echale un vistazo.





javascript file import include