Jump to content
  • Advertisement
Sign in to follow this  
Black Knight

[web] Javascript multiple file organization.

This topic is 2783 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I am working on a simple javascript project and trying to separate code to multiple files. I also don't want to put everything in the global namespace so I am trying something likes the following, the html file includes all the js files as there seems to be no way to include 1 js file from another, so the html file has to include the js files in the correct order. Right now there is only 2 js files Main.js and Player.js and Player has to be included before Main because Main uses the Player object from Player.js. Here is some code

index.html



<html>

<head>

<title>Jade Mobile</title>





<link rel="stylesheet" type="text/css" href="jade.css" />

<script>var myGame = {};</script>

<script type="text/javascript" src="Player.js"></script>
<script type="text/javascript" src="Main.js"></script>


</head>

<body style="margin:5px;">

<div id="drawingArea" style="left:0px; top:0px; width=800px; height=600px;">
</div>
</body>
</html>




As you can see I create a myGame object and that is the only global object in the whole program. Then inside Player.js and Main.js I am planning to add everything to myGame as follows:

player.js

myGame.Player = {
name:"playerName",
health:[10]
}



main.js

myGame.someObject = {

}

myGame.someInitMethod = function(){
//can access Player since player.js was included before Main.js
myGame.Player.name = "otherName";
}



So does this system has any flaws? Should I separate the code into files like this I have seen people suggesting putting everything into a single js file for faster speed and stuff. I am not very experience with Js and web programming in general so I would like to hear your thoughts.


Share this post


Link to post
Share on other sites
Advertisement
Quote:
Original post by Black Knight
...as there seems to be no way to include 1 js file from another...


There exists a way. You can see it in some javascript libraries which have an import function. But you can write your own import function like so:
Just add a script node to the head node in the DOM and set its src attribute to your js file. It will be loaded when it gets attached to the DOM. example code:

function import(file) {
// create the new child node
var node = document.createElement('script');
node.setAttribute('type', 'text/javascript');
node.setAttribute('charset', 'utf-8');
node.setAttribute('src', file);
// get the head node from DOM
var head = document.getElementsByTagName('head')[0];
// append our new script node to head
head.appendChild(node);
}






But pay attention to the fact, that this file will be loaded asynchronously by the browser. So if you want a special ordering in loading further files, you have to implement a supervisor system which will call the import function after the preceding file is loaded. (This sounds more complicated than its implementation really is ;-) )

Quote:
Original post by Black Knight
...As you can see I create a myGame object and that is the only global object in the whole program. Then inside Player.js and Main.js I am planning to add everything to myGame as follows:...

You can do it like your way. But there is also a related approach, which is used by most of the known javascript libraries.
Search for the term "module pattern in javascript". In short:

// create an anonymous function and execute it directly
(function () {
...
// inside the anonymous function "this" points to the
// global "namespace" object (should be the window object
// in every browser); now assign your main object to this
// and use another anonymous function
this.myGame = function () {
...

// here you can implement your stuff (your private development
// namespace), the benefit is that you can create private variables,
// which you need for initialization only, without convoluting the
// global namespace
var my_temporary_variable;


// at least return an object which will be your public interface
// to the outside
return {
...
// inside here you can use the "private" variables from above
// thanks to javascript closures
getMyPrivateVariable : function() {
return my_temporary_variable;
}
...
}
...
}();
...
}());






Now in your main html file you can use your game object like so:

alert(myGame.getMyPrivateVariable());




[Edited by - Anntor on October 24, 2010 10:20:23 AM]

Share this post


Link to post
Share on other sites
The only problem I have with that approach is I can no longer see the outline of the variables in aptana studios outline. This probably because they exist after the function call is made.

Share this post


Link to post
Share on other sites
At LucidChart, we use Google's Closure compiler as part of a build process that takes hundreds of javascript files and gets them into one monolithic .js "binary." It also has the benefits of dead code removal, some function inlining, obfuscation, and other optimizations.

Share this post


Link to post
Share on other sites
A "binary" is not actually a binary right? It is still a text file with all the scripts in it. Instead of using multiple <script> tags in the html you put all scripts in one huge file in the order they were included to the html file. Then just do a single <script> call.

Does this speed up execution time ? I am sure it lowers loading time as you only make one httprequest but not sure about run time.



Share this post


Link to post
Share on other sites
Execution time is marginally better, if only because our javascript is down to 385KB instead of about 800KB that the browser has to parse. Some of the other compiler-driven optimizations give a little boost (some constant inlining, variable renaming/elimination/combination, etc), but it's not very dramatic.

Share this post


Link to post
Share on other sites
Is there any difference between this :

// create an anonymous function and execute it directly
(function () {
...
// inside the anonymous function "this" points to the
// global "namespace" object (should be the window object
// in every browser); now assign your main object to this
// and use another anonymous function
this.myGame = function () {
...

// here you can implement your stuff (your private development
// namespace), the benefit is that you can create private variables,
// which you need for initialization only, without convoluting the
// global namespace
var my_temporary_variable;


// at least return an object which will be your public interface
// to the outside
return {
...
// inside here you can use the "private" variables from above
// thanks to javascript closures
getMyPrivateVariable : function() {
return my_temporary_variable;
}
...
}
...
}();
...
}());




and this :


this.myGame = function () {
...

// here you can implement your stuff (your private development
// namespace), the benefit is that you can create private variables,
// which you need for initialization only, without convoluting the
// global namespace
var my_temporary_variable;


// at least return an object which will be your public interface
// to the outside
return {
...
// inside here you can use the "private" variables from above
// thanks to javascript closures
getMyPrivateVariable : function() {
return my_temporary_variable;
}
...
}
...
}();




Isn't my_temporary_variable still private to the anonymous function?

Share this post


Link to post
Share on other sites
Quote:
Original post by Black Knight
Is there any difference between this ... and this ...


Because the outer anonymous function is executed in the global execution context, no, they are practically the same. Both pointing to the same global object (inside the anonymous function this points to the activation/variable object, which in turn is determined by the caller, which in turn is the global object).

Quote:
Original post by Black Knight...Isn't my_temporary_variable still private to the anonymous function?...


You're right.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!