Lately I have been working on a web application that requieres quite a bit of javascript. I decided to use the Mvc pattern here that I have written about before to see how it works out and to get a more readable and seperated javascript code. I did want to seperate the view, model and controller from each other in different files to be able to get a better overview of the javascript code. It can be very hard to read javascript if you have line after line in the view it self and to be able to reuse the same parts in different similar views.

I stared out by creating different .js files for each view, model and controller that i was using. The problem with this is that you will end up with a lot of different requests. On top of the libraries and plugins you use on the page, you will have three more .js files to include. Another dissadvantage is that you will not be able to use any server side method, like ResolveUrl() or anything on you'r model, while rendering the javascript.

After a while I decided to abandon the .js files and go for partial views instead. This way you will be able to seperate the javascript in different files, you will be able to use server side methods while rendering and you will get advantage of the intellisense support in visual studio (you will get this in .js files as well). While at the client side, all javascript will be embedded in the same view without making a lot of requests to the server.This way you get the best of both worlds in my opinion. The only dissadvantage I can see from using external .js files is when you are debugging. It can be harder to find the function you want to debugg and to jump between functions in the browser as all javascript is rendered at the same place. However, with search functions like the one in firebug, this shouldn't be a issue.