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

我遵循一些规则：

除非绝对必要，否则不要将变量直接附加到DOM。
尽可能多地在js文件中放置信息。 js文件越少越好。
版本你的js文件。通过Chirpy或SquishIt
在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>

它还使得更清楚的是发生了什么（并在六个月后返回项目时进行调试），因为没有任何事情发生，除非你明确告诉它这样做。

Answer 3

我个人总是将javascript放在单独的文件中。全局变量，它依赖于视图中的路由或某些服务器端信息。正如你所做的那样。作为存储全局变量的替代方法，您可以使用已包含url的锚点或表单元素，然后对它们进行ajaxify。就模型值而言，它们也可以存储在DOM元素中，例如隐藏字段，CSS类，HTML5数据 - *属性......但是这可能并不适用于所有情况。

Answer 4

vandalo，

我借用了javascript全部处于单独文件中的情况。但是，在控制器上使用自定义操作结果时，js将作为htmlhelper函数调用，并具有页面的上下文。 htmlhelper实际上将代码作为文件提供，因此它被缓存，从而加快了执行/交付。

我知道你会好奇地看到它是如何工作的，所以会更新答案以便稍后展示它的机制。

直到那时......（这里是我得到灵感的链接。然后根据自己的需要调整它）

ASP.NET MVC routing and paths is js files

好的，这是我的工作示例（一个包含所需帮助程序和类的简单mvc 2项目） - 享受：

http://www.gatehousemusic.com/downloads/ServeJsExample.zip

Answer 5

至少是一个单独的整洁文件。放入每个文件的语言越少，一目了然就能更容易地阅读它所做的事情。

Answer 6

这是我在ASP.NET MVC3上完成@weirdlover答案的方法，他缺少的一件事就是JSON编码，当你想在js中安全地注入数据时这是非常重要的。

如果数据不是太大并且可以逻辑地附加到DOM元素，我使用一个（或几个）数据属性（不需要jQuery插件并让css类漂亮）和css用于从jQuery中查找元素的类。

愚蠢的例子：

HTML：

<div class="text-widget" 
     data-options="@Json.Encode(new { url = Url.Action("Update", "Text", new { id = 3 }), uselessParam = true })">
  <input type="text" />
</div>

CoffeeScript的：

class TextWidget
  constructor: (@element) ->
    @el = $ @element
    @options = @el.data 'options'
    @input = @el.find 'input'
    @input.change @update

  update: =>
     value = @input.val()
     $.post @options.url, 
       value: value
       , -> alert 'text saved'

$ ->
  new TextWidget element for element in $('.text-widget').get()

与Json.Encode和jQuery.data有点关系：如果你在一个简单的字符串上使用它，你将在javascript中得到一个带引号的字符串：$（）。data（＆＃39; strattribute＆＃39;）==＆＃39; ＆＃34;你好＆＃34; ＆＃39 ;.在这种情况下只需使用Html.Encode。

无论如何，我更喜欢使用我在控制器中构建的匿名对象的单一属性，它更容易维护：data-options="@Json.Encode(Model.Options)"。

如果有很多数据，比如我将转向Viewmodel for knockoutjs的对象列表，我会使用<script>和var data = @(Html.Raw(Json.Encode(Model.MyData)));。

我还使用命名空间和闭包来避免污染全局对象。

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

6 个答案: