This is just a general question. How do you structure your larger projects' javascript?
For example, say you have quite a few pages and are loading info from several different sources asynchronously and stuff like that. I don't want to hard code my urls and such into the javascript and I'd rather not render my javascript inline. How do you deal with stuff like that?
Not sure your language, but with .net I like Shinkansen to compress files. However, with a little ingenuity, you can specify which JS appears on which page (especially when using MVC)
So I have about 20 or 30 JS resources in my project, but only include those that are required for a specific page, and those are compressed into one anyway.
Not sure if that answers your question either! But my structure is all JS in one folder, then pick'n'choose what to use on a per page basis
I keep jQuery plugins in one folder, include files for specific views in its own folder, and everything else in the root "Scripts" folder. So (the js part of) my web app structure looks something like
/Scripts <|- contains general stuff /Scripts/Plugins <|- contains jQuery plugins /Scripts/Views <|- contains include files specific to each view
I tend to keep all of my js in one folder but I name files according to where they came from and if they are page specific implementations or generic plugins. So:
jquery.pluginname-version.js . . . heyfoxy.album.edit.js heyfoxy.album.show.js . . . heyfoxy.plugin.overlay.js heyfoxy.plugin.alerts.js . . .
When I deploy all of the js is minified and served as one file.
Cool, thanks for that.
So now when it comes to the actual code structure. How do you deal with things like defining urls in your javascript for things like ajax calls? I would prefer not to hard code the urls and also to not have to generate my js with my templating system. I suppose I could generate them with the templating system and then just cache it the result, but how do you handle that?
One approach would be to keep functionality structured in a global javascript namespace and have your various generic or specific js functions for various pages or apps in there.
To use Stinky's example :
heyfoxy would be the global namespace for the site.
a page would include heyfoxy.album.show.js which would check if heyfoxy.album already exists, if not add the method block to the namespace. Rough example :
if ( heyfoxy == null ) var heyfoxy = new Object();
if ( heyfoxy.album == null ) heyfoxy.album = new Object();
heyfoxy.album = { show : function(sUrl, oTarget){ // the show method // 'load sUrl into oTarget' } }
The page could call the method from anywhere: heyfoxy.album.show('someUrl', someElement); keeping the urls or any other variable out of the funcionality code.
But you can also create a very specific block of funcionality for one page/app, or have generic stuff like validators added to your functionality namespace by including the js. Not sure if that is what you are looking for or if I am oversimplifying your case, just throwing this out there 
Again, .NET : I keep URLs (and any text needed by javascript, eg "loading.." and error messages) in language specific Resource Files.
Then I have a page that is called like so:
which creates a "resource" object, drawing the info from the Resources file and writing it to the stream
var resources= { somevar='some value', somethingelse='some other value', someUrl = '/go/get/some/ajax/' }
That easily delegates the task of creating the URLs & text to the backend (no hard code, aside from your config file, or you could use a database) and simplifies altering URLs/Text as there is only one place to look.
One thing I try to do with Ajax URLs is to just leave them in the href of the anchor tag. That way, for instance, if you're using Rails url helpers you don't have to worry about breaking things that might be hardcoded in your JS file. Also, if you set up your controllers to check for XHR calls then you can optionally render either a partial or the full page.
For instance if I have a photo album:
. . . .
And links to other albums
<% albums.each do |album| %> "><%=album.title%> <% end %>
Then I can do this:
$("a.show-album").click(function() { var $this = $(this); $($this.data("target")).load($this.attr("href")); });
Which, of course, is generalizable. Write a plugin that does that and you're laughing
$.fn.ajaxLink = function() { $(this).click(function(){ var $this = $(this); $($this.data("target")).load($this.attr("href")); }); };
. . . .
$("a.show-album").ajaxLink();
data-target is an attribute you've just made up right? I like this approach Stinky, very clean. I'm just getting into jQuery and web dev that's not Flash again and it's a whole new world and it's all pretty sweet. Thanks for sharing.
Thanks
I didn't test the code I wrote up there, so take it with a grain of salt. For instance, the ajaxLink method won't work with collections as it is (you'd want to put the click actions inside of a this.each(function() { . . . . } )
Also, "data-" prefix attributes are part of HTML5 which is nice, now we don't have to stuff things in attributes that are semantically the wrong place for them, like the often-abused rel attribute. jQuery just recently added support for data- attributes in the .data method, otherwise you can also access them with attr("data-name").
mm.. yes, that's lovely. thanks!
Please for the love of mike. use _proto
heyfoxy.album.prototype = { pElement : {}, show : function(sUrl, oTarget){ this.pElement = $(oTarget); } }
it doesn't take long, it scopes things nicely and gives you clean closures not to mention ram and performance gains. Keep crap off window and you'll be thankful when you end up with a robust javascript app. Use googlemaps v3 custom overlays and you'll immediately see the power of prototype inheritance in JS. stick wit hthis pattern and you'll see far less orphaned jquery scripts with stacks of anonymous functions within anonymous functions littering the DOM.
Use protos and still take advantage of the scope chain:http://twelvestone.com/forum_thread/view/44703
Originally posted by: persist Please for the love of mike. use _proto
heyfoxy.album.prototype = { pElement : {}, show : function(sUrl, oTarget){ this.pElement = $(oTarget); } }
it doesn't take long, it scopes things nicely and gives you clean closures not to mention ram and performance gains. Keep crap off window and you'll be thankful when you end up with a robust javascript app. Use googlemaps v3 custom overlays and you'll immediately see the power of prototype inheritance in JS. stick wit hthis pattern and you'll see far less orphaned jquery scripts with stacks of anonymous functions within anonymous functions littering the DOM.
Use protos and still take advantage of the scope chain:http://twelvestone.com/forum_thread/view/44703
Such a very amazing link!