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

Question

我有一個ASP.NET MVC項目，該項目采用了許多JavaScript（jQuery和d3）。 我是Web開發的新手，所以我想尋求有關如何組織前端腳本代碼的幫助。

我當前的方式是，“視圖”下的每個文件夾只有一個對應的.js文件（這意味着該文件夾下的所有部分視圖（.cshtml），共享該.js文件），我明確初始化了我的所有.js文件_Layout.cshtml的$（document）.ready（）中的項目。

這引入了兩個問題：

1. 因為所有局部視圖都將代碼放在一個.js文件中，所以這使每個.js文件又大又復雜。
2. 因為我在加載_Layout.cshtml時對所有.js文件進行了硬編碼初始化，所以即使未加載一個視圖，也要執行其背后的.js聽起來不太靈活。

所以這是我的問題：

1. 如何使每個局部視圖都有自己的.js文件（將當前.js分成小塊）。
2. 僅在加載部分視圖的.js文件時，才可以加載和運行該視圖。
3. 如果我使用TypeScript和KnockoutJS，它們在組織前端腳本代碼方面是否有任何好處？

提前致謝。

Answer 1

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

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

TypeScript是一種基於類的，面向對象的編程風格，應用於基本javascript，由Microsoft開發和維護。 這無助於整理文件，但有助於以OOP樣式維護js代碼。（鏈接此處 ）

KnockoutJS是應用於JavaScript的Model-View-ViewModel（MVVM）模式。 您可以在KnockoutJS中對每個js文件進行模塊化，即分別為Model，View和ViewModel使用js，但是它們之間會相互依賴。（請參見documentaion ）

Answer 2

有多種方法可以為貓皮。 如果您具有特定於部分視圖的javascript代碼，那么只需跳過包含文件並通過<script>標記直接將JavaScript嵌入其中的步驟就可以了。 這解決了您發布的問題1和2，因為剃刀局部視圖可以簡化為在加載時插入DOM中的任意HTML。

至於TypeScript和KnockoutJS，它們提供的好處在很大程度上取決於您自己和您正在從事的項目。 我建議閱讀他們提供的功能，看看這是否是您要追求的途徑-對此沒有正確或錯誤的答案，至少沒有關於您正在從事的工作的很多特定上下文。