How can I split a javascript application into multiple files?

后端未结

关注

 5  1963

I created a javascript application with all of the code in one file. The application has grown quite a bit and I think it\'s time to split it up into multiple files, but I\'

相关标签:

5条回答

挽巷

2020-12-04 11:29
Take a look at the design pattern in this article: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth - you can split your module definition across multiple files in a way that lets common properties be shared but also lets you create variables or methods that are private just to a particular file.

The basic idea is that the individual JS files add to the same module with code like this:
```
var MODULE = (function (my) {
     var privateToThisFile = "something";

    // add capabilities...

     my.publicProperty = "something";

    return my;
}(MODULE || {}));
```
Where in each JS file if MODULE is already defined (from another JS file) you add to it otherwise you create it. You can set it up so that it (mostly) doesn't matter what order the various files are included in.

The article details several variations, and of course you'll probably come up with your own tweaks...
0 讨论(0)
发布评论:

提交评论
- 加载中...

花落未央

2020-12-04 11:32

not to add to the confusion, but coming from a C++ background, I've tried to construct something that resembles something like a c++ namespace in the manner described below. it works, but I'd like to know if this is an acceptable pattern for the OP ?

--------------------------------file main.js:----------------

var namespacename = function(){}

namespacename.mainvalue = 5;

namespacename.maintest = function() {
    var cm = new namespacename.game();
    cm.callme();
}

--------------------------------file game.js:----------------

namespacename.gamevalue = 15;

namespacename.game = function(){
    this.callme = function(){
        console.log( "callme" );
    }
}

namespacename.gametest = function() {
    console.log( "gametest:gamevalue:" + this.gamevalue );
    console.log( "gametest:mainvalue:" + this.mainvalue );
}

--------------------------------file index.html:--------------

<html>
    <head>
        <title>testbed</title>
    </head>

    <body onload="init();">
    </body>

    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="game.js"></script>

    <script type="text/javascript">

        init = function() 
        {
            namespacename.maintest();
            namespacename.gametest();

            console.log( "html main:" + namespacename.mainvalue );
            console.log( "html game:" + namespacename.gamevalue );
        }

   </script>
</html>

0 讨论(0)

忘了有多久

2020-12-04 11:34
My favorite solution to this is use server side scripting to include the other files inside my "main" file. For example, using Perl's Template Toolkit:
```
var myApp = function(){
    [% INCLUDE lib/module1.js %]
    [% INCLUDE lib/module2.js %]
    [% INCLUDE lib/module3.js %]
}
```
Or PHP:
```
var myApp = function(){
  <?php
    include 'lib/module1.js';
    include 'lib/module2.js';
  ?>
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
一个人的身影

2020-12-04 11:40
You can put the shared functions and shared modules on the myApp object so they don't pollute the global namespace, but can be accessed anywhere without being inside the same closure.
```
myApp.moduleOne = function() {...}
myApp.moduleTwo = function() {...}
myApp.globalFunction = function() {...}
```
Then, you can define them in any file and use them in any file.

You could also just break the file up into multiple files, but require them to be included in a specific order that preserves your closure. If you're breaking up the files for practical editing reasons, but recombining and minimizing them for actual deployment, then this wouldn't cost you anything in terms of how you write code or how it's deployed, but would give you lots of smaller files for editing convenience.
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤街浪徒

2020-12-04 11:40
Give require.js a shot. http://requirejs.org/

Example:
```
require(["dir/file"], function() {
    // Called when file.js loads
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...