Load Javascript like PHP's include

Question

Today im asking for something, that i cant believe to find on the web.

Im trying to make a javascript function, which allows me to give a filename/pathname as a parameter and the function returns javascript code which will be executed/initialized immediatly - just like PHP's include or require.

Now i tried several technics to realize my approach but i just dont hit the right spot so i might be asking: is it even possible to do that in JS?

Thanks in advance

possible duplicate of [Include JavaScript file inside JavaScript file?](http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file) and http://stackoverflow.com/questions/21294/dynamically-load-a-javascript-file-think-of-include-in-c — Thilo, Apr 30 '13 at 10:31
You need synchronous ajax and `` tag injection. ExtJS working by this technique. — BlitZ, Apr 30 '13 at 10:34
But how i see, its not possible to initialize functions by loading them that way? what if i remove the tags or add them after the user clicked something, is it then possible to use functions inside the files of the ggenerated script tags? — David Fariña, Apr 30 '13 at 10:36
have you read about eval http://www.w3schools.com/jsref/jsref_eval.asp — Robert, Apr 30 '13 at 10:46
I know eval, but it seems to be a bit risky to use eval in my app... Is there any good practive with eval? — David Fariña, Apr 30 '13 at 10:51
@Robert Podwika give links to reliable sources not w3schools. Check this to get an idea of what I'm saying: http://w3fools.com/ — Angel, Apr 30 '13 at 11:26

score 2 · Accepted Answer · answered Apr 30 '13 at 12:21

There are many libraries and standards that exist merely for this purpose. In Node.js, there is a CommonJS implementation built-in. If you want to export a piece of code from a file, or the entire contents of a file, you can attach it to the module.exports or simply exports object. You may then use require('./path/to/file'); to require it in a separate piece of code.

Some libraries try to borrow this approach and implement it on the client side, browserify being one of them.

However, it would do you better to have a look at the best client-side library of them all: RequireJS

RequireJS implements what is called the Asynchronous Module Definition pattern, which loads in all the project dependencies in a top-level file. It gives you access to two functions, require() and define() that take a number of paramaters. The first function simply requires dependencies, while the second one defines a module and name's that modules dependencies, like so:

A top-level file that defines no modules, only uses them:

require(['jquery', 'underscore', 'backbone'], // dependencies
  function($, _, Backbone) { // dependencies are passed into callback
    $('div').append('Test'); // dependencies are available to this file
  }
);

A module:

define(['jquery', 'underscore', 'backbone'], // this module's dependencies
  function($, _, Backbone) { // dependencies are made available
    var MyModule = {};
    return MyModule; // this return statement essentially defines the module
  }
);

The great thing about this approach is that by having a top level file and several modules that all define their own dependencies, you only ever need to reference a module if it actually is a dependency of that file, so your top-level stuff is always neat and uncluttered and usually consists of no more than an initialize function.

RequireJS also comes with an optimizer called R.js that can minify and concatenate your scripts in the right order using UglifyJS or Google's Closure Compiler. It's worth checking out.

Thank you, i think i will check out require seems like a good solution! — David Fariña, May 02 '13 at 09:19
one last question: is it possible to make a function usable outside of the require callback function, or is it then just available inside that function? — David Fariña, May 02 '13 at 09:21
As far as my understanding goes, it is only available inside that function. I have never needed to do anything more with RequireJS to warrant finding out any truths in that statement though, so there might be some cause to checking it out. The thing about RequireJS is that by design, it prevents you from polluting the global scope. However, if you define a dependency in one module, and make that module a dependency of another, the second module can access the dependencies of the first, without them needing to be defined. — razorbeard, May 05 '13 at 03:36

Load Javascript like PHP's include

1 Answers1