Use wildcard in src attribute of <script> tag?

Question

Ok, stupid question and I don't think it's possible but, I have this markup at the top of my .aspx page...

<%--Third Party Libraries, Plugins, Extensions --%>
<script src="Libraries/Raphael/Raphael.js" type="text/javascript"></script>
<script src="AutoComplete/jquery.autocomplete.js" type="text/javascript"></script>    
<script src="Libraries/jQuery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.core.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.widget.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.droppable.js" type="text/javascript"></script>    

Wouldn't it be nice if I could replace that with this...

<%--Third Party Libraries, Plugins, Extensions --%>
<script src="Libraries/Raphael/Raphael.js" type="text/javascript"></script>
<script src="AutoComplete/jquery.autocomplete.js" type="text/javascript"></script>    
<script src="Libraries/jQuery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="Libraries/jQuery/UI/1.8.4/jquery.ui.*.js" type="text/javascript"></script>

ie use the * as wildcard.

Obviously as this is JS I could just throw all those scripts into one big script and load that but I don't really fancy doing that.

Anyone else have a technique for tidying up masses of script refs? Or do we just live with it?

Solution 1

As far as I know this is not possible, simply because, the browser would need to know exactly what files to request.

The browser would essentially have to brute force your server with requests hoping to get lucky.

I'd suggest using Google's closure compiler to merge all similar, if not all, javascript files into a single file. It will be slightly large, but would cut down on http request.

With some profiling you could find a balance between which files are needed most commonly and speed.

UPDATE (from comments)

I'm generally reluctant to offer adding a new javascript library to solve the issue of too many javascript libraries :) Plus this just seemed like the more straight forward solution. Current we use the Google closure API to compress and merge all our javascript and CSS and build time with ANT. Works a charm. This can also be done to some extent direct with apache2 virtual host/htaccess (see html5boilerplate.com) for examples and limitations

Solution 2

Nope, not in the way you're thinking of. You could do something that's similar if you're using JavaScript loaders (e.g. RequireJS or LabJS), since you can then condense each file into an array and loop through them, or, if you're feeling ambitious cook up some protocol between the front and back ends to support this.

Nonetheless, this is not recommended as it's not easy to maintain. If your problem with combining the files into a single one is with the effort, then JS minifiers (e.g. UglifyJS or Closure Compiler) may solve your problem.

Solution 3

Actually, as somebody else may have mentioned, you could add your own script file in there and do something like add the paths to an array, loop through it calling getScript for each item.

$.getScript('ajax/test.js', function() {
    alert('Load was performed.');
});

Solution 4

ie use the * as wildcard.

No. Well, not unless you want to configure your server to pass a URL which includes a * character through a script that resolves it and bundles up all the JS on the fly.

Obviously as this is JS I could just throw all those scripts into one big script and load that but I don't really fancy doing that.

It's a good solution. Generally you would want to do this as part of a build script for the site, and throw in a call to a minifier at the same time.

View more solutions

Comments

[El Ronnoco]

Ok who's the joker downvoting without commenting?? Show yourself!!

[El Ronnoco]

Thanks, I do mention that as a possible solution in the question :)

[El Ronnoco]

+1 Yes, good to think of it that way. I suppose the browser is expecting one file back for each request. I thought perhaps the server could possibly find all the matching files and concatenate them into one response. Obviously not though! - Unless you use @David's method

[Trevor]

Good answer if you need to include lots of js files e.g. if you have an AngularJS app or custom libraries: create a loader script add it to the bottom then get that to do the loading using getScrpt jQuery method result is much cleaner code!