How to split jquery source code into multiple files when using the module pattern?

I've got some problems splitting up my jquery source code into more than one file. My real source code is a bit more complicated but the following simple example shows my problem very good. At first I would like to show you a working example with only one javascript file. Afterwards, I will describe what I tried in order to split the javascript into two files.

My html code looks like this ("./jquery" is a symbolic link to my local jquery download):

<html>
  <head>
    <script src="./jquery"></script>
    <script src="./file1.js"></script>
  </head>

  <body>
    <div id="content"></div>
  </body>
</html>

The jquery source code in file1.js looks like this:

$(document).ready(function() {

  var Test = (function() {
    var content = $('#content');

    var init = function() {
      content.html('<p>test</p>');
    };

    return {
      init: init
    }
  })();

  Test.init();
});

After opening the page, "test" is displayed so that this example works as expected.

But now I want to put the whole Test part into another file file2.js. My html is basically the same but gets an additional line:

<script src="./file2.js"></script>

file1.js now contains only the call of the init function:

$(document).ready(function() {
  Test.init();
});

and file2.js contains the definition of Test:

var Test = (function() {
  var content = $('#content');

  var init = function() {
    content.html('<p>test</p>');
  };

  return {
    init: init
  }
})();

When I open the page, "test" is not displayed any more. In order to make sure that the init function is called at all, I added a console.log("test"); to the init function which is working fine. Therefore, I suppose that the function might be called before the DOM is ready, but actually I am pretty clueless. Maybe someone can give me a hint how to make that run.

Best regards and thanks in advance!

Solution

You can do several things according to your preferences... 1. Move your scripts to the end of the HTML file intead than in header...

<html>
  <head>
  </head>

  <body>
    <div id="content"></div>
  </body>
  <script src="./jquery"></script>
  <script src="./file2.js"></script>
  <script src="./file1.js"></script>
</html>

Think this problem secuencially... if you don't want to declare a var in each module referring an element in your DOM you need that the element exists first, then you can declare the "global" var to the module content. This way your original file2.js works.

Another way is to declare the content "global" to your module but init this in your init function...

var Test = (function() {
  var content;

  var init = function() {
    content = $('#content');
    content.html('<p>test</p>');
  };

  return {
    init: init
  }
})();

Now you can use the content variable in all of your module's functions.

Hope this helps, let me know.