我有一个用 JS 编写的 Windows 8 应用程序，它使用了一些 WinJS 概念:
- 页面
- 命名空间
同时它使用 Backbone 模型和集合以及 jquery、underscore 和其他一些流行的库。
在“Models”WinJS 命名空间(例如:WinJS.Namespace.define("Models", {mymodel: //stuff}))中定义的每个 Backbone 模型和“Collections”命名空间中的每个集合。集合和模型的实例存储在“App”命名空间中。
每个页面都是 WinJS 样式的页面(例如:WinJS.UI.Pages.define("/pages/somepage/somepage.html", {//stuff}))。每个页面都有自己的文件夹，里面有 html、css 和 js 文件。
所以现在我有一堆相互依赖的 JS 文件，我的入口点 default.html 有一个巨大的堆栈 <script>标签以正确的加载顺序手动排序，并且随着时间的推移很难维护。
问题: 最近我听说了 require.js 并且看起来它解决了我的问题，它在考虑依赖关系的情况下以正确的顺序加载模块。但问题是，我不知道如何重构我的代码，看起来 WinJS.pages 和 WinJS.namespaces 与 require.js 的模块化风格不兼容。这里最好的方法是什么？什么是最佳做法？
我的 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>
最佳答案
让我们举个例子。
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 中存在对A 类的运行时依赖。但是在初始化流程中先执行 script1 还是先执行 script2 并不重要。这是因为初始化流程只是定义类，它们还没有被执行。
如果您的所有脚本都正确地模块化为类并通过命名空间本身发布 - 初始化代码流应该在应用程序激活流中，并且可能是 default.js 中一些全局变量的实例化，这些变量可以放在 default 的末尾。 html.
关于javascript - Windows 8 应用程序中的 Require.js 代码组织，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15960895/