6

I have three js files for all of my webpages, and I have pre-defined sets of functions to call for each web page. Could I move all of these functions to a new js file which would make then calls to other functions in a different js file? I read about rloader at http://code.google.com/p/rloader/, but I am not sure if I could use it.

<script src="js/rootNameSpace.js"></script>
<script src="js/jquery-min.js"></script>
<script src="js/ui.js"></script>
<script src="js/form.js"></script>

<script type="text/javascript">
    console.dir(com);
    com.rela.form.helloWorld1();
    com.rela.form.helloWorld2();
</script>
  • Of course, the browser doesnt care that they are seperate files or not – DavidB Feb 28 '13 at 14:12
  • If you include a script then you can call any public function in it from the next line onwards, whether it's in the html file or another included script file. Including the script is equivalent to copying and pasting it. – Reinstate Monica Cellio Feb 28 '13 at 14:14

3 Answers3

1

Yes. If you move the contents of the script tag to a file with the path "js/main.js" and then added a script

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

after the other scripts, it will be able to call the functions. Including an external script is equivalent to having the text from that script inline in the file.

Scripts can read the contents of previous scripts so having multiple scripts on the page is similar to concatenating them all into a single file, which means that if you add a script below the other scripts it will be able to "see" everything in the others

With regard to questions about rloader

rloader does lazy loading to pull in scripts when you need them.

For more on lazy loading And you can learn about rloader from its site (I'm no expert on that)

For what its worth I would not recommend using rloader if you really only have 4 scripts on one page. Its overkill. If you're planning on having a much bigger project, then you can use it or the more popular requirejs to manage your scripts across pages.

Community
  • 1
  • 1
Ben McCormick
  • 23,365
  • 11
  • 48
  • 70
  • 1
    i did that and it works fine but i was told to use rloader and i am cluless about what rloader does? –  Feb 28 '13 at 14:17
  • 1
    rloader does lazy loading. It automatically adds the script when you need it, and doesn't load it otherwise. – Ben McCormick Feb 28 '13 at 14:21
0

It is always better to put code in separate files (as far as they are less in size and count). This will allow to be cached by browser $(document).ready will keep you safe for other dom elements that are not loaded.

Create something like this:

<script src="js/rootNameSpace.js"></script>
<script src="js/jquery-min.js"></script>
<script src="js/ui.js"></script>
<script src="js/form.js"></script>

<script src="js/pages/some-page.js"></script>

some-page.js

$(document).ready(function(){
    console.dir(com);
    //call to function form.helloWorld1 
    com.relais.form.helloWorld1();
    com.relais.form.helloWorld2();
});

A better option would be combine files (If they are common on each page). rootNameSpace.js, jquery-min.js, ui.js, form.js into a file say common.js. You can use Google Closure to do that.

<script src="js/common.js"></script>
<script src="js/pages/some-page.js"></script>
Waqar Alamgir
  • 8,752
  • 4
  • 25
  • 35
0

If you have dynamic generated pages you can have different names/actions/controllers whatever. Then you can 

echo '<script type="text/javascript">$(document).ready(function(){'.$page_name.'();});</script>';

Then you can declare global functions in any JS file, yes you can have any number of JS files, and splited in any way you want, they are all global.

function name1(){...};

If you have a big application with many JS files you can split then into more files, in a single folder, then add a minify plugin to "collect" them in a single output file (or a JS builder).

rloader is a dynamic loading script, basically Injects JS files in your document (http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html). I don't recommend using it, except if you have a very big application and use a MVC http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/ that loads only the current module.

BG Adrian
  • 465
  • 4
  • 12
  • I think $page_name should be use in src part not in anonymus function –  Feb 28 '13 at 14:32
  • We can use even "onload" to make sure the JS files and DOM elements are loaded at function call ( we don't know what his functions does). – BG Adrian Feb 28 '13 at 15:01