Javascript Windows 8应用程序中的Require.js代码组织_Javascript_Windows Runtime_Microsoft Metro_Requirejs_Winjs

Javascript Windows 8应用程序中的Require.js代码组织

javascript windows-runtime requirejs

Javascript Windows 8应用程序中的Require.js代码组织,javascript,windows-runtime,microsoft-metro,requirejs,winjs,Javascript,Windows Runtime,Microsoft Metro,Requirejs,Winjs,我有一个用JS编写的Windows 8应用程序，它使用了一些WinJS概念：页数名称空间同时，它使用主干模型和集合以及jquery、下划线和其他一些流行的库 “Models”WinJS样式命名空间中定义的每个主干模型（例如：WinJS.namespace.define（“Models”，{mymodel://stuff}））和“Collections”命名空间中的每个集合。集合和模型的实例存储在“App”命名空间中每个页面都是WinJS样式的页面（例如：WinJS.UI.Pages.

我有一个用JS编写的Windows 8应用程序，它使用了一些WinJS概念：

页数
名称空间

同时，它使用主干模型和集合以及jquery、下划线和其他一些流行的库

“Models”WinJS样式命名空间中定义的每个主干模型（例如：

WinJS.namespace.define（“Models”，{mymodel://stuff}）

）和“Collections”命名空间中的每个集合。集合和模型的实例存储在“App”命名空间中

每个页面都是WinJS样式的页面（例如：

WinJS.UI.Pages.define（“/Pages/somepage/somepage.html”，{//stuff}）

）。每个页面都有自己的包含html、css和js文件的文件夹

因此，现在我有一堆相互依赖的JS文件，我的入口点default.html有大量的

标记，它们以正确的加载顺序手动排序，很难随着时间的推移进行维护

问题： 最近我听说require.js似乎解决了我的问题，考虑到依赖关系，它以正确的顺序加载模块。但问题是，我不知道如何重构代码，看起来WinJS.pages和WinJS.namespace与require.js的模块化风格不兼容。这里最好的方法是什么？什么是最佳实践

my default.html头的示例：

<head>
<meta charset="utf-8" />
<title>CollectionsWinJS</title>

<!-- Javascript libraries -->
<script src="/js/libs/jquery.js"></script>
<script src="/js/libs/underscore.js"></script>
<script src="/js/libs/backbone.js"></script>
<script src="/js/libs/js-yaml.js"></script>

<script src="/js/libs/jquery.ui.position.js"></script>
<script src="/js/libs/moment.js"></script>

<script src="/js/libs/metrobone.js"></script>

<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

<!-- CollectionsWinJS references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/conf.js"></script>
<script src="/js/default.js"></script>
<script src="/js/navigator.js"></script>

<script src="/js/data.js"></script>

<!-- Javascript namespaces -->
<script src="/js/clns.js"></script>
<script src="/js/converters.js"></script>

<!-- Sources -->
<script src="/js/Models/User.js"></script>
<script src="/js/Models/ExternalItem.js"></script>
<script src="/js/Collections/ExternalItems.js"></script>
<script src="/js/Models/Service.js"></script>
<script src="/js/Models/ServiceProvider.js"></script>
<script src="/js/Collections/Services.js"></script>
<script src="/js/Collections/ServiceProviders.js"></script>

<script src="/js/main.js"></script>
</head>


收集WinJS

让我们举个例子

script1.js
(function()
{
    'use strict';
    var A = WinJS.Class.define( 
        function A_ctor() {}, 
        {
            property1: { .. }
            func1: ..
        });

    WinJS.Namespace.define('Models.A', { A: A });
}();
script2.js
(function()
{
    'use strict';
    var B = WinJS.Class.define( 
        function B_ctor() {}, 
        {
            property1: { .. }
            func1: function func1()
            {
                var a = new Models.A();
            }
        });

    WinJS.Namespace.define('Models.B', { B: B });
}();

在上述场景中，在

B.func1

到

类中存在运行时依赖关系。但不管是在初始化流中首先执行

script1

还是

script2

。这是因为初始化流只定义类，它们还没有执行

如果您的所有脚本都正确地模块化为类并通过名称空间本身发布，那么初始化代码流应该是应用程序激活流，并且可能是default.js中某些全局变量的实例化，这些变量可以放在default.html的末尾。

您真的需要担心顺序吗？在加载/初始化过程中，脚本是否相互依赖？很好地保留每个脚本，如

（function（）{…}）（）这并确保全局变量为/none和/或使用WinJS.Namespace公开类。在这种情况下，脚本标记的长列表可以被认为类似于在c#代码中包含名称空间指令。例如，在c#代码中有一长串使用指令是可以的，你说“这解决了我的问题”。你想要解决的问题到底是什么？require.js的最大优点是，它可以在必要时避免脚本执行，但听起来您可能不会执行太多繁重的脚本执行。@Sushil代码段相互依赖。例如，我的主干集合A使用模型B。因此A依赖于模型B。@JeremyFoster的问题是：我不知道如何将WinJS命名空间与require.js模块化系统相结合。它实际上不适用于主干模型定义。model.js:WinJS.namespace.define（“mymodels”，{model:Backbone.Models.extend（…）}）。collection.js:WinJS.Namespaces.define（“mycollections”、{collection:Backbone.collection.extend（{model:mymodels.model/*如果首先加载collections.js，则此项设置为null*/}）如果使用Backbone.js（而不是WinJS-app）为webapp处理相同的问题-模型将如何定义-模型类将以正确的顺序声明在mymodels.js中吗？我对任何类型的web开发都很陌生，人们说他们使用AMD Loader，这就是为什么我问这些问题来询问人们，其他解决方案是什么：）