格式化MVC3視圖的JavaScript

Question

我已經嘗試了許多不同的方法來組織現在特定於每個View的JavaScript，但我還沒有找到任何我覺得舒服的方法。 無論如何它似乎很亂。 可能（並且希望）因為我沒有使用JavaScript很長時間，並且有一種很好的方法可以做到這一點。

目前我正在做的是：

在我的布局文件中，除了RenderBody之外，我還有腳本的RenderSection。 本節包含與每個視圖相關的所有JavaScript。 全局腳本隱藏在它自己的文件中。

在這一部分中有很多不同的JavaScript部分（對於我最大的View，目前大約有600行JavaScript）：

• 變量的一些定義和設置不同的設置（jQuery設置等）。
• 隱藏屏幕上不同的DOM元素，當用戶稍后與View交互時，這些元素將變為可見。
• 鏈接到DOM元素的不同事件的許多jQuery代碼（單擊/ keyup ++）
• 一些代碼重構為方法，因為它們被不同的jQuery事件使用。

我不喜歡的東西主要有兩件事：

• 所有這些代碼都放在一個大的代碼塊中，很難找到我正在尋找的腳本部分。 基本上，隨着腳本的增長，它變得非常難以維護。
• 該腳本與View位於同一文件中。 我想把腳本放到一個單獨的文件中，但我不能，因為我使用了我的模型的不同部分，以及腳本中的一些HtmlHelpers。 例如，在我執行一些$ .post調用的地方，我使用@Url.Action('...')將其鏈接到正確的操作方法，以確保即使我更改路由，我的腳本也會繼續工作。 我也使用模型來決定某些元素是否應該隱藏起來或者不是這樣（這是一個讓它開始隱藏的好方法，還是有更好的方法？即使我不能把它看起來有點hacky我的手指）：

碼

@if( Model.SomeBoolValue ){
  @:$("#DOMelementID").hide();
}

一些指示讓我走向正確的方向將受到高度贊賞。 在失去對自己代碼的控制權之前，我需要更好地構建這個結構。

Answer 1

是的，它會變得艱難。

這是我們的工作，並為我們工作 （以粗體顯示，因為它可能對您不起作用）。

對於每個View /頁面，我們計算出JavaScript需要哪些模型屬性才能做出決策（也就是“邏輯”）。

我們在JavaScript的布局中也有一個部分。

然后我們在View /頁面中設置一個JavaScript屬性，封裝這些屬性，如下所示：

@section JavaScript {
   <script type="text/javascript">
      yn.yp = {
          someBoolValue: @Model.SomeBoolValue,
          someOtheProp: '@Model.SomeOtherProp'
      }
   </script>
}

yn =您的命名空間，為您的項目/公司綁定全局命名空間。 yp =您為其設置JS屬性的頁面。

然后在您的外部JS文件中：

$(function() {
   if (yn.yp.someBoolValue) {
      $("#elementid").hide();
   }
});

這也是處理客戶端AJAX使用的路由URL的一種非常簡潔的方法 。 設置像yn.yp.urls這樣的屬性，並在View中設置URL，然后JS可以輕松訪問它們而無需任何硬編碼。

總的來說，這里的目標是減少嵌入式頁面JavaScript中的服務器端代碼。

設置JS需要做出決策的屬性，然后讓JS自己做出決策。

希望有道理。

Answer 2

我建議你看看jQuery插件創作，並根據你將附加到DOM元素的插件組織你的javascript代碼。

就@Url.Action('...')問題而言，有許多方法可以解決此問題並將腳本外部化為單獨的文件。 例如，假設您正在AJAX化現有表單或已包含url的ActionLink：

$('#myAnchor').click(function() {
    // use this.href to fetch the url
    $.post(this.href, function(result) {

    });
    return false;
});

現在，如果您只是想在用戶點擊div時發送一個AJAX請求，那么您總是可以使用HTML5 data- *屬性（與ASP.NET MVC 3不引人注目的AJAX和驗證工作方式相同）來定義此URL DOM元素：

<div id="mydiv" data-url="@Url.Action("Some Action")">click me</div>

現在在一個單獨的文件中

$('#mydiv').click(function() {
    var url = $(this).data('url');
    $.post(url, function(result) {

    });
});

如果您按照我關於編寫jQuery插件的第一個建議，您的代碼將如下所示：

$('#mydiv').myplugin();

現在讓我們考慮以下代碼段：

@if(Model.SomeBoolValue) {
    @:$("#DOMelementID").hide();
}

因此，從這里看來，您正在使用視圖模型屬性來顯示/隱藏代碼的各個部分。 好的，這就是我建議您：JSON將此模型序列化到視圖中，然后您可以開始將值傳遞給新開發的jQuery插件：

<script type="text/javascript">
     var model = @Html.Raw(Json.Serialize(Model));
     // now configure configure your plugins, for example
     $('#mysection').myplugin({ model: model });
</script>

現在，在您的插件中，您將可以訪問視圖模型的絕對所有屬性。

這就是你需要在你的觀點中提出的所有內容。 所有其他的javascript當然會在單獨的javascript文件中，在可重用的jQuery插件中正確組織。