ES2015单例或Knockout.js组件的服务提供者或模块

Question

我有大量的敲除组件，它们目前正在使用KO.postbox进行通信。

现在，我希望创建一个中央服务提供者/存储库/单例，它集中存储所有这些组件的数据，并提供初始化、api和其他功能。

页面只是一个窗口/会话，但是每个窗口/会话都有3-7个剔除组件，在某些情况下，同一个组件被多次加载在页面上。结果是，通过API加载数据的组件与也需要相同数据的组件之间存在大量的聊天。

我目前的方法是使用单例模式(其他方法被愉快地考虑了)。唯一不可改变的要求是：

1. 为多个KO组件从一个中央“存储库”存储和检索数据
2. 用ES2015编写，能够与Babel一起工作
3. 可加载和可导出的模块

当前代码的问题是

这是由babel设置为未定义的，例如this.instance = null会引发一个错误，即不能设置未定义的实例。我不太确定这是最好的方法，也不是我能做到的。

代码如下

const ko = require('knockout')
    , moment = require('moment')
    , postbox = require('knockout-postbox')
    , aja = require('aja');


const myServiceSingleton = () =>{ 

    this.instance = null;
    this.array1 = ko.observable([]);
    this.array2 = ko.observable([]);

    // revealing module pattern that handles initialization of our new singleton service provider
    const initializeNewModule = () => {

        const setArray1 = (array) => {
            console.info( 'Set Array1 Called' );
            this.array1(array);
        };

        const getArray1 = () => {
            console.info( 'Get Array1 Called' );
            return this.array1();
        };

        const setArray2 = (array) => {
            console.info( 'Set Array2 Called' );
            this.array2(array);
        };

        const getArray2 = () => {
            console.info( 'Get Array2 Called' );
            return this.array2();
        };

        const myAwesomeFunction = () => {
            // Perform some amazing computations on Array1 and Array 2
        };

        return {
            setArray1 : setArray1,
            getArray1 : getArray1,
            setArray2 : setArray2,
            getArray2 : getArray2,
            myAwesomeFunction : myAwesomeFunction
        };
    };

    // handles the prevention of additional instantiations
    const getInstance = () => {
        if( ! this.instance ) {
            this.instance = new initializeNewModule();
        }
        return this.instance;
    };

    return {
        getInstance : getInstance
    };

};
module.exports = myServiceSingleton;

-编辑

希望这能帮助别人..。

const ko = require('knockout')
    , moment = require('moment')
    , postbox = require('knockout-postbox')
    , aja = require('aja');

const array1 = ko.observable([]);
const array2 = ko.observable([]);
const secretFlag = ko.observable(false);

const myAmazingSingleton = {

    setArray1(newArray) {
        console.info( newArray);
        array1(newArray);
    },

    getArray1() {
        console.info( 'Get Array1 Called' );
        return array1();
    },

    getArray2() {
        return array2();
    },

    setArray2(newArray) {
        console.info('Set Array2 Called');
        array2(newArray);
    },

    getArray1Observable() {
        return array1 ;
    },

    myAwesomeFunction() {
        // Perform some amazing computations on Array1 and Array 2
        array1.map //etc etc
    }
};

export default myAmazingSingleton ;

使用非常简单：

import ArrayFunctions from 'myAmazingSingleton';
let array1 = ArrayFunctions.getArray1();

这些数据可以跨多个淘汰机组件获得。

Answer 1

不能使用箭头函数作为构造函数。您确实应该使用一个简单的对象文字：

const myServiceSingleton = {
    array1: ko.observable([]),
    array2: ko.observable([]),
    setArray1(array) {
        console.info( 'Set Array1 Called' );
        this.array1(array);
    },
    getArray1() {
        console.info( 'Get Array1 Called' );
        return this.array1();
    },
    setArray2(array) {
        console.info( 'Set Array2 Called' );
        this.array2(array);
    },
    getArray2() {
        console.info( 'Get Array2 Called' );
        return this.array2();
    },
    myAwesomeFunction() {
        // Perform some amazing computations on Array1 and Array 2
    }
};

如果你坚持，你可以做一个

export function getInstance() {
    return myServiceSingleton;
}

甚至是懒惰-初始化它，但通常你应该只是export default它。

Answer 2

我认为您想要使用的单个对象是一个主视图模型，我指的是通常设置Knockout的方法。使用组件的params从主视图模型传递组件需要共享的任何可观测结果。