Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/440.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将代码转换为RequireJS_Javascript_Design Patterns_Module_Requirejs - Fatal编程技术网

Javascript 将代码转换为RequireJS

Javascript 将代码转换为RequireJS,javascript,design-patterns,module,requirejs,Javascript,Design Patterns,Module,Requirejs,TL;对于那些不想读我所有垃圾的人来说,这是问题的最底层 我目前的JavaScript模块化方法是简单地创建一个全局锚,比如“csc”(我公司的缩写),然后开始在上面添加模块 因此,我将以如下全球结构结束: csc. Utils Map .Geolocation Storage. Cookie DB 每个文件都存储在一个目录结构中: csc.js csc.Utils.js csc.Map.js csc.St

TL;对于那些不想读我所有垃圾的人来说,这是问题的最底层

我目前的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) {
});
core.js
Utils/
      module.js
Map/
    module.js
    geolocation.module.js
Storage/
        module.js
        cookie.module.js
        db.module.js
我将把我的问题归结为它的本质,以防我上面可怕的描述不够:

模块定义中是否有办法将这三个变量重新组合到问题顶部定义的结构中?还是我在这件事上完全错了,我应该改为坚持要求的做事方式?
我很想遵循Require方法,但我也很喜欢所有模块都可以链接和命名的功能。

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

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

require(['csc', 'csc.Utils', 'csc.Map'], function (csc, utils, map) {
});
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。是的,这将在开发过程中始终加载所有涉及的文件,但是当您编译应用程序时,所有变量都将在匿名函数的作用域内,并且无法通过窗口对象直接访问


同样,如果你认为合适的话,可以对其进行调整,这是你自己的惯例。

AMD的主要好处之一就是不再依赖名称空间。试着拥抱它。没有技术上的理由继续使用它们。