¿Cómo incluyo un archivo JavaScript en otro archivo JavaScript?

5728

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

0
4959

Las versiones antiguas de JavaScript no tenían importación, inclusión o requerimiento, por lo que se han desarrollado muchos enfoques diferentes para este problema.

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

Para compatibilidad con navegadores más antiguos, se pueden utilizar herramientas de compilación como Webpack y Rollup y / o herramientas de transpilación como Babel .

Módulos ES6

Los módulos ECMAScript (ES6) han sido compatibles con Node.js desde v8.5, con el --experimental-modulesindicador, y desde al menos Node.js v13.8.0 sin el indicador. Para habilitar "ESM" (vs sistema de módulos de estilo CommonJS anterior de Node.js [ "CJS"]) que sea para uso "type": "module"en package.jsono dar los archivos de la extensión .mjs. (De manera similar, los módulos escritos con el módulo CJS anterior de Node.js se pueden nombrar .cjssi su valor predeterminado es ESM).

Utilizando package.json:

{
    "type": "module"
}

Entonces module.js:

export function hello() {
  return "Hello";
}

Entonces main.js:

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

Usando .mjs, tendrías module.mjs:

export function hello() {
  return "Hello";
}

Entonces main.mjs:

import { hello } from './module.mjs';
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) desde Safari 10.1, Chrome 61, Firefox 60 y Edge 16. Verifique el soporte actual en caniuse . No es necesario utilizar la .mjsextensión de Node.js ; los navegadores ignoran completamente las extensiones de archivo en módulos / scripts.

<script type="module">
  import { hello } from './hello.mjs'; // Or it could be simply `hello.js`
  hello('world');
</script>
// hello.mjs -- or it could be simply `hello.js`
export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

Leer más en https://jakearchibald.com/2017/es-modules-in-browsers/

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>

Más información en https://developers.google.com/web/updates/2017/11/dynamic-import

Node.js requiere

El estilo de módulo CJS más antiguo, todavía ampliamente utilizado en Node.js, es module.exports/require system.

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

Hay otras formas de que JavaScript incluya contenido JavaScript externo en los navegadores que no requieren procesamiento previo.

Carga AJAX

Puede cargar un script adicional con una llamada AJAX y luego usarlo evalpara 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 evaltambién abre la puerta a errores, hacks y problemas de seguridad.

Obtener carga

Al igual que las importaciones dinámicas, puede cargar uno o varios scripts con una fetchllamada utilizando promesas para controlar el orden de ejecución de las dependencias del script utilizando la biblioteca Fetch Inject :

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

Carga de jQuery

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

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

Carga dinámica de secuencias de comandos

Puede agregar una etiqueta de secuencia de comandos con la URL de la secuencia de comandos 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 <script>etiqueta puede inyectarse en la página web <head>o insertarse justo antes de la </body>etiqueta de cierre .

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

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 <script>etiqueta al final de la sección del encabezado de la página, donde el srcatributo se establece en la URL que se le da a la función como primer parámetro.

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

Detectando cuando 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 seguirán ejecutando su secuencia de comandos actual porque cargan todo de forma asincrónica para mejorar el rendimiento. (Esto se aplica tanto al método jQuery como al método de carga de script dinámico manual).

Significa que si usa estos trucos directamente, no podrá usar su código recién cargado en la siguiente línea después de que solicitó que se cargue , porque todavía se estará cargando.

Por ejemplo: my_lovely_script.jscontiene 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. Entonces puede 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.head;
    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
};

Luego ejecuta todo eso:

loadScript("my_lovely_script.js", myPrettyCode);

Tenga en cuenta que el script puede ejecutarse después de que se haya cargado el DOM, 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 analiza esto.

Fusión / preprocesamiento de código fuente

Como se mencionó en la parte superior de esta respuesta, muchos desarrolladores usan 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 para navegadores más antiguos, combinar archivos, minificar, realizar la división de código, etc.

4
  • He cargado div dinámicamente haciendo clic en el menú sin cargar la página mediante el uso de hash de URL. Mi problema es cuando hago clic en la misma página 2/3 veces js cargando 2/3 veces. es por eso que cada evento ocurre varias veces. Quiero verificar el archivo js ya cargado en el pie de página / encabezado antes de agregar ese código: var js = document.createElement ("script"); js.type = "texto / javascript"; js.src = jsFilePath; document.body.appendChild (js); Alien 15/08/20 a las 17:33
  • Gracias por su aporte. ¿Hay alguna forma de insertar el guión al principio del encabezado? Glund 5 de ene a las 15:22
  • También puede usar algo como Gulp ( gulpjs.com ) para preprocesarlos y la salida es un solo archivo llamado. Por ejemplo: a) concatenar varios archivos JavaScript juntos en uno, b) usar Babel para hacerlo compatible con versiones anteriores, c) minificar / uglify para eliminar comentarios, espacios en blanco, etc. Luego, no solo ha organizado esos archivos sino que también los ha optimizado también al iniciar una canalización con el potencial de hacer lo mismo con otros formatos de archivo (como css e imágenes)Steven Ventimiglia 22 de febrero a las 1:48
  • jakearchibald.com/2017/es-modules-in-browsers parece ser un enlace muerto. David Spector 27 de mayo a las 15:47
603

Si alguien está buscando algo más avanzado, pruebe RequireJS . Obtendrá beneficios adicionales como administración de dependencias, mejor simultaneidad 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 simple solución de "busque este script".

Ejemplo:

Defina dependencias como módulos:

alguna-dependencia.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
});

deployment.js es su archivo JavaScript "principal" 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 del archivo README de GitHub :

RequireJS loads plain JavaScript files as well as more defined modules. It is optimized for in-browser use, including in a Web Worker, but it can be used in other JavaScript environments, like Rhino and Node. It implements the Asynchronous Module API.

RequireJS uses plain script tags to load modules/files, so it should allow for easy debugging. It can be used simply to load existing JavaScript files, so you can add it to your existing project without having to re-write your JavaScript files.

...

0
221

En realidad, hay una forma de cargar un archivo JavaScript no de forma asincrónica, por lo que puede usar las funciones incluidas en su archivo recién cargado justo después de cargarlo, y creo que funciona en todos los navegadores.

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

$("head").append($("<script></script>").attr("src", url));

/* Note that following line of code is incorrect because it doesn't escape the
 * HTML attribute src correctly and will fail if `url` contains special characters:
 * $("head").append('<script src="' + url + '"></script>');
 */

Sin embargo, este método también tiene un problema: si ocurre un error en el archivo JavaScript importado, Firebug (y también Firefox Error Console y Chrome Developer Tools también) informará su lugar incorrectamente, lo cual es un gran problema si usa Firebug para rastrear Los errores de JavaScript bajan mucho (yo 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 encontrar la verdadera razón del error.

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

De hecho, escribí 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></script').attr('src', script));
                import_js_imported.push(script);
            }
        }
    });
    
})(jQuery);

Entonces, todo lo que necesita hacer para importar JavaScript es:

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

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

Incluye un main.jsarchivo en el HTML principal y luego el script en main.jsuso $.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 incluirla included.js, hello()se llama a la función y recibe la alerta.

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

0
169

Otra forma, que en mi opinión es mucho más limpia, es hacer una solicitud Ajax sincrónica en lugar de usar una <script>etiqueta. Que es también cómo maneja Node.js incluye.

Aquí hay un ejemplo usando 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);
        }
    });
}

Luego puede usarlo en su código como normalmente usaría un include:

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

Y poder llamar a una función desde el script requerido en la siguiente línea:

subscript.doSomethingCool(); 
0
112

Es posible generar dinámicamente una etiqueta JavaScript y agregarla a un documento HTML desde dentro de otro código JavaScript. Esto cargará el archivo JavaScript de destino.

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

Hay buenas noticias para ti. Muy pronto podrá cargar código JavaScript fácilmente. Se convertirá en una forma estándar de importar módulos de código JavaScript y será parte del núcleo de JavaScript.

Simplemente tiene que escribir import cond from 'cond.js';para cargar una macro nombrada conddesde un archivo cond.js.

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

Referirse a:

3
  • Siete años después, esta respuesta no funciona: "SyntaxError: las declaraciones de importación solo pueden aparecer en el nivel superior de un módulo". David Spector 27 de mayo a las 15:52
  • Comparta su código lo que está intentando hacer. Imdad 31 de mayo a las 12:06 p.m.
  • Bien, aquí hay un código que funciona bien: function Include (jsFilePath) {var js = d.createElement ("script"); js.type = "texto / javascript"; js.src = jsFilePath; d.body.appendChild (js); } // IncluirDavid Spector 31 de mayo a las 17:04
83

La declaración importestá en ECMAScript 6.

Sintaxis

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

Quizás 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)
}
59

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 que este dominio cruzado funcione, el servidor deberá establecer el allow-originencabezado en su respuesta.

53

Acabo de escribir este código JavaScript (usando Prototype para manipulación 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 .

51

Aquí está la versión generalizada de cómo lo hace Facebook 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 scriptelemento en lugar de heado bodyes porque algunos navegadores no crean uno si falta, pero tenemos la garantía de tener un scriptelemento: este. Lea más en http://www.jspatterns.com/the-ridiculous-case-of-adding-a-script-element/ .

0
50

Si lo desea en JavaScript puro, puede usar document.write.

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

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

$.getScript("another_script.js");
0
36

También puede ensamblar sus 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
0
31

La mayoría de las soluciones que se muestran aquí implican una carga dinámica. En cambio, estaba buscando un compilador que reuniera todos los archivos dependientes en un solo archivo de salida. Lo mismo que los preprocesadores Less / Sass se ocupan de la @importregla at de CSS . 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 de origen atómico en uno solo que comienza con intro.jsy termina con outtro.js. Eso no me conviene, ya que no proporciona flexibilidad en el diseño del código fuente. Vea 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 obtén el archivo combinado

build / main.js

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

Si su intención de cargar el archivo JavaScript es utilizar 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");
}

file2.js

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

main.js

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

Solo debe tener cuidado al incluir secuencias de comandos en un archivo HTML. El orden debe ser 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>
1
  • Esta no es una buena idea cuando tiene muchos archivos separados; Cuantos más archivos cree, más solicitudes se enviarán por parte del cliente, lo que prolonga la carga y también puede afectar el SEO de la página. YektaDev 12 abr a las 8:00
25

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

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

Ver también:

0
25

Esto debería hacer:

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

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

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 vio, usé una variable en un archivo JavaScript en otro archivo JavaScript, pero no necesitaba incluir una en otro. Solo necesitaba asegurarme de que el primer archivo JavaScript se cargue antes que el segundo archivo JavaScript, y las variables del primer archivo JavaScript sean accesibles en el segundo archivo JavaScript, automáticamente.

Esto me salvó el día. Espero que esto ayude.

0
19

En un lenguaje moderno con la verificación si el script ya se ha cargado, sería:

function loadJs( url ){
  return new Promise(( resolve, reject ) => {
    if (document.querySelector( `head > script[ src = "${url}" ]`) !== null ){
        console.warn( `script already loaded: ${url}` );
        resolve();
    }
    const script = document.createElement( "script" );
    script.src = url;
    script.onload = resolve;
    script.onerror = function( reason ){
        // This can be useful for your error-handling code
        reason.message = `error trying to load script ${url}`;
        reject( reason );
    };
    document.head.appendChild( script );
  });
}

Uso (asincrónico / en espera):

try { await loadJs("https://.../script.js"); }
catch(error) { console.log(error); }

o

await loadJs( "https://.../script.js" ).catch( err => {} );

Uso (promesa):

loadJs( "https://.../script.js" ).then( res => {} ).catch( err => {} );
2
  • Esto es muy bueno si desea evitar tener que involucrarse en módulos y no desea usar una función de devolución de llamada, pero sí desea usar async/ await. mike rodent 19/07/20 a las 7:25
  • urldebe escaparse correctamente aquí:`head > script[ src = "${url}" ]`Flimm 12 de mayo y 13 h
19

La @importsintaxis para lograr la importación de JavaScript similar a CSS es posible utilizando una herramienta como Mixture a través de su .mixtipo de archivo especial (ver aquí ). Supongo que la aplicación hace esto a través de uno de los métodos mencionados anteriormente.

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

Mix files are simply .js or .css files with .mix. in the file name. A mix file simply extends the functionality of a normal style or script file and allows you to import and combine.

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

Mixture genera 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 plantillas de Mixture) y estar un poco confundido ("¿puedes hacer esto?", Pensé para mí). Luego me di cuenta de que era un tipo de archivo específico de la aplicación (algo decepcionante, de acuerdo). Sin embargo, pensé que el conocimiento podría ser útil para otros.

Nota: La mezcla se suspendió el 26/07/2016 (después de ser de código abierto el 12/04/2015).

1
  • Es mejor evitar "Actualizar" (metainformación que pertenece al historial de revisión de esta publicación). En su lugar, aplíquelo al contenido (no a esta publicación), por ejemplo, "La mezcla se obtuvo de código abierto el 12 de abril de 2015 y se suspendió el 26 de julio de 2016". Peter Mortensen 3 oct.20 a las 20:50
18

En caso de que esté utilizando Web Workers y desee incluir scripts adicionales en el alcance del trabajador, las otras respuestas proporcionadas sobre cómo agregar scripts a la headetiqueta, etc., no funcionarán para usted.

Afortunadamente, los Web Workers tienen su propia importScriptsfunción, que es una función global dentro del alcance del Web Worker, nativa del navegador en sí, ya que es parte de la especificación .

Alternativamente, como se destaca la segunda respuesta más votada a su pregunta , RequireJS también puede manejar la inclusión de scripts dentro de un Web Worker (probablemente llamándose a importScriptssí mismo, pero con algunas otras características útiles).

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

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

document.body.appendChild(js);
0
16

Aunque estas respuestas son excelentes, existe una "solución" simple que ha existido desde que existió la carga de scripts y cubrirá el 99,999% de los casos de uso de la mayoría de las personas. Simplemente incluya el script que necesita antes del script que lo requiere. Para la mayoría de los proyectos, no se necesita mucho tiempo para determinar qué scripts se necesitan y en qué orden.

<!DOCTYPE HTML>
<html>
    <head>
        <script src="script1.js"></script>
        <script src="script2.js"></script>
    </head>
    <body></body>
</html>

Si script2 requiere script1, esta es realmente la forma más sencilla de hacer algo como esto. Estoy muy sorprendido de que nadie haya mencionado esto, ya que es la respuesta más obvia y simple que se aplicará en casi todos los casos.

2
  • Esta es una buena respuesta. Es posible que se haya perdido porque no responde directamente a la pregunta, pero también es importante comprender que "normalmente no es necesario hacer eso". Especialmente porque las otras soluciones son tan complicadas. Nathan Kovner 27/07/20 a las 18:44
  • ¿Pero esto solo funciona en un navegador web? ¿Qué pasa con las pruebas unitarias fuera de línea (por ejemplo, en Node.js)? Peter Mortensen 3 oct.20 a las 20:31
14

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 usa recargas de página para mí. Probé 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 readyState (el estado del contenido que se va a cargar) cambia a "cargado".

14

Módulos ES6

, use type = "module" en una etiqueta de script ( soporte ):

<script type="module" src="script.js"></script>

Y en un script.jsarchivo incluye otro archivo como este:

import { hello } from './module.js';
...
// alert(hello());

En 'module.js' debes exportar la función / clase que importarás:

export function hello() {
    return "Hello World";
}

Un ejemplo práctico está aquí .

0
13

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 del blog 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);
};
13

Esta secuencia de comandos 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);
})();
0
13

¡Manténgalo agradable, breve, simple y fácil de mantener! :]

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

Este código es simplemente un breve ejemplo funcional que podría requerir una funcionalidad de función adicional para un soporte completo en cualquier plataforma (o dada).

1
  • Una explicación estaría en orden. Por ejemplo, ¿cuál es la idea (principio de funcionamiento) y cómo funciona? Peter Mortensen 3 oct.20 a las 20:53
12

Llegué a esta pregunta porque estaba buscando una forma sencilla de mantener una colección de complementos de JavaScript útiles. Después de ver algunas de las soluciones aquí, se me ocurrió esto:

  1. Configura un archivo llamado "plugins.js" (o extensions.js o lo que quieras). Mantenga sus archivos de complemento junto con ese archivo maestro.

  2. plugins.js tendrá una matriz llamada sobre la pluginNames[]que iteraremos each(), luego agregaremos una <script>etiqueta al encabezado para cada complemento

//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>');
});
  1. Llame manualmente solo el archivo en su cabeza:
    <script src="js/plugins/plugins.js"></script>

PERO:

Aunque todos los complementos se colocan en la etiqueta principal como deberían, el navegador no siempre los ejecuta cuando hace clic en la página o actualiza.

Descubrí que es más confiable simplemente escribir las etiquetas de script en una inclusión de PHP. Solo tiene que escribirlo una vez y eso es tanto trabajo como llamar al complemento usando JavaScript.

1
  • Tenga en cuenta que si pluginNames contiene caracteres especiales, esto no funcionará e incluso podría provocar una vulnerabilidad de seguridad. Debe utilizar el escape adecuado aquí:$('head').append('<script src="js/plugins/' + this + '.js"></script>');Flimm 12 de mayo a las 13:01
12

Hay varias formas de implementar módulos en JavaScript. Aquí están los dos más populares:

Módulos ES6

Los navegadores aún no son compatibles con este sistema de modulación, por lo que para poder utilizar esta sintaxis debe utilizar un paquete como Webpack . De todos modos, usar un paquete es mejor porque puede combinar todos sus archivos diferentes en uno solo (o un par de archivos relacionados). Esto servirá los archivos desde el servidor al cliente más rápido porque cada solicitud HTTP tiene una sobrecarga asociada acompañada. Por lo tanto, al reducir la solicitud HTTP general, mejoramos el rendimiento. Aquí hay un ejemplo de módulos ES6:

// 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 (utilizado en Node.js)

Este sistema de modulación se utiliza en Node.js. Básicamente, agrega sus exportaciones a un objeto que se llama module.exports. Luego puede acceder a este objeto a través de un archivo require('modulePath'). Importante aquí es darse cuenta de que estos módulos se están almacenando en caché, por lo que si usa require()un determinado módulo dos veces, devolverá el módulo ya creado.

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