asp.net MVC 프로젝트에서 큰 자바 스크립트 코드를 처리하기위한 좋은 전략은 무엇입니까?

Question

내 MVC 프로젝트의 자바 스크립트 코드를 관리하는 가장 좋은 방법을 찾아 내려고하고 있습니다. 내 사이트의 일부 페이지는 페이지 워크 플로로 인해 사용자 인터페이스 용 자바 스크립트가 매우 큽니다. 개발 및 디버깅을하기 위해

쉽게 나는 네의 .js의 모든 기능을 검색 할 수있다 JQuery와 제어 및 필드 초기화의 어떤 형태를 처리 할 수있는 모든 기능을 가지고 파일, Initializations.js, DataRetrieval.js 및 디스플레이에 내 모든 자바 스크립트를 분할 ajax를 통한 데이터, ajax를 통해 서버에 데이터 수정을 보내는 모든 기능을 가진 DataModification.js 및 도움을주는 유틸리티 기능을 가진 Utilities.js.

이 방법으로 구조화하면 어떤 파일에 특정 기능이 포함되어 있는지 알 수있을뿐 아니라 자바 스크립트 파일을 더 작게 유지할 수 있습니다. 또한 크롬 디버거에서 바로 스크립트를 볼 수 있고, 어떤 파일을 선택하고 디버깅 할 필요가있는 기능을 쉽게 찾을 수 있기 때문에 디버깅에도 도움이됩니다. 내가 읽는 바로는 대부분의 브라우저가 여러 .js 파일을 동시에 다운로드 할 수 있으므로 페이지로드 속도가 빨라집니다. 또한 나중에 더 쉽게 축소 할 수 있습니다.

내가보기에 문제는 .js 파일을 사용하면 C# 코드를 볼 수 없으므로 삽입 할 수 없다는 것입니다. 즉, 모든 URL에 마법 문자열이 있어야합니다 (나중에 경로를 변경하면 나중에 모든 URL을 변경해야 함). C#으로 설정 한 상수를 사용할 수 없기 때문에 모든 것을 관리 할 수 ​​있습니다. 어떤 정수가 프로젝트가 게시되지 않았다는 것을 의미하는 상수를 변경하면 javascript 파일의 모든 참조를 검색하고 직접 변경하여 버그를 유발할 수 있습니다.

내가 생각한 한 가지 가능성은 자바 스크립트 파일을 부분보기로 전환하는 것입니다. 그러나 이것은 여전히 ​​페이지의 소스 코드가 자바 스크립트로 흩어져 있기 때문에 꽤 복잡한 웹 브라우저에서 페이지를 디버깅합니다. 이것은 또한 나중에 자바 스크립트를 축소하는 것을 어렵게 만듭니다.

내 자바 스크립트를 관리하고 사이트의 C#/MVC 부분과 일관되게 유지하면서 변경해야 할 때 DRY를 위반하지 않아도되는 다른 전략은 무엇입니까?

내 사이트의 웹 응용 프로그램 부분에는 여전히 많은 개발 기능이 있으므로 작성해야 할 자바 스크립트가 훨씬 더 많습니다. 이전보다 더 많은 일을하기 전에 전략을 수립하고 싶습니다.

Answer 1

결국 저는 의견 (this post)에서 Uvita가 링크 한 솔루션을 사용하려고합니다. 지금까지는 잘 작동하는 것처럼 보였습니다. 축소화를 수행 할 수있을뿐만 아니라 내 의견을 정리하는 것과 같은 방식으로 내 자바 스크립트를 쉽게 유지할 수있게 해줍니다. 대체로 자산 관리와 MVC를 자바 스크립트 파일에 통합하는 가장 깨끗한 방법 인 것 같습니다.

Answer 2

JS 구조는 그대로 유지하지만 마법 문자열을 사용하는 대신 중요한 요소를 전달하십시오.

JS에 가능한 한 최소 데이터를 전달하고 해당 사이트에서 사용할 수있는 HTML 도우미를 작성하십시오. 여기에 정말 간단한 예가 있습니다.

public MvcHtmlString ScriptData(this HtmlHelper helper) 
{ 
    var scriptData = "window.Routing.ImportantRoute = '" + Url.Action("ActionName", "ControllerName") + "'; "; 
    // etc. 
    return MvcHtmlString.Create("<script type = 'text/javascript'>" + scriptData + "</script>"); 
} 

이 기술은 전달하는 양을 제한하기 때문에 좋습니다.

Answer 3

내가 한 일은 가장 좋은 방법은 아니지만 나에게 효과적 일 수 있습니다. 자산 관리자를 사용하고 있습니다. 광고하려고하지는 않지만 Telerik의 WebAssetManager를 MVC 제품에 사용합니다.그와

http://weblogs.asp.net/rashid/archive/2009/05/02/script-and-css-management-in-asp-net-mvc-part-2.aspx

장소에서, 나는 그렇게처럼 내 자산을 구성 :

Assets\ 
     Scripts\ 
       Shared\ <--Jquery etc 
       ControllerName\ 
           ViewName\ 

     Css\ 
      CssStuffGoesHere.css 

마스터 페이지를 여기 발견 작동 할 수 있습니다 내가 과거에 사용 된 오픈 소스 자산 관리자가있다 , 및보기은 작업을 수행하는 데 필요한 JavaScript 파일을 지정한 다음 자산 관리자가이 파일을 모두 가져와 캐시 용 버전과 결합합니다. 내가 말했듯이, 그것이 완벽한지 나는 알지 못합니다. 그러나 그것은 매우 단순합니다.

js 파일 내부의 동적 변수까지. 간단히 ~ \ Scripts \ Dynamic.js를 가리키는 경로를 선언하여 필요한 JavaScript에 동적 변수를 삽입 할 수 있습니다. http://github.com/clearwavebuild/Pithy

나는 꽤 독점적으로 내 MVC 응용 프로그램에서 사용 :

Answer 4

당신은 피티라는 응용 프로그램을 확인해야합니다. 당신은 Pithy.js은 아래와 같은 파일을 마스터 생성 : 작게하다,

<%= Pithy.Javascript.Render("changePassword-page.js") %> 

이 그 태그로 모든 해당 JS 파일을로드하고 압축 : 당신의 C#을 뷰에서 다음

"print.css": [ 
    "~/static/css/print.css" 
], 

"login-page.css": [ 
    "~/static/css/pages/page_login.css" 
], 

"login-page.js": [ 
    "~/static/js/pages/cw.page-login.js" 
], 

"changePassword-page.css": [ 
    "~/static/css/pages/page_changepassword.css" 
], 

"changePassword-page.js": [ 
    "~/static/js/pages/page-changepassword.js" 
], 

"encounter-list.css": [ 
    "~/static/css/encounter-list/encounter-list.print.css", 
    "~/static/css/encounter-list/encounter-list.table.css" 
], 

을, 당신은 호출 할 수 있습니다 .

필자가 필요로하는 파일에 C# 변수를 가져 오는 동안 부분 뷰를 사용하지만 부분 뷰는 C#의 변수 선언 만 포함하고 일반 JS 파일은 이러한 변수를 참조합니다. 예를 들어

: 다음

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 
<script type="text/javascript"> 
    var BehaviorReduction = { 

}; 

BehaviorReduction.loadingImage = "<%= Url.Content(Links.Static.img.ajax_loader_gif) %>"; 
BehaviorReduction.behaviorOverviewUrl = "<%=Url.Action(MVC.BehaviorReduction.RenderBehaviorOverview()) %>"; 
BehaviorReduction.addNewBehaviorUrl = "<%=Url.Action(MVC.BehaviorReduction.AddNewBehavior()) %>"; 
</script> 

:

<asp:Content runat="server" ID="Content3" ContentPlaceHolderID="JavaScript"> 
    <% Html.RenderPartial(MVC.BehaviorReduction.Views.BehaviorReductionJavascript);%> 
    <%= Pithy.Javascript.Render("BehaviorReduction.js")%> 
</asp:Content> 

이 모든 과정은 우리가 우리의 자바 스크립트를 관리 할 수 ​​일이 매우 간단했다. 프로덕션 릴리스에서는 깨끗하고 압축 된 압축 상태를 유지하며 개발 과정에서 파일이 절대로 캐시되지 않도록하여 두통을 덜어줍니다.