Como incluir o arquivo javascript em outro arquivo javascript?

O JavaScript tem algo parecido com o @import em CSS que permite incluir um arquivo javascript em outro arquivo javascript?

4465
04 июня '09 в 14:59 2009-06-04 14:59 Alec inteligente está marcada para 04 de junho de 2009 às 14:59 2009-06-04 14:59
@ 56 respostas
  • 1
  • 2

Nas versões mais antigas do JavaScript, não havia importação, inclusão ou requisito; portanto, muitas abordagens diferentes para esse problema foram desenvolvidas.

Mas desde 2015 (ES6), o padrão dos módulos ES6 para importar módulos para o Node.js apareceu em JavaScript, que também é suportado pela maioria dos navegadores modernos .

Para compatibilidade com navegadores mais antigos, você pode usar as ferramentas de compilação e / ou transferência .

Módulos ES6

Os módulos ECMAScript (ES6) são suportados no Node.js desde a versão - --experimental-modules flag - --experimental-modules . Todos .mjs arquivos .mjs devem ter a extensão .mjs .

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

Módulos ECMAScript nos navegadores

Os navegadores suportam o carregamento de módulos ECMAScript diretamente (não são necessárias ferramentas como o Webpack), começando com o Safari 10.1, Chrome 61, Firefox 60 e Edge 16. Confira o suporte atual em caniuse .

 // hello.mjs export function hello(text) { const div = document.createElement('div'); div.textContent = 'Hello ${text}'; document.body.appendChild(div); } 

Saiba mais em https://jakearchibald.com/2017/es-modules-in-browsers/

Importação dinâmica em navegadores

A importação dinâmica permite que o script carregue outros scripts conforme necessário:

https://developers.google.com/web/updates/2017/11/dynamic-import. 

Node.js requer

O antigo estilo de importação do módulo, ainda amplamente usado no Node.js, é o módulo module.exports / require .

 // server.js const myModule = require('./mymodule'); let val = myModule.hello(); // val is "Hello" 

Existem outras maneiras de ativar o conteúdo externo de JavaScript em navegadores que não exigem pré-processamento.

Download AJAX

Você pode carregar um script adicional usando uma chamada AJAX e, em seguida, usar o eval para executá-lo. Essa é a maneira mais fácil, mas é limitada ao seu domínio devido ao modelo de segurança do sandbox do JavaScript. O uso do eval também abre caminho para bugs, hackers e problemas de segurança.

Baixar Baixar

Assim como com as importações dinâmicas, você pode carregar um ou mais scripts chamando fetch usando promessas para controlar a ordem na qual as dependências de script são executadas usando a 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)}') }) 

Carregamento de JQuery

A biblioteca jQuery fornece carregamento de linha única :

Essa função adicionará um novo <script> ao final da seção head da página, onde o atributo src é definido como o URL, que é passado para a função como o primeiro parâmetro.

Ambas as soluções são discutidas e ilustradas em JavaScript Madness: carregamento dinâmico de scripts .

Detecção quando o script foi executado

Agora há um grande problema que você deve estar ciente. Isso significa que você faz o download do código remotamente. Os navegadores da Web modernos carregam o arquivo e continuam executando seu script atual, porque eles carregam tudo de forma assíncrona para melhorar o desempenho. (Isso se aplica tanto ao método jQuery quanto ao método de carregamento dinâmico de script manual.)

Isso significa que, se você usar esses truques diretamente, não poderá usar o código recém-baixado na próxima linha depois de ter solicitado o download, porque ele ainda será carregado.

Por exemplo: my_lovely_script.js contém MySuperObject :

Então você escreve o código que você quer usar APÓS o script ser carregado na função lambda :

 loadScript("my_lovely_script.js", myPrettyCode); 

Observe que o script pode ser executado depois que o DOM é carregado ou anterior, dependendo do navegador e de se a linha script.async = false; está ativada script.async = false; Existe um ótimo artigo sobre o download do Javascript em geral, que discute isso.

Merge / pré-processamento de código-fonte

Como mencionado no início desta resposta, muitos desenvolvedores usam ferramentas de construção / transferência em seus projetos, como Parcel, Webpack ou Babel, que permitem usar a próxima sintaxe JavaScript, fornecer compatibilidade com versões anteriores para navegadores mais antigos, mesclar arquivos, minimizar e dividir código e assim por diante

3838
04 июня '09 в 15:13 2009-06-04 15:13 a resposta é dada e-satis 04 June '09 at 15:13 2009-06-04 15:13

Se alguém estiver procurando por algo mais avançado, tente o RequireJS . Você obterá benefícios adicionais, como gerenciamento de dependência, concorrência aprimorada e evitar duplicação (isto é, obter o script mais de uma vez).

Você pode escrever seus arquivos JavaScript em "módulos" e depois referenciá-los como dependências em outros scripts. Ou você pode usar o RequireJS como uma simples solução “vá e obtenha este script”.

Exemplo:

Definir dependências como módulos:

some-dependency.js

border=0
 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 }); 

O creation.js é o seu arquivo javascript "principal", que depende do arquivo some-dependency.js

 require(['some-dependency'], function(dependency) { //Your script goes here //some-dependency.js is fetched. //Then your script is executed }); 

Trecho do GitHub README:

O RequireJS carrega arquivos JavaScript simples, assim como módulos mais específicos. Ele é otimizado para uso no navegador, incluindo o Web Worker, mas pode ser usado em outros ambientes JavaScript, como Rhino e Node. Implementa a API do módulo assíncrono.

O RequireJS usa tags de script simples para carregar módulos / arquivos, portanto deve fornecer depuração fácil. Ele pode ser usado simplesmente para carregar arquivos JavaScript existentes, para que você possa adicioná-lo a um projeto existente sem ter que reescrever os arquivos JavaScript.

...

532
07 июня '12 в 23:55 2012-06-07 23:55 Resposta é dada por John Strickler em junho 07 '12 em 23:55 2012-06-07 23:55

Na verdade, existe uma maneira de baixar um arquivo javascript não de forma assíncrona, para que você possa usar as funções incluídas no arquivo recém-carregado imediatamente após o download, e acho que ele funciona em todos os navegadores.

Você precisa usar jQuery.append() no elemento <head> da sua página, ou seja:

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

No entanto, esse método também tem um problema: se ocorrer um erro no arquivo JavaScript importado, o Firebug (bem como o Firefox Error Console e o Chrome Developer Tools também informarão sua localização incorretamente, o que é um grande problema se você usar o Firebug para rastrear muito erros de JavaScript) Por algum motivo, o Firebug simplesmente não sabe sobre o arquivo recém-carregado, portanto, se ocorrer um erro nesse arquivo, ele informará que ocorreu no seu arquivo HTML principal e você terá problemas para localizar a verdadeira causa do erro.

Mas se isso não é um problema para você, então este método deve funcionar.

Na verdade, eu escrevi um plugin do jQuery chamado $ .import_js () que usa esse método:

 (function($) {  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); 

Portanto, tudo o que você precisa fazer para importar o JavaScript é:

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

Eu também fiz um teste simples para isso no Exemplo .

Ele inclui o arquivo main.js no HTML principal e, em seguida, o script em main.js usa $.import_js() para importar um arquivo adicional chamado included.js , que define esta função:

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

E imediatamente depois de incluir o included.js , a função hello() é chamada e você receberá uma notificação.

(Esta resposta é uma resposta ao comentário e-sat).

173
28 апр. Responder Kipras 28 abr. 2011-04-28 18:25 '11 às 18:25 2011-04-28 18:25

Outra maneira que, na minha opinião, é muito mais limpa, é fazer uma requisição Ajax síncrona ao invés de usar <script> . Além disso, processa o Node.js.

Aqui está um exemplo de uso do 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); } }); } 

Então você pode usá-lo em seu código, como se você costumava incluir incluir:

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

E você pode chamar a função do script necessário na seguinte linha:

 subscript.doSomethingCool(); 
138
08 сент. A resposta é dada por Ariel 08 de setembro 2011-09-08 21:22 '11 às 21:22 2011-09-08 21:22

Boas notícias para você Muito em breve você poderá carregar facilmente o código JavaScript. Essa será a maneira padrão de importar módulos de código JavaScript e se tornar parte do próprio núcleo do JavaScript.

Você apenas tem que escrever import cond from 'cond.js'; carregar a macro nomeada cond do arquivo cond.js

Portanto, você não precisa depender de nenhuma infraestrutura JavaScript e não faz explicitamente chamadas Ajax .

Consulte:

90
03 июля '12 в 16:32 2012-07-03 16:32 a resposta é dada Imdad 03 de julho '12 at 4:32 2012-07-03 16:32

Você pode gerar dinamicamente uma tag JavaScript e adicioná-la a um documento HTML de outro código JavaScript. Isso carregará o arquivo de 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"); 
78
04 июня '09 в 15:02 2009-06-04 15:02 respondeu a Svitlana Maksymchuk em 04 de junho de 2009 às 15:02 2009-06-04 15:02

operador de import no ECMAScript 6.

Sintaxe

 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; 
61
17 апр. Resposta dada por draupnie em 17 Abr 2015-04-17 04:56 '15 às 4:56 2015-04-17 04:56

Talvez você possa usar esta função que eu encontrei nesta página.Como faço para incluir um arquivo javascript em um arquivo 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) } 
51
04 июня '09 в 15:04 2009-06-04 15:04 Resposta é dada por Arnaud Gouder de Beauregard 04 de junho de 2009 às 15:04 2009-06-04 15:04

Aqui está a versão síncrona sem 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); } 

Observe que, para obter esse domínio em funcionamento, o servidor precisará definir um cabeçalho de allow-origin em sua resposta.

47
11 дек. A resposta é dada por heinob 11 dez. 2013-12-11 14:54 '13 às 14:54 2013-12-11 14:54

Acabei de escrever este código javascript (usando um protótipo para manipular o 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); } }); })(); 

Use:

 <script src="prototype.js"></script> <script src="require.js"></script> <script> require(['foo.js','bar.js'], function () {  }); </script> 

A linha inferior: http://gist.github.com/284442 .

43
23 янв. resposta dada nornagon 23 de jan 2010-01-23 08:20 '10 às 8:20 2010-01-23 08:20

Aqui está uma versão generalizada de como o Facebook faz isso por seu onipresente botão Curtir:

36
08 июля '15 в 5:41 2015-07-08 05:41 a resposta é dada Dan Dascalescu 08 julho '15 at 5:41 2015-07-08 05:41

Se você quiser um javascript puro, você pode usar document.write .

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

Se você usar a biblioteca jQuery, poderá usar o método $.getScript .

 $.getScript("another_script.js"); 
30
13 нояб. A resposta é dada por Venu immadi Nov 13 2013-11-13 12:18 '13 às 12:18 2013-11-13 12:18

Esta é provavelmente a maior fraqueza do JavaScript na minha opinião. Ao longo dos anos, não tive problemas em acompanhar as dependências. De qualquer forma, parece que a única solução prática é usar o script incluído no arquivo HTML e, portanto, é terrível tornar o código JavaScript dependente do usuário, incluindo a fonte de que você precisa, e tornar sua reutilização hostil.

Desculpe se isso soa como uma palestra;) Este é o meu (mau) hábito, mas eu quero enfatizar isso.

O problema volta para todo o resto da web, para o histórico do javascript. Ele realmente não foi projetado para ser usado no difundido usado hoje. A Netscape criou uma linguagem que lhe permitiria administrar várias coisas, mas elas não assumiam seu amplo uso para muitas coisas, como é costume agora, e por uma razão ou outra, expandiu-se a partir daí, sem afetar algumas das fraquezas fundamentais da estratégia original.

Isso não é um, é claro. HTML não foi projetado para uma página da web moderna; foi projetado para expressar a lógica do documento, de modo que os leitores (navegadores no mundo moderno) pudessem exibi-lo de uma forma apropriada que estivesse dentro das capacidades do sistema, e levou anos para ser resolvido (além de invadir o MS e o Netscape). O CSS resolve esse problema, mas já faz muito tempo e ainda mais tempo para que as pessoas o utilizem, em vez dos métodos BAD estabelecidos. Isso aconteceu, louvor.

Esperamos que o JavaScript (especialmente agora ele faça parte do padrão) seja desenvolvido para aceitar o conceito de modularidade correta (assim como algumas outras coisas), como qualquer outra linguagem de programação (existente) no mundo, e esse absurdo desaparecerá. Até que você goste e eu não aceito, estou com medo.

30
24 мая '12 в 12:51 2012-05-24 12:51 Resposta é dada por Stephen Whipp em 24 de maio às 12:51 2012-05-24 12:51

A maioria das soluções apresentadas aqui pressupõe carregamento dinâmico. Em vez disso, eu estava procurando por um compilador que coleta todos os arquivos dependentes em um arquivo de saída. Exatamente como os @import - @import Less / Sass @import com a regra CSS @import . Como não encontrei nada decente assim, escrevi uma ferramenta simples para resolver um problema.

Então, aqui está o compilador https://github.com/dsheiko/jsic , que substitui de forma confiável $import("file-path") conteúdo do arquivo solicitado. Aqui está o plugin Grunt apropriado: https://github.com/dsheiko/grunt-jsic .

No thread principal do jQuery, eles simplesmente mesclam arquivos de origem atômicos em um, começando com intro.js e terminando com outtro.js . Isso não combina comigo, já que não oferece flexibilidade no desenvolvimento do código-fonte. Veja como funciona com o JSIC:

Src / main.js

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

SRC / Form / login /Tel.js

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

Agora podemos executar o compilador:

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

E obtenha o arquivo mesclado

construir /main.js

 var foo = function() { return { prop: "", method: function(){} } }; 
24
14 июля '13 в 0:44 2013-07-14 00:44 a resposta é dada por Dmitry Sheiko 14 de julho de 2013 às 0:44 2013-07-14 00:44

Você também pode construir seus scripts usando PHP :

Arquivo 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 
24
28 дек. A resposta é dada por Calmarius 28 de dezembro 2010-12-28 00:03 '11 às 0:03 2010-12-28 00:03

Se a sua intenção de fazer upload de um arquivo JavaScript usar funções do arquivo importado / incluído , você também poderá definir um objeto global e definir funções como elementos de objeto. Por exemplo:

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

Você só precisa ter cuidado ao incluir scripts no arquivo HTML. A ordem deve ser como mostrado abaixo:

 <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> 
20
24 июля '15 в 9:53 2015-07-24 09:53 a resposta é dada por Adem İlhan 24 de julho de '15 em 9:53 2015-07-24 09:53

Isso deve fazer:

 xhr = new XMLHttpRequest(); xhr.open("GET", "/soap/ajax/11.0/connection.js", false); xhr.send(); eval(xhr.responseText); 
18
24 марта '13 в 22:32 2013-03-24 22:32 a resposta é dada tggagne 24 de março, '13 às 10:32 2013-03-24 22:32

Ou, em vez de ativá-lo em tempo de execução, use um script para mesclar antes de carregar.

Eu uso asteriscos (não sei se existem outros). Você cria seu código JavaScript em arquivos separados e inclui comentários que são processados ​​pelo mecanismo do Sprockets, assim como os incluídos. Para desenvolvimento, você pode incluir arquivos sequencialmente e, em seguida, para produção, combiná-los ...

Veja também:

17
07 июня '12 в 23:48 2012-06-07 23:48 a resposta é dada por JMawer em 07 junho '12 at 23:48 2012-06-07 23:48

Se você usar Web Workers e quiser incluir scripts adicionais na área do funcionário, outras respostas sobre como adicionar scripts à tag head etc. Não vai funcionar para você.

Felizmente, o Web Workers possui sua própria função importScripts , que é uma função global na área de Web Worker, incorporada no próprio navegador, pois faz parte da especificação .

Além disso, como a segunda resposta mais bem classificada à sua pergunta , o RequireJS também pode manipular a inclusão de scripts no Web Worker (provavelmente a chamada importScripts si, mas com vários outros recursos úteis).

14
01 янв. A resposta é dada por Turnerj 01 de janeiro 2015-01-01 11:58 '15 às 11:58 2015-01-01 11:58