This question already has answers here:
Closed 14 years ago.
Duplicate of: Use javascript to inject script references as needed?
Javascript doesn't have any directive to "include" or "import" another js file.
This means that if script1.js uses functions/objects defined in script2.js, then every html page that includes script1.js must include script2.js before it.
This shouldn't be a big problem if you only have 2 js files in like 10 html pages. I mean, it's manageable then!
But say suddenly you change script1.js and improve it by using functions/objects defined in a new file, script3.js
The problem is, you can't just tell script1.js to include script3.js, instead, you have to remember every html file that included script1.js and update it to include script3.js as well!
This seems like rather stupid way of organizing code.
Are there recommended strategies or practices to deal with this issue?
Would it be acceptable to have a gigantic js file that holds all the functionality that you use across the website?
Use dynamic includes:
Use javascript to inject script references as needed?
Scriptaculous (and probably other frameworks) handle this by writing script tags for the included files to the document when they are loaded. Below is the relevant bit from the scriptaculous.js file that allows loading the other files in the framework.
var Scriptaculous = {
Version: '1.8.2',
require: function(libraryName) {
// inserting via DOM fails in Safari 2.0, so brute force approach
document.write('<script type="text/javascript" src="'+libraryName+'"><\/script>');
},
...
Personally I try to avoid all this confusion by rolling all my javascript into one file. If there's one page which requires a LOT of javascript which the other pages don't need, then just have two files - generally the page-specific JS can be loaded after the generic js without hassles anyway.
To roll the JS files into one, I use Dean Edwards's Javascript Packer, combined with a helper script that I described on my blog. It makes working with many JS files muuuuuch easier (for me at least), and the compression you get from packing the javascript is better.
I guess you could use document.write in your JS files to make sure they include whatever dependencies they're dependent upon, though I wouldn't really recommend it...
Related
From what I read here and there I found mixed opinions on the subject (it may be because of the different uses) and I'm a bit confused.
I recently started doing web programming and I'm using java EE. I want to integrate javascript functions in my code. From what I read the best practice is to put the .js files in a folder and use the <script> tag to refer to them.
From there I have 3 questions :
1) Some people say that I need to put the <script src=...> in the <head>tag. Some says it's best practice to put <script> at the end of the jsp file for performances, which is the best practice?
2) Should I put all my functions in a single .js file or create a .js for each jsp page I have?
3) Do I include jquery the same way as my .js files ?
Its up to you, either will work. From my reading/understanding the purpose of adding the script to the end of the body is that you do not block the parsing of HTML by fetching the script(you can also use the async & defer attributes). Here is another topic on the issue.
This is usually dependent on what the JS is doing. You should reuse common functionality and group common things together.
Yes, just make sure you get the order correct. If you are using jQuery in other files or somewhere else on the page make sure you include it first.
Always put your JS file links at the bottom to prevent blocking of parallel downloads.
Depends on how you're using JS. Ideally you'd have a lot of shared JS that you'd want to put into one file so it caches. But if all your JS is unique to every page, there's no benefit to caching.
jQuery is JavaScript, so, yes, you load it just like the rest of your JavaScript.
Im developing a ember.js based app.
On some "sites" (templates) I want to load a specific js-game, so I have to include extra tags like <script src="game.js"></script>. But since handlebar-templates are defined by <script>-Tags itself, its not possible to simply put my dependencies within a template directly.
How can I include js-files on some individual sites only?
Including files in an Ember.js application is a bit more complex than in a regular website.
If you do not use ember-cli, then you could either include your all your JavaScript files directly in your index.html (one by one) or (and this is better) you could also bundle all your game JavaScript files into a single file (called games.js for instance) and include that single file in your index.html. You can bundle JavaScript files using tools such as grunt or brunch or broccoli.
Now if you do use ember-cli (which I recommend), then you could simply list your files in your Brocfile.js (see documentation here). Learning ember-cli might take a little bit of extra time but it will really help you in the future :)
Good luck!
Ok I found an possibility to solve that problem:
Like described in the handlebars.js-FAQ here (5.), I have to use some kind of a "Hack" to avoid parsing errors. Just need to add an empty command {{!}} into the word "script" like <scr{{!}}ipt src=...>...</scr{{!}}ipt.
That works for me.
Also, as kpdecker says here, it is better to use precompiled templates than defining them inline.
You can try to insert the necessary scripts from didInsertElement hook of the corresponding view. And, if so, in order to avoid duplicates, remove that scripts in willDestroyElement hook of the same view.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to include js file in another js file?
Suppose I have a few JavaScript source files: a.js, a1.js, and a2.js. Functions of a.js invoke functions from a1.js and a2.js.
Now I have to declare all these files in my HTML page. I would like to declare only a.js in the HTML and "import/include" a1.js, and a2.js in the a.js source file.
Does it make sense? Can I do that in JavaScript?
You can't specify imports in vanilla javascript.
So your solutions (excluding heavy server side frameworks) are :
simply do the imports
concatenate your js files (and minify them in the same move, for exemple using the closure compiler)
use a module itool like require.js
As long as you're not experienced, and if your number of files is low (less than 15), I recommend to simply choose the first or second solution. Using a module loader may have side effects you don't want to debug when beginning to learn javascript.
You can import:
<script type="text/javascript"src="a1.js"></script>
<script type="text/javascript"src="a2.js"></script>
<script type="text/javascript"src="a3.js"></script>
if you want to do it directly from the JS, you may use Ajax, this post explains how to:
include-javascript-file-inside-javascript-file
You can bundle JavaScript (and also CSS) files together using certain tools to reduce the number of files you must include. This also increases page load performance.
These tools combine multiple JavaScript files into a single JavaScript file (optionally minifying the files as well), and multiple CSS files into a single CSS file. This results in fewer HTTP connections from the browser to the server, so there are fewer things to be fetched serially.
ASP.Net MVC 4 has built-in support for this:
http://theshravan.net/bundling-and-minification-support-in-asp-net-mvc-4/
There are a number of solutions for other environments as well such as Juicer.
If you cannot bundle all resources (perhaps some come from a CDN while others are served locally), you can use a load manager such as require.js.
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Make File for Javascript
Actually i am writing some javascript for testing purpose.
i want to use multiple javascripts in which functions are defined.
Is there any way to achieve this ?
I think Make file is the way.
But i don't know that also.
I want to generate make file.
Can any body suggest me how is to be done?
Creating makefile is an interesting solution, but you can also use require.js library to set the sequense of loaded scripts.
If you looking to combine multiple scripts as one. You can the use build script Boilerplate.
Why to use it? Its not only about scripts.
Combines and minifies javascript (via yui compressor)
Inlines stylesheets specified using #import in your CSS
Combines and minifies CSS
Optimizes JPGs and PNGs (with jpegtran & optipng)
Removes development only code (any remaining console.log files, profiling, test suite)
Basic to aggressive html minification (via htmlcompressor)
Autogenerates a cache manifest file (and links from the html tag) when you enable a property in the project config file.
Revises the file names of your assets so that you can use heavy caching (1 year expires).
Upgrades the .htaccess to use heavier caching
Updates your HTML to reference these new hyper-optimized CSS + JS files
Updates your HTML to use the minified jQuery instead of the development version
Remove unneeded references from HTML (like a root folder favicon)
Runs your JavaScript through a code quality tool (optional)
If you have several separate files and you want to append them all it into one file before, f.i. using it one your website, then any script or tool is good: Make, Rake, Cake, or your own, in your language of choice. If it goes to the web, it should be also compressed. Now how to do it, is beyond scope of this question, there are loads of articles on the web about all those topics. You are encouraged to come back when (if) you hit some more detailed problem.
I have a notepad filled with references to over 1k .js files. I would like for my page to check this file and add each as a reference eg:
<script type="text/javascript" src="####.js"></script>
any idea or examples on this.
Thanks
Not a direct answer to your question, maybe, but if you reference that many files maybe you should look at the Google closure compiler, or the Dojo build system, or search for javascript minifiers?
In addition to your page loading faster, you won't have to generate all those links.
Also not a direct answer, however you could simply create a control which is entered into your asp.net masterpage in the header and geneates your script tags.
However by itself that's going to cause serious performance problems with your website having references to so many javascript files.
I would serioulsy recommend that you look into using the AjaxToolkit (or other frameworks) to merge and minify all of your separate JS files into 1 file that gets generated dynamically.
The example I have below is for both CSS and JS which does minification and compression on the fly.
https://softwareengineering.stackexchange.com/questions/98810/how-to-organise-website-css/98818#98818