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

Question

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

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

该页面只有一个 window / 会话，但每个页面都有 3-7 个 Knockout 组件，并且在某些情况下，同一个组件会在页面上加载多次。结果是通过 API 加载数据的组件和那些也需要相同数据的组件之间存在大量的争论。

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

从一个中央 "repository" 为多个 KO 组件存储和检索数据
用 ES2015 编写，可以与 Babel 一起工作
可作为模块加载和导出

当前代码的问题是

一个。这由 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();

并且数据在多个 Knockout 组件中可用

Answer 1

我认为您要使用的单例是主视图模型，我指的是设置 Knockout 的常用方法。使用组件的 params 从主视图模型传递您的组件需要共享的任何可观察值。

Answer 2

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

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 它。

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

ES2015 Singleton or Service Provider or Module for Knockout.js components

javascript

knockout.js

singleton

repository-pattern

babeljs