你是在ASP.NET MVC视图中编写JavaScript还是在单独的JavaScript文件中编写？

Question

试图改进我的编码风格我尝试了不同的解决方案,但我无法弄清楚什么是最好的.
我已经开始将JavaScript放在我的视图中,但我并不特别喜欢这个解决方案.
使用Visual Studio进行调试很困难,而且它会"污染"页面.
我的新"趋势"是将页面的脚本放在单独的文件中.
我面临的唯一问题是代码.
为了解决这个问题,我已经定义了这样的JavaScript变量:

<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>  

然后我在我的JavaScript文件中使用变量.在性能,调试和风格方面最好的是什么？

Answer 1

我遵循一些规则:

1. 除非绝对必要,否则不要将变量直接附加到DOM.
2. 尽可能多地在js文件中放置信息.js文件越少越好.
3. 版本你的js文件.通过Chirpy或SquishIt发布,缩小和混搭时
4. 在js中,尽可能减少对动态服务器端值(生成的ID等)的依赖性.

所以,这是一个例子:

我将jQuery和jQuery元数据添加到我的项目中:http: //plugins.jquery.com/project/metadata

然后,在我的主js文件中,我将使用我自己的命名空间扩展jQuery:

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

几乎所有我自定义的js逻辑都将存在于$ .fatDish命名空间中.

现在,假设我想将MVC路由传递给$ .fatDish.在我的aspx页面中,我写了以下内容:

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

在js文件中,我现在可以写:

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

第二种方法是使用jQuery元数据(我在上面提到过).在您的aspx页面上,您可以编写如下内容:

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

然后,在你的js文件中,你可以像这样获取路由值:

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

Answer 2

我为计算/逻辑创建单独的javascripts,但是从我的视图中调用它们.通过这种方式,我不必创建全局变量,并且更容易重用javascripts.

示例javascript:

function doSomeCoolProcessing(modelId, fetchAction)
{
    //some stuff
}

并在视图中

<script type="text/javascript">
    $('document').ready(function() {
        doSomeCoolProcessing('<%=Model.id%>', '<%=Url.Action("Fetch", "PriceList")%>');
    )};
</script>

它还使得发生的事情更加清晰(并在六个月后返回项目时进行调试),因为没有任何事情发生,除非您明确告诉它这样做.