É possível incluir um arquivo JavaScript dentro de outro arquivo JavaScript?
Semelhante ao @import
em CSS ou ao include
do PHP?
Você só poderá incluir um script em uma página HTML. sabendo disto você possui algumas soluções para "simular" a inclusão pelo javascript, como seria isso?
No meu arquivo index.html possuo meu arquivo scripts.js, nele eu gostaria de carregar outras duas. clientes.js e produtos.js então eu faço assim:
Com javascript:
var imported = document.createElement('script');
imported.src = 'cliente.js';
document.head.appendChild(imported);
Com jQuery:
$.getScript("produtos.js", function(){
alert("Script loaded but not necessarily executed.");
});
Existem outras maneiras mas elas são apenas formas diferentes de incluir o javascript no html seja de forma assíncrona ou não.
script
ao HTML não vai incluir o script dentro do outro script – o script adicionado vai ser executado em um escopo global.
Possível é, porém esta não é uma funcionalidade nativa.
Não existem diretivas @import, #include, include() ou algo parecido para Javascript.
O que é possível fazer (eu considero gambiarra) é criar um elemento através de código Javascript e atribuir ao conteúdo deste elemento o conteúdo de um outro arquivo.
Não recomendo.
Allan, como o Bruno já mencionou, atualmente não existe uma implementação nativa que faça o include de outros arquivos JS
. porém você pode definir os seus scripts como módulos e usar uma biblioteca AMD
para gerenciar os seus scripts.
Eu diria que usar AMD
no seu projeto pode ser especialmente vantajoso se estiver desenvolvendo uma aplicação SPA
, mas nada impede que utilize esta abordagem em uma aplicação multi-page.
Alguns exemplos de Blibiotecas AMD são:
Segue um pequeno exemplo retirado do Github
do RequireJS
HTML
<html>
<head>
<script data-main="app" src="lib/require.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Note que no exemplo, ele apenas adicionou o require.js
e informou o arquivo *.js que possui a configuração do AMD, no caso o app.js
app.js
requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app'
}
});
requirejs(['app/main']);
aqui ele definiu o caminho para os scripts, no caso a pasta lib
e um path
para a pasta app
, e começou a execução do arquivo app/main.js
app/main.js
define(function (require) {
var messages = require('./messages');
var print = require('print');
print(messages.getHello());
});
aqui ele informou que o script possui duas dependerias, app/messages.js
e lib/print.js
, neste caso ele vai esperar que os dois scripts
sejam executados para poder continuar.
lib/print.js
define(function () {
return function print(msg) {
console.log(msg);
};
});
aqui não tem muito segredo, temos apenas uma função sem dependências.
app/messages.js
define(function () {
return {
getHello: function () {
return 'Hello World';
}
};
});
mesma coisa aqui, porém é retornado um objeto.
Não enquanto não implementam um método ou statement. Está "ok" que é possível, em JavaScript:
script
;src
do script
;script
para o HTML;Assim o conteúdo de um arquivo externo é requisicionado, então depois é interpretado e executado pelo navegador, porém é executado em um escopo global, ou seja, o JavaScript
não vai estar incluído dentro do outro JavaScript
. É uma solução, mas não como você quer.
@include
, mesmo tendo que carregar, pois na linguagem não há escopos.
É perfeitamente possivel, crie um arquivo 'list.js' e faça dessa forma:
import('assets/exemple.min.js')
import('assets/exemple2.min.js')
import('assets/exemple3.min.js')
import('assets/exemple4.min.js')
.then(module => {
module.loadPageInto(main);
});
Seus arquivos carregaram normalmente como em uma tag <script>
, você pode encontrar outras informações na documentação, acesse: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import