Splitting javascript into several files - Stack Overflow

admin管理员组

文章数量:1335556

I have some javascript code which is basically

$( document ).ready(function() {
    // Global variable definitions
    // Bunch of functions depending on variables
});

Is there any way for me to split these functions up into several files even though they are all mostly dependent on each other?

I'm creating a html5 game and I want to separate a lot of the code, for example I'd like code for drawing objects to be in a specific file, code for updating the game state in another file and so on so I can still access all the global variables.

Is there a way to do this without a lot of hassle or rewriting all the code?

I have some javascript code which is basically

$( document ).ready(function() {
    // Global variable definitions
    // Bunch of functions depending on variables
});

Is there any way for me to split these functions up into several files even though they are all mostly dependent on each other?

I'm creating a html5 game and I want to separate a lot of the code, for example I'd like code for drawing objects to be in a specific file, code for updating the game state in another file and so on so I can still access all the global variables.

Is there a way to do this without a lot of hassle or rewriting all the code?

• javascript

Share Improve this question Follow edited May 25, 2013 at 13:22 Florian Margaine 60.8k1515 gold badges9393 silver badges120120 bronze badges asked May 25, 2013 at 13:08 Haffi112Haffi112 52355 silver badges1818 bronze badges 1

• 1 Why the jquery tag? Although there is some jquery code, the question is not related to jquery at all. – Florian Margaine Commented May 25, 2013 at 13:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

A lot of people struggled with this just as you are doing right now.

The old way to do that was to have a namespace object, like MYAPP. This way, the only global variable was MYAPP, and you put all your functions/variables on it, like this:

file1.js

(function() {
    var MYAPP = MYAPP || {};

    MYAPP.func = function() { console.log(1); };
}());

file2.js

(function() {
    var MYAPP = MYAPP || {};

    MYAPP.func(); // 1
}());

The main issue with browser-side javascript is that it doesn't have "include", or "require", as other server-side languages have. This made it hard to "include" a JS file (and thus its functions/variables) where you wanted it.

Nowadays, people have thought about it and solved the problem mainly in 2 ways:

• The AMD way: Asynchronous Module Definition, allows you to asynchronously load other JS files, thus having some kind of browser-side "include". The best example of this kind of library is require.js. The asynchronous loading is good for development purposes, but the production-code has to be pre-piled for performance matters.
• The CommonJS way: using the node.js way, you synchronously require a module, and a module is defined using the module.exports object. However, it requires a pilation part before you use the code on the browser. The best example of this kind of library is browserify. Note that the pilation part can be almost seamless with a watcher.

If you really need to access those global variables from everywhere,there are still many ways to modularize your code. Here's one :

// file 1
(function(){
    myapp = myapp || {};
    myapp.myvar = ...;
    myapp.myfunc = function(){...};
})();

// file 2
(function(){
    myapp = myapp || {};
    myaapp.myothervar = ...
    myapp.myotherfunc = function(){...};
    myapp.start = function(){...};
    }
})();

// last file

$(myapp.start);

But you clearly will have to refactor your code a little.

A variant is to define submodules, so that "global variables" are less global. It's generally more manageable if you don't expose too much : if you have 20 files and any LOC of any file can access any variable defined elsewhere, it will be a little hard to know what happens.

Take a look at namespacing:

http://addyosmani./blog/essential-js-namespacing/

http://css-tricks./how-do-you-structure-javascript-the-module-pattern-edition/

Namespacing is a concept of the module pattern.

By using a layered approach to code structure, you move from abstract to more concrete objects to structure your code. Usually you would start off with an overarching object.

var JSApp = JSApp || {};
JSApp.someMethod = function() {};
JSApp.someProperty = "foo";
JSApp.someObject = {
    internalStuff: "bar"
};
JSApp.implement = function() {
    this.someMethod();
};

In a different file:

JSApp.someFactory = function() {
    //JSApp is the mon namespace.
};

Establishing an overarching structure like so allows for a single global. Now you can break up your code into multiple modules (different) files by adding your code to the JSApp object.

All you need to do to implement is to call whatever you need within your $(document).ready() callback.

$(document).ready(function() {
    JSApp.implement();
});

Granted, there are checks that should be implemented before you go around all willy-nilly assigning objects to a namespace, even if you THINK it's supposed to be there.

本文标签： Splitting javascript into several filesStack Overflow