javascript - 您是在 ASP.NET MVC View 中编写 JavaScript 还是在单独的 JavaScript 文件中？

Question

为了改进我的编码风格，我尝试了不同的解决方案，但我不知道什么是最好的。
我已经开始将 JavaScript 放入我的 View 中，但我不是特别喜欢这个解决方案。
使用 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;
});