1

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

  • 页面
  • 命名空间

同时它使用 Backbone 模型和集合以及 jquery、underscore 和一些其他流行的库。

在“Models”WinJS 风格的命名空间（例如：）中定义的每个 Backbone 模型WinJS.Namespace.define("Models", {mymodel: //stuff})以及在“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>
4

1 回答 1

3

让我们举个例子。

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 的末尾。

于 2013-04-13T02:54:09.450 回答