javascript linking

Question

I'm going to build a rather complicated application in html5 with some heavy javascripting. In this I need to make some objects which can be pass around. But since there is no like @import foobar.js.

Then I assume that if my html page loads the scripts, then all the scripts can access eachother?

I read (here) that ajax somehow is able to load a .js file from within another .js file. But i dont think this is what I need?

Can go more into details if needed, thanks in advance.

haven't you heard about ? all your .js files can acces eachother ... — micnic, Jul 05 '12 at 06:18
Can't see why a valid question, even though it might be "stupid" and had no other questions like this on the site, should get -1. @micnic if it was u... jezz what an attitude. — Anders Metnik, Jul 05 '12 at 07:01

score 2 · Answer 1 · answered Jul 05 '12 at 06:21

In our projects, we do the following: Suppose you're going to call your project Foo, and have a module called Bar in it,

Then what we do is declare a file called Foo.js that just defines an equivalent to a Foo namespace:

Foo = (function(){
    return {
        };
})();

Then we create a file called Foo.Bar.js that contains the code for the Bar module:

Foo.Bar = (function(){
    // var declarations here that should be invisible outside Foo.Bar
var p, q;   
    return {            
        fun1 : function(a, b){
            // Code for fun1 here
        },      
        fun2 : function(c) {
            // Code for fun2 here
        }            
    } // return 
})();

Note that how it is a function that executes immediately, and returns an object that gets assigned to Foo.Bar. Any local variables, like p and q are available to fun1 and fun2 because they're in a closure, but they are invisible outside of Foo.Bar

The functions in Foo.Bar can be constructors for objects and so on.

Now in your HTML you simple include both files like so:

<script type="text/javascript" src="Foo.js"></script>    
<script type="text/javascript" src="Foo.Bar.js"></script>

The result will be that you can call Foo.Bar's functions in the JavaScript of your main HTML file without any problems.

Jørgen · Accepted Answer · 2012-07-05T07:16:08.723

1

You should check out the module pattern: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth/

This describes alternatives for creating modular code in javascript, how you can protect your code and share APIs and data among them.

You should also consider using and AMD. Require.js is quite popular, but I tend to prefer head.js for this. Keep in mind that these put some requirements on how you structur your code in files, and personally, I don't think it's worth it, compared to a concatenated and minified file included in the bottom of the page.

edited Jul 05 '12 at 07:16

answered Jul 05 '12 at 06:11

Jørgen

8,820
9
47
67

You're welcome. The article is a classic :) I added a section about AMDs, which should be considered regarding client side architecture. – Jørgen Jul 05 '12 at 07:17

score 1 · Answer 3 · answered Jul 05 '12 at 06:12

1

Then I assume that if my html page loads the scripts, then all the scripts can access eachother?

Yes.

answered Jul 05 '12 at 06:12

Quentin

914,110
126
1,211
1,335

javascript linking

3 Answers3