跨不同 amd 模块共享资源

Question

我目前正在开发一个新的 Web 应用程序。

这是我第一次将 requirejs 与 AMD 模块一起使用。

据我了解，适应新的范例并不容易 -全局命名空间中没有变量。

在以前的 Web 应用程序中，我总是在全局命名空间中有一个变量，我可以使用它来跨不同模块共享多个资源。

现在，使用 requirejs AMD 模块，我使用backbone.js 和jquery（两个 amd 版本 - jquery 1.7.1 和backbone.js 0.5.3-optamd3)。

在我的应用程序中的某个位置，我从服务器（用户对象）获取backbone.js 模块。我想从不同的 AMD 模块访问该模块。我还想要一个应用程序范围的事件对象。

你能告诉我：在 requirejs AMD 中跨不同模块共享资源的正确方法是什么？

Answer 1

我自己找到了解决方案。

谢谢 IntoTheVoid 的回答，但我希望有一个类似 AMD 的解决方案。这不再意味着“污染”全局命名空间。

我的解决方案有两个关键：

“https://github.com/addyosmani/backbone-aura”来自 Addy Osmani 和“https://github.com/amdjs/amdjs-api/wiki/AMD" 异步模块定义 (AMD) API 规范。

规范说：“如果工厂是一个函数，它应该只执行一次。”

因此，如果在 Web 应用程序中多次将 amd 模块指定为依赖项，则该依赖项不仅不会多次加载，而且不会多次执行，这对我来说是新事物。它只执行一次，并保留工厂函数的返回值。具有相同路径的每个依赖项都具有相同的对象。这改变了一切。

因此，您只需定义以下 amd 模块：

define([], function() {
    var app_registry = {};
    app_registry.global_event_obj = _.extend({}, Backbone.Events);
    app_registry.models = {};
    return app_registry;
});

现在，在您想要共享资源的模块中，您将这个 app_registry 模块声明为依赖项，并在其中一个模块中写入：

define(['jquery','underscore','backbone','app_registry'], 
  function ($, _, Backbone, app_registry){
    var firstView = Backbone.View.extend({
    initialize: function() {
        _.bindAll (this, 'methodOne'); 
        this.model.bind ('change', this.methodOne);   
        this.model.fetch();
    },  
    methodOne: function() {
        app_registry.models.abc = this.model;
    }
    ...

并在另一个模块中写入：

define(['jquery','underscore','backbone','app_registry'], 
  function ($, _, Backbone, app_registry){
    var secondView = Backbone.View.extend({
    initialize: function() {
       _.bindAll (this, 'methodTwo'); 
        app_registry.global_event_obj.bind ('special', this.methodTwo);
    },  
    methodTwo: function() {
        app_registry. ...
    }
    ...

Answer 2

要回答有关如何提供应用程序范围的事件对象的问题，您可以创建一个名为 globalContext 的 amd 模块并在 main.js 中实例化它。
此后，您可以将设置附加到 globalContext 并使用全局上下文来创建子组件等。

    //main.js file
    require([ "./global-context" ], function( GlobalContext) {
             new GlobalContext();
    });

在 global-context.js 文件中，我们可以执行诸如加载子模块之类的任务，

    define(["Boiler", "./settings", "./modules/modules"], 
           function (Boiler, settings, modules) {
                  var GlobalContext = function () {

                //here we use a template javascript class called Boiler.Context
                var globalContext = new Boiler.Context("GlobalModule");

                //add settings to the context which can be obtained globally throughout                    the application
                globalContext.addSettings(settings);

                //here we load the sub modules of the global context
                globalContext.loadChildModules(modules);
};

这就是我们在 BoilerplateJS，大规模 javascript 产品开发的参考架构。

Answer 3

您可以使用初始化模式将任何值注入 requirejs 模块（也称为“依赖注入”）。

在代码中的任何位置进行 require 调用：

var MyBackboneModule;

MyBackboneModule = someWayToGetAReferenceToIt();

require("module", function(Module) { 
  Module.initialize(MyBackboneModule);
});

将 module.js 文件定义为

define([], function(){
   var BackboneModuleDoingThisAndThat;

   function initialize(pBackboneModule) {
      BackboneModuleDoingThisAndThat = pBackboneModule ;
   };

   function doSomething() {
      var x = BackboneModuleDoingThisAndThat.computeThis(42);
   };


   return { 
      initialize: initialize
   };
});

Answer 4

您可以在入口点 AMD 模块中定义单个全局 APP。 APP 可以创建并保存对其他共享模块的引用：

APP = {
    this.settings : function() {
        if(settingsModule == undefined){
            //require, create and return it
        } else {
            return settingsModule;
        }
    }
}

Answer 5

只需对您自己的答案进行评论 - 您不需要在 app_registry 模块中定义函数：

define({
  global_event_obj: _.extend({}, Backbone.Events);
  models: {}
});

应该足够了。

请参阅：文档

不过，请小心这些事情。在某些用例中，共享数据模块是有意义的。但是，如果您最终将其用作伪全局命名空间，那么它并不比仅使用全局变量好多少（并不是说这就是您正在做的事情）。