Javascript ES2015 Singleton或Knockout.js组件的服务提供商或模块

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

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

页面只是一个窗口/会话，但每个窗口/会话都有3-7个淘汰组件，在某些情况下，相同的组件会在页面上多次加载。结果是，通过API加载数据的组件和同样需要相同数据的组件之间发生了大量的不确定

我目前的方法是使用singleton模式（其他方法也得到了很好的考虑）。唯一不可更改的要求是：

从一个中央“存储库”存储和检索多个KO组件的数据

用ES2015编写，能够与巴贝尔合作

可作为模块加载和导出

当前代码的问题是

a。babel将其设置为未定义，例如，

This.instance=null

引发无法设置未定义实例的错误。 B我不确定这是不是最好的方法，也不确定我能不能让它起作用

代码如下

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();

---

数据可以跨多个敲除组件使用

我认为您要使用的单例是主视图模型，我的意思是，这只是设置敲除的常用方法。使用组件的

参数

从主视图模型传递组件需要共享的任何观察值。

我认为您要使用的单例是主视图模型，我的意思是，这只是设置淘汰的常用方法。使用组件的

参数

从主视图模型传递组件需要共享的任何观察值。

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

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;
}

---

或者甚至懒散地初始化它，但通常您应该只导出默认值。

您不能使用arrow函数作为构造函数。您真的应该只使用一个简单的对象文字：

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;
}

---

---

或者甚至懒散地初始化它，但通常你应该只导出默认值。

（）=>{//不是一个箭头函数

-哈？忽略注释-这是我忘记整理的一些旧代码：）

（）=>{//不是箭头函数

-哈？忽略注释-我忘记整理的代码有点旧：）如果我不在多个页面上使用该代码，或者至少可以在多个页面上使用相同的主视图模型，我相信你是对的。但是如果我需要该功能（或其中的一部分）对于其他viewmodel，这使得决策更加困难。非常感谢您快速回来，我将仔细考虑：）任何需要重新使用的代码都可以制作自己的模块，应用程序的主viewmodel将导入该模块。主VM仍将处理将相关位传递给组件的问题。我选择了对象文字模式，但也勾选了您的答案，因为我可以将其用于充当SPA的每个页面。如果我不在多个页面上使用代码，或者至少可以在这些多个页面上使用相同的主视图模型，我相信您是对的。但是如果我需要该功能（或其中的一部分）对于其他viewmodel，这使得决策更加困难。非常感谢您快速回来，我将仔细考虑：）任何需要重新使用的代码都可以制作自己的模块，应用程序的主viewmodel将导入该模块。主VM仍将处理将相关位传递给组件的问题。我选择了对象文字模式，但也勾选了您的答案，因为我可以在每个充当SPA的页面上使用该模式，因为array1和array2都是公开的，所以我或团队中的任何其他人都可以使用

myServiceSingleton.array1（）而不是调用
myServiceSingleton.getArray1（）
。因此对象文本应该可以工作，但是什么是使数据私有化的好方法呢？导入myServiceSingleton对象文本可以跨KO组件工作，但是每次导入似乎都会带来它自己的新版本，而不是一个单例。我正在使用
导出{myServiceSingleton}
和
导入{myServiceSingleton}从
myServiceSingleton
。例如
myServiceSingleton.array1.subscribe`从不触发。如果发生这种情况？我是否将Babel/Browserify设置错误？如果要使数据私有化，只需使用局部变量（在模块级别）。您不能使用
this.arrayN（）
那么当然了。是的，这应该行得通，ES6模块应该每个领域只实例化一次。不过，我不知道设置有什么问题。我决定可能是
{}
关于导入和导出，但是删除它们没有什么区别。但是，我注意到调用setArray并没有生成console.info，所以我会看一看，因为KO可能对babel/browserify对象literalArray1和array2都是公开的，所以不要调用
myServiceSingleton.getArray1（）
I或团队中的任何其他人都可以使用myServiceSingleton.array1（）

。因此对象文本应该可以工作，但是什么是使数据私有化的好方法呢？导入myServiceSingleton对象文本可以跨KO组件工作，但是每次导入似乎都会带来它自己的新版本，而不是一个单例。我正在使用

导出{myServiceSingleton}

和

导入{myServiceSingleton}来自

myServiceSingleton

。例如

myServiceSingleton.array1.subscribe`从不触发。如果发生这种情况，我有Babel/Browserify s吗