Browserify Babel ES2015 Knockout共同依赖模块

时间:2016-02-16 13:30:34

标签: javascript knockout.js ecmascript-6 browserify babeljs

我创建了一组单独的模块,它们可以加载各种挖空组件,并提供一个中央命令和控制"各自的职能领域。我们称之为FooModule和BarModule

因此典型的Knockout组件将具有

const ko = require('knockout'),
    FooModule =require('../Singletons/FooModel'),
    BarModule =require('../Singletons/BarModel');

这似乎运作良好,每个模块都支持各种可观察和功能

问题是,我需要FooModel来要求BarModel,而BarModel需要FooModel。

如果它不是Singleton(例如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模块中,浏览器获取{}(空对象)

2 个答案:

答案 0 :(得分:1)

如果FooModel需要BarModel,则BarModel无法FooModel。这是模块捆绑器限制。

Browserify将自动删除未使用的依赖项。这就是为什么当您从FooModel开始使用BarModel时,模块输出仅被剥离到{}

合并@spender中的注释 - 当您发现循环依赖时,是时候更改体系结构了。事件是解耦模型的好方法(在这种情况下,使用KO.postbox可以正常工作)。

答案 1 :(得分:0)

我认为你需要一个需要Foo和Bar的控制模块。然后你可以通过传入Bar来初始化Foo,并通过传入Foo初始化Bar。