RequireJS 是一個前端模組化開發的流行工具,本身就是一個Javascript的庫文件,即require.js 。
RequireJs的主要功能:
(1)實作js檔案的非同步加載,避免網頁失去回應;
(2)管理模組之間的依賴性,便於程式碼的編寫與維護。
前端模組化開發現在有很多的工具,大體上分為兩類,一類是像dojo之類的高大全,dojo v1.8之後已經內置了模組化開發組件;另一類是像require .js,sea.js 這種專心做模組化開發的工具。
從模組化劃分的規則來區分,主要分為AMD、CMD兩類,dojo、require.js 遵從前者,而sea.js 依循CMD規範。
require在單一頁面應用中能夠如魚得水,然而對於傳統的多頁面應用,使用require多少會有些困惑和不方便。
本文講解如何在ASP.NET MVC的結構中應用require,並且給出了壓縮腳本,實現半自動化壓縮。
將js程式碼分離
一般而言ASP.NET MVC的一個路由對應一個視圖,視圖的檔案結構可能如下:
Views |--Shared |--_layout.cshtml |--Home |--Index.cshtml |--Blog |--Create.cshtml |--Edit.cshtml |--Detail.cshtml |--Index.cshtml
這裡假設_layout.cshtml是所有頁面共享的。一般情況下,我們會在_layout中引用公共的js類別函式庫,例如jQuery,bootstrap等,這樣的話其他的頁面就不需要對這些類別庫再引用一遍,提高了編碼的效率。然而,不同的頁面終究會依賴不同的js,尤其是實現頁面本身功能的自訂的js,這樣我們就必須在其他頁面中再引用特殊的js,甚至將js直接寫在頁面中,例如下面的程式碼常會出現在View:
<script type="text/javascript"> $(function(){...}); </script>
這樣會導致頁面比較混亂,而且頁面