如何在ASP.NET MVC項目中組織前端JavaScript代碼？

Question

我有一個ASP.NET MVC項目，它採用了大量的JavaScript（jQuery和d3）。我是網絡開發的新手，所以我想問一些關於如何組織前端腳本代碼的幫助。

我目前的做法是，'Views'下的每個文件夾只有一個相應的.js文件（這意味着該文件夾下的所有部分視圖（.cshtml），共享該.js文件），並顯式初始化所有。我的項目的js文件在_Layout.cshtml的$（document）.ready（）中。

這就引入了2個問題：

1. 因爲所有的部分意見提出在一個.js文件中有代碼，所以它使每一個js文件龐大而複雜。
2. 由於我在加載_Layout.cshtml時初始化所有.js文件，因此即使未加載一個視圖，其後面的.js也會執行，聽起來不靈活。

因此，這裏是我的問題：

1. 如何使各部分觀點都有自己的js文件（拆分當前的.js小塊）。
2. 如何加載並運行部分視圖的.js文件，僅當該部分視圖被加載時。
3. 如果我使用TypeScript和KnockoutJS，它們是否提供了組織前端腳本代碼的好處？

在此先感謝。

Answer 1

有多種方法可以給貓皮。如果您具有特定於部分視圖的JavaScript代碼，則完全可以跳過包含文件並通過<script>標記直接嵌入JavaScript的步驟。這可以解決你發佈的問題1和問題2，因爲剃鬚刀局部視圖可以歸結爲在加載時插入到DOM中的任意HTML。

至於TypeScript和KnockoutJS，他們提供的好處對您自己和您正在開發的項目非常主觀。我建議您閱讀他們提供的功能，看看這是否是您想要追求的途徑 - 對此沒有正確或錯誤的答案，至少沒有針對您正在處理的具體情況。

Answer 2

將您的JavaScript代碼拆分爲多個文件，以便每個js文件對應於部分視圖。

然後在部分視圖的部分視圖中加載相應的js而不是_Layout.cshtml文件。這樣，相應的js將僅在部分視圖被加載時執行。

TypeScript是一種基於類的面向對象編程風格，適用於由微軟開發和維護的基本JavaScript。這不利於組織文件，但有助於將Js代碼保持爲OOP風格。（鏈接here）

KnockoutJS是應用於JavaScript的Model-View-ViewModel（MVVM）模式。你可以在KnockoutJS中模塊化每個js文件，也就是說，將模型，視圖和視圖模型分開爲js，但是它們會相互依賴（見documentaion）