Is it possible to include a JavaScript file inside another JavaScript file?

Navigation
4

Is it possible to include a JavaScript file inside another JavaScript file?

Similar to @import in CSS or include of PHP?

    
asked by anonymous 05.07.2016 / 16:34

4 answers

6

You can only include a script in an HTML page. knowing this you have some solutions to "simulate" inclusion by javascript, how would that be?

In my index.html file I have my scripts.js file, on it I would like to load two others. clients.js and products.js so I do this:

With javascript: 

var imported = document.createElement('script');
imported.src = 'cliente.js';
document.head.appendChild(imported);

With jQuery: 

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

There are other ways but they are just different ways of including javascript in html either asynchronously or not.

Include a JavaScript file in another JavaScript file?

    
05.07.2016 / 18:54
1

Allan, as Bruno already mentioned, currently does not have a native implementation that includes other JS files. however you can define your scripts as modules and use a AMD library to manage your scripts.

I would say that using AMD in your project can be especially advantageous if you are developing a SPA application, but nothing prevents you from using this approach in a multi-page application.

Some examples of AMD Blibiotecas are:

Here is a small example taken from Github of RequireJS

HTML 

<html>
    <head>
        <script data-main="app" src="lib/require.js"></script>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

Note that in the example, it just added require.js and informed the * .js file that has the AMD configuration, in this case the app.js

app.js 

requirejs.config({
    baseUrl: 'lib',
    paths: {
        app: '../app'
    }
});
requirejs(['app/main']);

Here he defined the path to the scripts, in this case the folder lib and a path to the folder app , and started executing the file app/main.js

app / main.js 

define(function (require) {
    var messages = require('./messages');
    var print = require('print');

    print(messages.getHello());
});

Here he informed that the script has two dependencies, app/messages.js and lib/print.js , in this case it will wait for the scripts to be executed in order to continue.

lib / print.js 

define(function () {
    return function print(msg) {
        console.log(msg);
    };
});

Here is not much of a secret, we just have a function with no dependencies.

app / messages.js 

define(function () {
    return {
        getHello: function () {
            return 'Hello World';
        }
    };
});

Same thing here, however an object is returned.

    
05.07.2016 / 19:07
0

Possible is, but this is not a native feature.

There are no @import, #include, include () policies or something similar for Javascript.

What is possible to do (I consider gambiarra) is to create an element through Javascript code and assign to the contents of this element the contents of another file.

I do not recommend it.

    
05.07.2016 / 16:40
0

Not while you do not implement a method or statement. It's "ok" that is possible in JavaScript:

  • 1. create an element script ;
  • 2. assign src of script ;
  • 3. add script to HTML;

So the contents of an external file are requested, then it is interpreted and executed by the browser, but it is executed in a global scope, that is, JavaScript will not be included inside the other JavaScript . It's a solution, but not how you want it.

    
05.07.2016 / 18:31
How to configure Web API with multiple Get Check if string starts with number