Question

TL; DR问题的底部，对于那些不想阅读我所有垃圾的人。

我目前的JavaScript模块化方法是简单地创建一个全局锚点，比如“csc”（我公司的首字母缩略词），然后开始将模块添加到其中。

所以我最终会得到一个像：

这样的全球结构

csc.
    Utils 
    Map
       .Geolocation
    Storage.
            Cookie
            DB

这些文件中的每一个都存储在目录结构中：

csc.js
csc.Utils.js
csc.Map.js
csc.Storage.js

这样就无需一直加载我的整个代码库。

我正在尝试过渡到使用RequireJS，但该库使用的方法似乎有点不同。

为了维护我的命名空间结构，我可以围绕我的所有模块定义模块，但仍然将它们添加到全局“csc”引用中。然而，这似乎违背了要求的核心原则。

但是，如果不保持全局，我会失去我很好的命名空间，例如“csc.Map.Geolocation”，因为我现在有一堆独立的变量，如下所示：

require(['csc', 'csc.Utils', 'csc.Map'], function (csc, utils, map) {
});

如果我上面的可怕描述不够用，我会将我的问题解释为其本质：

是否有一种方法（可能在模块定义中）将这三个变量组合回到此问题顶部定义的结构中？或者我认为这一切都错了，我是否应该坚持要求的做事方式？我很乐意遵循Require方法，但我也喜欢能够将所有模块链接起来并命名为命名空间。

Answer 1

不要因文档的示例路径层次结构而气馁，请注意，require并未严格执行任何特定约定。您可以自由设计并遵循自己的惯例。

Utils，Map和Storage都成为目录。它们执行的基本操作应在其各自的目录中命名为module.js，如下所示：

core.js
Utils/
      module.js
Map/
    module.js
    geolocation.module.js
Storage/
        module.js
        cookie.module.js
        db.module.js

module.js个文件包含并返回其子级。以下是Storage / module.js的示例：

require(["Storage/cookie", "Storage/db"], function (cookie, db) {
    var Storage = {};
    // do whatever you need with Storage
    Storage.cookie = cookie
    Storage.db = db

    return Storage
});

还要注意root中的core.js文件。这个文件可以正常工作，

require(["Utils/module", "Storage/module", "Map/module"], function (utils, storage, map) {
    var Core = {};
    // do whatever you need with Storage
    Core.Utils = utils
    Core.Storage = storage
    Core.Map = map

    return Core
});

现在，需要core.js，无论你需要访问这些模块（基本上每个文件）。是的，这将在开发中一直加载所有涉及的文件，但是当您编译应用程序时，所有变量都将在匿名函数的范围内，而不能通过窗口对象。

再次，根据您的需要调整它，这是您自己的惯例。

将代码转换为RequireJS

1 个答案: