do you write your JavaScript in a ASP.NET MVC view ... or in a separate JavaScript file?

Question

Trying to improve my coding styles I've tried different solutions but I can't figure out what is the best.
I've started putting JavaScript inside my views but I don't particularly like this solution.
It's hard to debug with Visual Studio, and it kinds of "pollutes" the page.
My new "trend" is to put the scripts for the page in a separate file.
The only problem I am facing is with the code.
To solve the problem I've defined JavaScript variables like this:

<script type="text/javascript">
    var PriceListFetchAction = '<%=Url.Action("Fetch", "PriceList")%>';
    var UploaderAction = '<%=Url.Action("UploadExcelPriceList", "PriceList")%>';
    var ModelId = '<%=Model.id%>';
    var ImportType = '<%=Model.Type%>';
    var customerCodeFetchAction = '<%=Url.Action("FetchByCustomerCode", "Customers")%>';
    var customerNameFetchAction = '<%=Url.Action("FetchByCustomerName", "Customers")%>';
    var ImportErpAction = '<%=Url.Action("ImportPriceListErp", "PriceList")%>';
    var imageCalendar = '<%=Url.Content("~/Content/Images/calendar.png")%>';
</script>  

and then I use the variables in my JavaScript file. What is the best in terms of performance, debugging, style for you?

Answer 1

I follow a handful of rules:

1. Don't attach a variable directly to the DOM unless absolutely necessary.
2. Place as much information in js files as possible. The fewer js files, the better.
3. Version your js files. When publishing, minify and mash via Chirpy or SquishIt
4. In js, minimize your dependency on dynamic server-side values (generated ids, etc.) when you can.

So, here's an example:

I'll add jQuery and jQuery metadata to my project: http://plugins.jquery.com/project/metadata

Then, in my master js file, I'll extend jQuery with my own namespace:

$.extend({
   fatDish : {
     url : {},
     urls : function(a) {
        $.extend($.fatDish.url, a);
     }
   }
});

Almost all of my customized js logic will live in the $.fatDish namespace.

Now, let's say I want to pass a MVC route to $.fatDish. In my aspx page, I'd write the following:

<script src="@Url.Content("~/path/master.js")" type="text/javascript"></script>
<script type="text/javascript">
   $.fatDish.urls({
      path1 : '@Url.Action("Index", "Home")'
   });
</script>

In a js file, I can now write:

window.location = $.fatDish.url.path1;

A second approach is to use jQuery metadata (which I mentioned above). On your aspx page, you could write something like:

<div class="faux-link {act:'@Url.Action("Index", "Home")'}">Go Somewhere</div>

Then, in your js file, you can grab the route value like so:

$('.faux-link').click(function() {
   var $this = $(this);
   var href = $this.metadata().act;
   window.location = href;
});