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

【问题标题】：Require.js code organization in Windows 8 appWindows 8 应用程序中的 Require.js 代码组织
【发布时间】：2013-04-11 23:58:22
【问题描述】：

我有一个用 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>

【问题讨论】：

您真的需要担心订单吗？在加载/初始化流程中脚本是否相互依赖？最好保留每个脚本，如(function() { ... })();，并确保全局变量很少/没有和/或使用 WinJS.Namespace 来公开类。在这种情况下，可以认为一长串脚本标记类似于在 c# 代码中包含命名空间指令。例如 - 在 c# 代码中有很长的 using 指令列表是可以的。
你说“这解决了我的问题”。您要解决的问题到底是什么？ require.js 的一大优势是它在必要时避免执行脚本，但听起来您可能不会执行太多繁重的脚本。
@Sushil 代码段相互依赖。例如，我的 Backbone 集合 A 使用模型 B。所以 A 依赖于 B。
@JeremyFoster 问题是：我不知道如何将 WinJS 命名空间与 require.js 模块化系统结合起来。

标签： javascript windows-runtime microsoft-metro requirejs winjs

【解决方案1】：

举个例子。

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 中一些全局变量的实例化，默认情况下可以放在末尾。 html.

【讨论】：

它并不真正适用于 Backbone 模型定义。 model.js: WinJS.Namespaces.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应用程序）为webapp处理相同的问题-将如何定义模型-它将是一个mymodels.js，其中模型类被正确声明订购？
我对任何类型的 Web 开发都很陌生，人们说他们使用 AMD 加载器，这就是为什么我问这个问题来问人们，还有什么其他解决方案 :)