我是否正確地構建了JavaScript以遵守AMD規範？

Question

我已經關注this question開始使用RequireJS以及RequireJS jQuery Docs。我一直無法找到如何在單個文件中重用軟件包或如何構建文件本身。以下代碼按預期工作，並在頁面上顯示文本。 javascript的第一部分會自動創建see this question for more details。

我關心的部分是AMDSpecs.js init方法。這對AMD的規格似乎適得其反。如果是這種情況，每次我需要jQuery時，是否需要調用一個require？我希望我解釋我的意思，請詢問是否需要更多信息。

HTML

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

的Javascript

<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

不，你不是很正確。您是「主要」JavaScript文件，由<script>標記的data-main屬性定義，應該啓動應用程序。所有其他JavaScript文件應該代表「模塊」，即與特定用途相關的功能集合。

請注意，我不明白你的應用正在做什麼，所以希望下面的例子至少讓你開始。

1.裝入主腳本：

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

2. 「main.js」 揭開序幕應用：

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

3.打破了你的腳本到個人代表「模塊」的文件。在這種情況下，你的「AMDSpecs」是一個模塊：

/* AMDSpecs.js */ 

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

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

}); 

需要注意的是，除非是有原因有條件或懶洋洋地加載腳本這是沒有幫助的嵌入內require電話require電話。

P.S.當需要腳本時不要使用「.js」擴展名 - 這是由RequireJS自動完成的。