AMD 사양을 준수하기 위해 JavaScript를 올바르게 작성합니까?

Question

나는 RequireJS jQuery Docs뿐만 아니라 RequireJS를 사용하기 시작하기 위해 this question을 따라갔습니다. 단일 파일에서 패키지를 재사용하는 방법이나 파일 자체를 구조화하는 방법을 찾지 못했습니다. 다음 코드는 예상대로 작동하고 페이지에 텍스트를 표시합니다. javascript의 첫 부분은 자동으로 see this question for more details으로 생성됩니다.

내가 관심을 갖는 부분은 AMDSpecs.js init 메소드입니다. 이것은 AMD 스펙에 비생산적인 것으로 보인다. 이 경우 jQuery가 필요할 때마다 require를 호출해야합니까? 제가 의미하는 바를 설명하고 싶습니다. 더 많은 정보가 필요한지 물어보십시오.

HTML

<div id="output"></div> 

자바 스크립트

<script src="/MVCTesting/Scripts/ThirdParty/RequireJS/require.js"></script> 
<script type="text/javascript"> 
    require([ "/MVCTesting/Scripts/AMD/core.js" ], function() { 
    require(["jquery", "/MVCTesting/Scripts/AMD/views/jquery/AMDSpecs.js"],     
     function($, pm) { 
      if (pm != undefined && pm.init) { 
       pm.init($); 
      } 
     }); 
    }); 
</script> 

/*AMDSpecs.js*/ 
define(function() { 
    //Do setup work here 

    return { 
     $: undefined, 
     setupEvents: function() { 
      $("#output").text("jQuery is working!"); 
     }, 
     init: function ($) { 
      this.$ = $; 

      require(["Views/JQuery/AMDSpecs"], function (specs) { 
       specs.setupEvents(); 
      }); 
     } 
    }; 
}); 

UPDATE

여기에 모든 코드와 도널드의 대답 후 내 작업 솔루션입니다. 참고로 모듈 이름에 .js를 포함해야하지만 프로세스가 훨씬 단순 해집니다.

HtmlExtension.cs

/// <summary> 
    /// An Html helper for Require.js 
    /// </summary> 
    /// <param name="helper"></param> 
    /// <param name="module">Location of the main.js file.</param> 
    /// <returns></returns> 
    public static MvcHtmlString RequireJS(this HtmlHelper helper, string module) 
    { 
     const string jsLocation = "Scripts/AMD/"; 

     //Don't build require string if there is not an amd script 
     if (!File.Exists(helper.ViewContext.HttpContext.Server.MapPath(
        GetAbsolutePath(Path.Combine(jsLocation, module + ".js"))))) 
     { 
      return null; 
     } 

     var require = new StringBuilder(); 

     require.AppendLine(" require([\"" + GetAbsolutePath(jsLocation + module + ".js") + "\"], function(pm) {"); 
     require.AppendLine("  if (pm != undefined && pm.init) {"); 
     require.AppendLine("   pm.init();"); 
     require.AppendLine("  }"); 
     require.AppendLine(" });"); 

     return new MvcHtmlString(require.ToString()); 
    } 

    /// <summary> 
    /// Convert the path to work in IIS for MVC 
    /// </summary> 
    /// <param name="path"></param> 
    /// <returns></returns> 
    private static string GetAbsolutePath(string path) 
    { 
     return VirtualPathUtility.ToAbsolute("~/" + path); 
    } 

    /// <summary> 
    /// Create the include for RequireJS based on the current page 
    /// </summary> 
    /// <param name="helper"></param> 
    /// <returns></returns> 
    public static MvcHtmlString ViewSpecificRequireJS(this HtmlHelper helper) 
    { 
     var action = helper.ViewContext.RouteData.Values["action"]; 
     var controller = helper.ViewContext.RouteData.Values["controller"]; 

     return helper.RequireJS(string.Format("views/{0}/{1}", controller, action)); 
    } 

_Layout.cshtml (MVCTesting이 내 프로젝트 이름)

<script data-main="/MVCTesting/Scripts/AMD/core.js" src="~/Scripts/ThirdParty/RequireJS/require.js"></script> 

AMDSpecs.js

define(["jquery"], function ($) { 
    //Do setup work here 

    return { 
     setupEvents: function() { 
      $("#output").text("jQuery is working!"); 
     }, 
     init: function() { 
      this.setupEvents(); 
     } 
    }; 
}); 

Answer 1

아니, 너는 그걸 제대로하고 있지 않다. 당신은 (유일한) <script> 태그의 data-main 속성에 의해 정의 된 "main"JavaScript 파일이므로 앱을 시작해야합니다. 다른 모든 JavaScript 파일은 "모듈"즉 특정 목적과 관련된 기능 모음을 나타냅니다.

귀하의 앱이 무엇을하는지 이해할 수 없으므로 다음 예제를 통해 시작하실 수 있습니다.

방법 1. 메인 스크립트

<script data-main="main" src="/MVCTesting/Scripts/ThirdParty/RequireJS/require.js"></script> 

2. "main.js는"응용 프로그램을 개막 : 개별로

require(["AMDSpecs"], function(specs) { 
    specs.init(); 
}); 

3. 브레이크 업 스크립트 "모듈"을 대표하는 파일. 이 조건에 대한 이유 또는 느리게 스크립트를로드하지 않는 한이 require 통화에서 require 호출을 포함하는 것이 도움이 아님을

/* AMDSpecs.js */ 

define(["jquery"], function($) { 
    // do setup work here 

    return { 
    setupEvents: function() { 
     $("#output").text("jQuery is working!"); 
    }, 
    init: function() { 
     this.setupEvents(); 
    } 
    }; 

}); 

참고 :이 경우, "AMDSpecs"는 모듈입니다.

P.스크립트를 요구할 때 ".js"확장자를 사용하지 마십시오. 이는 RequireJS에 의해 자동으로 수행됩니다.