Browserify Babel ES2015 Knockout 依赖模块
Browserify Babel ES2015 Knockout co-dependent modules
我创建了一组单例模块,这些模块加载了各种淘汰组件,并为它们各自的功能区域提供了一个中央 "command and control"。我们称它们为 FooModule 和 BarModule
因此,典型的 Knockout 组件将具有
const ko = require('knockout'),
FooModule =require('../Singletons/FooModel'),
BarModule =require('../Singletons/BarModel');
这似乎运作良好,每个模块都支持各种可观察对象和函数
问题是,我需要 FooModel 要求 BarModel,而 BarModel 要求 FooModel。
如果它不是单例(例如 Class),这可能无关紧要,但是我不能为每个组件的每个模块单独设置 class,否则我将无法跨组件通信(每个页面通常有 3-7 个组件,其中一些是重复的但具有不同的数据)
目前 FooModel 需要 BarModel,反之亦然,但结果对象是 {},这大概是 Browserify 如何处理相互需要的文件
目前每个单例模块相当于:
FooModel...
const ko = require('knockout');
const BarModel = require('./BarModel');
let hiddenVariable = 42 ;
const FooModel = {
FooMonitor : ko.observable(false),
FooFunction : (variable) => { functionFoo(variable) }
}
const functionFoo = (variable) => {
return variable === hiddenVariable ;
};
module.export FooModel ;
BarModel...
const ko = require('knockout');
const FooModel = require('./FooModel');
let hiddenVariable = 24 ;
const BarModel = {
BarMonitor : ko.observable(false),
BarFunction : (variable) => { functionBar(variable) }
}
const functionBar = (variable) => {
return variable === hiddenVariable ;
};
module.export BarModel ;
每个 Knockout 组件都需要 FooModel 和 BarModel,但是如果我添加
console.info(BarModel)
在 FooModel 模块中,浏览器获取 {}
(空对象)
如果 FooModel
需要 BarModel
,BarModel
不能需要 FooModel
。这是一个模块捆绑器限制。
Browserify 将自动删除未使用的依赖项。这就是为什么当您开始使用 FooModel 中的 BarModel 时,模块输出仅被剥离为 {}
。
结合@spender 的评论 - 当您发现循环依赖时,是时候更改架构了。事件是解耦模型的好方法(在这种情况下,使用 KO.postbox 会很好)。
我认为您需要一个同时需要 Foo 和 Bar 的控制模块。然后可以通过传入Bar来初始化Foo,传入Foo来初始化Bar。
我创建了一组单例模块,这些模块加载了各种淘汰组件,并为它们各自的功能区域提供了一个中央 "command and control"。我们称它们为 FooModule 和 BarModule
因此,典型的 Knockout 组件将具有
const ko = require('knockout'),
FooModule =require('../Singletons/FooModel'),
BarModule =require('../Singletons/BarModel');
这似乎运作良好,每个模块都支持各种可观察对象和函数
问题是,我需要 FooModel 要求 BarModel,而 BarModel 要求 FooModel。
如果它不是单例(例如 Class),这可能无关紧要,但是我不能为每个组件的每个模块单独设置 class,否则我将无法跨组件通信(每个页面通常有 3-7 个组件,其中一些是重复的但具有不同的数据)
目前 FooModel 需要 BarModel,反之亦然,但结果对象是 {},这大概是 Browserify 如何处理相互需要的文件
目前每个单例模块相当于:
FooModel...
const ko = require('knockout');
const BarModel = require('./BarModel');
let hiddenVariable = 42 ;
const FooModel = {
FooMonitor : ko.observable(false),
FooFunction : (variable) => { functionFoo(variable) }
}
const functionFoo = (variable) => {
return variable === hiddenVariable ;
};
module.export FooModel ;
BarModel...
const ko = require('knockout');
const FooModel = require('./FooModel');
let hiddenVariable = 24 ;
const BarModel = {
BarMonitor : ko.observable(false),
BarFunction : (variable) => { functionBar(variable) }
}
const functionBar = (variable) => {
return variable === hiddenVariable ;
};
module.export BarModel ;
每个 Knockout 组件都需要 FooModel 和 BarModel,但是如果我添加
console.info(BarModel)
在 FooModel 模块中,浏览器获取 {}
(空对象)
如果 FooModel
需要 BarModel
,BarModel
不能需要 FooModel
。这是一个模块捆绑器限制。
Browserify 将自动删除未使用的依赖项。这就是为什么当您开始使用 FooModel 中的 BarModel 时,模块输出仅被剥离为 {}
。
结合@spender 的评论 - 当您发现循环依赖时,是时候更改架构了。事件是解耦模型的好方法(在这种情况下,使用 KO.postbox 会很好)。
我认为您需要一个同时需要 Foo 和 Bar 的控制模块。然后可以通过传入Bar来初始化Foo,传入Foo来初始化Bar。