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>
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.
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.
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>
Related
Just out of sheer curiosity, I'd like to know if there's a technique for passing things (most likely a javascript object) to external javascript within the script tag that loads that script.
<script type="text/javascript" src="example.js">
{example:'something like this'}
</script>
I'm almost certain I've seen this done somewhere once before. I find it very tidy and would like to be able to do it for libraries i'm writing so users can pass in simple options without needing to make another script.
As with what the Question Ballbin has posted says, "It should be avoided.".
But, a different way you can do it is with another script tag.
Like this:
<script>var test1 = "Testing";</script>
<script type="text/javascript" src="example.js"></script>
The example.js file should now be able to read the contents of test1.
I have a very long external JS-file which I want to split in 2 seperate JS-files. The problem with this is, that file_1.js doesn't know the functions of file_2.js anymore. Is there something special I don't have in mind when I'm doing this.
<script src="js/file_1.js"></script>
<script src="js/file_2.js"></script>
head of my html.
and I'm loading every content in a document ready.
$(function() { some code in both });
Cheers
Javascript files can only access code from files that are loaded before them. In this example file2 can access functions in file1, but not the other way around.
If they each need to access each other, you have a circular dependency. When this happens, it usually means your two files should really just be one big one.
As previously stated, calling the external js file which declares the functions before the external js which calls the functions is what you need to do.
Have you tried calling one of the functions from within the dom? If that fails as well, there may be issues with how you broke up the js.
<script src="js/file_2.js"></script>
<script src="js/file_1.js"></script>
vs
<script src="js/file_2.js"></script>
<script>
$(document).ready(function(){
someFunctionWithinFile_2();
});
</script>
I am working on a project where I need to include somewhat around 10-15 .js files in the HTML head section directly like
<script type="text/javascript" src="http://localhost:9020/website1/wa/min/soundmanager2.js,vars.js,utils/md5.js,utils/utils.js></script>
what is the way I can give refrences correctly
the files I need to refre are in the same hierarchy like
1.....2,3
2.........4,5
3........6,7
I need to refer 1,4,7 please help.
somewhere I read this method what's it?
<script type="text/javascript" src="http://localhost:9020/wordplus/root/child/?b=scripts&f=soundmanager2.js,vars.js,utils/md5.js,utils/utils.js></script>
The example you posted looks exactly like the query string interface for the minify PHP library: http://github.com/mrclay/minify
Using it you use it in the fashion <script src="min/?b=path&f=script1.js,script2.js,ui/script3.js"></script>.
Where path is the path from your web root that you want it to look for scripts under.
I've used it before and I've found it quite effective. It concatenates, minifies, caches, and serves JS and CSS.
I'm sure there are other libraries to achieve the same effect, alternatively you can create a build script to concatenate and minify all your scripts and then deploy a single JS file to your site, in a single script tag.
It is not possible to load multiple javascript files in a single <script> element.
You have to have to have an individual <script> element for each script you are referencing..
<script type="text/javascript"
src="http://localhost:9020/wordplus/root/child/?b=scripts&f=soundmanager2.js"></script>
<script type="text/javascript"
src="http://localhost:9020/wordplus/root/child/?b=scripts&f=vars.js"></script>
I think you'll get what you need from dynamically loading external javascript files:
http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
The second line you posted requests scripts from the server dynamically. the b parameter of the request tells it you want scripts and the f parameter tells the server which files you want. Then it concatenates these into one file and sends that back to the user agent. You need server-side scripting to handle this; it is not something built into the URL specification.
http://localhost:9020/wordplus/root/child/
b=scripts
f=soundmanager2.js,vars.js,utils/md5.js,utils/utils.js
The simplest solution is just have one script tag per file as it will let you take advantage of caching:
<script src="http://localhost:9020/wordplus/root/child/soundmanager2.js"></script>
<script src="http://localhost:9020/wordplus/root/child/vars.js"></script>
<script src="http://localhost:9020/wordplus/root/child/utils/md5.js"></script>
<script src="http://localhost:9020/wordplus/root/child/utils/utils.js"></script>
Another solution is to use some JavaScript builder to join all your files, generating just one. The pros of this approach is that your result file will be "compressed" (minified). Some builders:
Google Closure Compiler (I like and use this since 2009).
YUI Compressor
Im new to Jquery but it turns out I used it quite a bit in my last application. My problem now is that its reloaded every single time one of my pages is loaded/reloaded. Is there an efficient way to reference it like we do a css or javascript file? for example:
<script type="text/javascript" language="javascript" src="js/behavior.js"></script>
I would really like to be able to do this with the jquery...because its quite a mess when you look at the source code. To avoid confusion: I already have jquery loaded. For example...this is already in my html:
<script src="js/jquery.min.js" type="text/javascript"></script>
What Im trying to cache is all of the code I've built off Jquery. For example:
$('#needDelete').slideDown('slow');
I have a bunch of these that need to be put into a file if that's even possible! Thanks!
jQuery is a JavaScript library. It consists of a single JavaScript file. All the documentation for it says to use <script src="..." to load it.
Update in response to edit:
The JavaScript you write that calls jQuery functions is still JavaScript and can be referenced from an external file just like any other JavaScript.
Yes, of course you can save your JavaScript code in a separate file (whether based on jQuery or not). Just keep your code separated and put it eg. in main.js file, then put a tag after jQuery script tag:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
Just for consistency and improved maintainability, it is easier if all the code is in one place than when it is often referenced within HTML like that:
show popup
Instead of the above you could do this in a separate JS file:
$('#a1').click(function(event){
event.preventDefault();
$('#popup').show();
}):
(of course the above code should be enclosed within onload or ondomready handler, so the code searches for elements after they become accessible - in case of jQuery and ondomready you can simply use: jQuery(function(){/* your code executed when DOM is ready */});)
I would refer jQuery from a CDN. This will allow the browser to do parallel download along with other resources from my domain, thus save some load time.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
The cdn version will be usually cached in your browser.
I don't get this question. What do you want?
I tried opening a file called custom.js. I dumped all of the jQuery
code into it and then referenced it. Nothing worked. Does there need
to be something additional in the reference page itself?
Why would you do that? You save some loading by decrease the number of different files, but the difference between one and two files is minimal.
Instead, do as Frederik Creemers suggested. Juse the jQuery-library at googleapis.com. The file is cached, meaning it will not load every single time a user visits your page. Only when the cache expires (not 100% sure how long this is). In addition, this library is used by many other sites, so you might be lucky and the user downloads it somewhere else and has it ready for use when going to your page.
Again, what you are asking (if I understood correctly) is pointless.
download jquery, and reference it like this:
<script src='jquery.js'></script>
Or, for an even better option, you can use google's cdn. This means that if a user comes to your site, and has already visited a site which uses the cdn, it will already have jquery cached.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
and for the best option, to protect against the possibility of downtime of the cdn, combine the local copy and the cdn like this:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
if(!window.jQuery){
script = document.createElement('script');
script.src='js/jquery.js';
document.head.appendChild(script)
}
</script>
I have a javascript source code file which is about 32kb, and has javascript code arranged in modules.
I was wondering if it would increase page load time if i put each module into a separate file as managing the current code of over 2000 lines is quite tedious and some times confusing
Short answer, yes and no. If you have a <script> tag pointing to each module file, then yes it will slow down the page due to the increased number of network calls to those files. The real answer is that's the way you should CODE it, but that's not the way you should serve it up to your user.
I recommend a tool called Minify, which will combine and minify all your JS files so you only need one <script src="/min/f=mod1.js,mod2.js,mod3.js" type="text/javascript"></script> tag
You can also manage "groups" of files, which are simply PHP arrays with an associative key you reference in the script src. For example:
'module_js' => array(
'//js/module1.js',
'//js/module2.js',
'//js/module3.js'
)
Then your script tag would look like:
<script src="/min/g=module_js" type="text/javascript"></script>
After Minify comines and minifies your code, it will cache it on your server so subsequent requests will hit the cache file so the PHP won't need to process.
http://code.google.com/p/minify/