Jak nie utonąć w plikach java scriptowych w aplikacji ASP.NET MVC.

Co to jest RequireJS

Czyli jest to biblioteka w JavaScript, dzięki której możesz tworzyć moduły a później w zależności od potrzeb je wstrzykiwać do swojej aplikacji.

Dzięki temu masz pełną kontrolę nad bibliotekami oraz własnymi plikami JavaScript. Będą ładowane tylko na tych podstronach, na których są rzeczywiście potrzebne.

Nie muszę Cię chyba przekonywać o zaletach takiego rozwiązania.

Konfiguracja projektu

Zacznij oczywiście od dodania biblioteki RequireJS do projektu. Możesz zrobić to za pomocą mechanizmu Bundle albo Helpera bezpośrednio w Layoucie.

Ja wybrałem drugą opcję.

<script src="@Url.Content("~/Scripts/libs/require.js")"></script>;

Następnie musisz wszystko skonfigurować. Przykładowa konfiguracja:

<script>	 	 
 require.config({	 	 
 baseUrl: "/Scripts/",	 	 
 paths: {	 	 
 'jQuery': '/Scripts/libs/jquery-1.10.2',	 	 
 'knockout': '/Scripts/libs/knockout-3.4.0',	 	 
 'ko_validation': '/Scripts/libs/knockout.validation',	 	 
 'ko_mapping': '/Scripts/libs/knockout.mapping-latest',	 	 
 'bootstrap': '/Scripts/libs/bootstrap',	 	 
 'datepicker': '/Scripts/libs/bootstrap-datepicker',	 	 
 },	 	 
 shim: {	 	 
 'jQuery': {	 	 
 exports: '$'	 	 
 },	 	 
 'knockout': {	 	 
 exports: 'ko'	 	 
 },	 	 
 'bootstrap': ['jQuery'],	 	 
 'ko_validation': ['knockout'],	 	 
 'ko_mapping': ['knockout'],	 	 
 'datepicker': ['bootstrap'],	 	 
 }	 	 
 });	 	 
 </script>

Niechciałbym teraz rozpisywać się na temat konfiguracji samego RequireJS. Możesz zajrzeć do oficjalnej dokumentacji albo poszukać w sieci informacji po polsku.

Jeżeli w layout nie masz sekcji „scripts” to warto ją dodać.

@RenderSection("scripts", required: false)

Przykładowy moduł w pliku /Scripts/HomeViewModel.js

define(["knockout", "jQuery" ],	 	
function (ko, $, ) {	 	 
var HomeViewModel = function(){	 	 
};	 	 
return HomeViewModel ;	 	 
});

Helper MVC

Aby Twój kod był jeszcze ładniejszy dodaj Helper, z którego będziesz mógł korzystać w widokach do ładowania modułów.

W projekcie MVC stwórz nowy folder Extensions a w nim klasę

public static class HtmlHelperExtensions	 	 
{	 	 
public static MvcHtmlString RequireJs(this HtmlHelper helper, string module)	 	 
{	 	 
var require = new StringBuilder();	 	 
require.AppendLine("<script>// <![CDATA[ "); require.AppendLine(" require( [ "" + module + ""] );"); require.AppendLine(" // ]]></script>");	 	 
return new MvcHtmlString(require.ToString());	 	 
}	 	 
}