Geek Answers Handbook

Calling functions from a js file to an html page

I have three js files for all of my web pages, and I have predefined feature sets to call each web page. Can I transfer all these functions to a new js file that will make calls to other functions in another js file? I read about rloader at http://code.google.com/p/rloader/ , but I'm not sure if I can 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>
+4
source share
3 answers

Yes. If you move the contents of the script tag to a file using the path "js / main.js", then you add the script

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

after other scripts, it will be able to call functions. Inclusion of an external script is equivalent to the fact that the text from this script is embedded in the file.

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

Regarding questions about rloader

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

More on lazy loading And you can find out about rloader from your site (I'm not an expert on this)

Why I do not recommend using rloader if you really only have 4 scripts on one page. Its excess. If you plan on having a much larger project, you can use it or the more popular requirejs to manage your scripts on different pages.

+2
source

It is always better to put the code in separate files (how much smaller and smaller they are). This will cache the browser $ (document) .ready will keep you safe for other items that are not loading.

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(); });

The best option would be to merge the files (if they are distributed on each page). rootNameSpace.js, jquery-min.js, ui.js, form.js to say common.js file. You can use Google Closure for this.

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

If you have dynamically generated pages, you may have different names / actions / controllers. 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 break as you want, they are all global.

 function name1(){...};

If you have a large application with many JS files, you can split it into several files in one folder, and then add the minify plugin to "collect" them into one output file (or JS constructor).

rloader is a dynamic script loading, mainly Injects JS files in your document ( http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html ). I do not recommend using it unless you have a very large application and use MVC http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/ , which only downloads current module.

0
source

More articles:


All Articles