动态加载Backbone/RequireJs中的依赖项

Dynamically load dependencies in Backbone/RequireJs

本文关键字：依赖 RequireJs 加载 Backbone 动态      更新时间：2023-09-26

我使用的是Backbone/RequireJs javascript堆栈。我想要实现的是动态地要求Model依赖于Backbone.Collection，之后Collection依赖被设置。

我想保持Collection尽可能多的通用，我想根据当前的主要上下文分配不同的Models和rest url。我们的目标是在特定的上下文中只加载所需的内容。

window.Collection = Backbone.Collection.extend({
    initialize: function(modelName,apiRoute){
        this.modelName = modelName;
        this.apiRoute = apiRoute;
        if (typeof(window[this.modelName]) === "function") { 
            this.model = window[this.modelName];
            this.url = "./api/" + this.apiRoute;
        }
    }
...

这里的问题是主上下文中的window[this.modelName]依赖必须在Collection依赖之前加载。

说对象MainContext需要一个集合:

// MainContext.js    
define([ 
     ...
     "model/Collection"

并在MainContext中解析modelName变量，该变量用于集合所需依赖项的名称值。Toys")。如果在MainContext中设置了require(['model/Toys'])，那么该依赖文件将加载得太晚。

在这种情况下该怎么做呢?升值。

听起来你在描述一个标准的Require.js循环依赖。换句话说，您有一个依赖于Toys的Collection，但其他一些模块使其不可能实现。

您提到的标准解决方案是使用require的同步形式，即。require(['model/Toys'])。然而，听起来把它放在MainContext是错误的方式，因为MainContext加载时它还没有加载。

解决这个问题的方法是在加载时不需要的地方使用同步要求，这听起来像您的Collection。您的Collection需要模型，但是它在运行时需要它(特别是在运行initialize时)。如果您将代码更改为: 
window.Collection = Backbone.Collection.extend({
    initialize: function(modelName,apiRoute){
        this.modelName = modelName;
        this.apiRoute = apiRoute;
        if (typeof(window[this.modelName]) === "function") { 
            this.model = require('model/' + this.modelName);
            this.url = "./api/" + this.apiRoute;
        }
    }
....

在初始化运行时，模型应该已经被加载。

希望对你有帮助。

相关文章：