将 Singleton JS 对象转换为使用 ES6 类

Question

我在这里的文章中使用 ES6 和 Webpack es6-transpiler：http://www.railsonmaui.com/blog/2014/10/02/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/

将两个 Singleton 对象转换为使用 ES6 类是否有意义？

import { CHANGE_EVENT } from "../constants/Constants";

var EventEmitter = require('events').EventEmitter;
var merge = require('react/lib/merge');

var _flash = null;

var BaseStore = merge(EventEmitter.prototype, {

  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },

  /**
   * @param {function} callback
   */
  addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },

  /**
   * @param {function} callback
   */
  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  },

  getFlash: function() {
    return _flash;
  },

  setFlash: function(flash) {
    _flash = flash;
  }
});

export { BaseStore };

这是文件 ManagerProducts.jsx，它有一个应该从 BaseStore 扩展的单例。

/**
 * Client side store of the manager_product resource
 */
import { BaseStore } from "./BaseStore";
import { AppDispatcher } from '../dispatcher/AppDispatcher';
import { ActionTypes } from '../constants/Constants';
import { WebAPIUtils } from '../utils/WebAPIUtils';
import { Util } from "../utils/Util";
var merge = require('react/lib/merge');

var _managerProducts = [];

var receiveAllDataError = function(action) {
  console.log("receiveAllDataError %j", action);
  WebAPIUtils.logAjaxError(action.xhr, action.status, action.err);
};

var ManagerProductStore = merge(BaseStore, {
  getAll: function() {
    return _managerProducts;
  }
});

var receiveAllDataSuccess = function(action) {
  _managerProducts = action.data.managerProducts;
  //ManagerProductStore.setFlash({ message: "Manager Product data loaded"});
};


ManagerProductStore.dispatchToken = AppDispatcher.register(function(payload) {
  var action = payload.action;
  if (Util.blank(action.type)) { throw `Invalid action, payload ${JSON.stringify(payload)}`; }

  switch(action.type) {
    case ActionTypes.RECEIVE_ALL_DATA_SUCCESS:
      receiveAllDataSuccess(action);
      break;
    case ActionTypes.RECEIVE_ALL_DATA_ERROR:
      receiveAllDataError(action);
      break;
    default:
      return true;
  }
  ManagerProductStore.emitChange();
  return true;
});

export { ManagerProductStore };

Answer 1

没有。没有意义。

这是一个非常简单的 es6 中的单例对象示例：

let appState = {};
export default appState;

如果你真的想在你的单例方法中使用一个类，我建议不要使用“静态”，因为它至少对于 JS 来说对于单例来说比好的更令人困惑，而是像这样将类的实例作为单例返回...

class SomeClassUsedOnlyAsASingleton {
  // implementation
}

export default new SomeClassUsedOnlyAsASingleton();

这样你仍然可以使用 JavaScript 提供的所有你喜欢的类的东西，但它会减少混乱，因为 JavaScript 类并不完全支持 IMO 静态，因为它只在 c# 或 Java 等类型化语言中支持静态方法，除非您只是伪造它并将它们直接附加到一个类（在撰写本文时）。

Answer 2

我认为单例（管理自己的单例生命周期的类）在任何语言中都是不必要的。这并不是说单例生命周期没有用，只是我更喜欢类以外的东西来管理对象的生命周期，比如 DI 容器。

话虽如此，单例模式可以应用于 JavaScript 类，借用 ActionScript 中使用的“SingletonEnforcer”模式。在将使用单例的现有代码库移植到 ES6 时，我可以看到想要做这样的事情。

在这种情况下，我们的想法是创建一个私有（通过未公开的符号）静态 singleton 实例，并使用公共静态 instance getter。然后，您将构造函数限制为可以访问未在模块外部公开的特殊 singletonEnforcer 符号的东西。这样，如果除了单例之外的任何人试图“新建”它，构造函数就会失败。它看起来像这样：

const singleton = Symbol();
const singletonEnforcer = Symbol()

class SingletonTest {

  constructor(enforcer) {
    if(enforcer != singletonEnforcer) throw "Cannot construct singleton";
  }

  static get instance() {
    if(!this[singleton]) {
      this[singleton] = new SingletonTest(singletonEnforcer);
    }
    return this[singleton];
  }
}

export default SingletonTest

然后你可以像使用任何其他单例一样使用它：

import SingletonTest from 'singleton-test';
const instance = SingletonTest.instance;

Answer 3

我也必须这样做，所以这里有一个简单直接的方法来做单例， 向singleton-classes-in-es6行屈膝礼

（原链接http://amanvirk.me/singleton-classes-in-es6/）

let instance = null;

class Cache{  
    constructor() {
        if(!instance){
              instance = this;
        }

        // to test whether we have singleton or not
        this.time = new Date()

        return instance;
      }
}


let cache = new Cache()
console.log(cache.time);

setTimeout(function(){
  let cache = new Cache();
  console.log(cache.time);
},4000);

两个console.log 调用应该打印相同的cache.time（单例）

Answer 4

为了创建单例模式使用带有 ES6 类的单个实例；

'use strict';

import EventEmitter from 'events';

class Single extends EventEmitter {
    constructor() {
        this.state = {};
    }

    getState() {
        return this.state;
    }

}

export default let single = new Single();

更新：根据@Bergi 的解释，以下一个不是有效的参数。

这是因为（参考Steven）

> 如果我正确理解 CommonJS + 浏览器实现， > 模块的输出被缓存，因此 export default new MyClass() 将 > 导致某些行为表现为单例（只有一个 > 此类的实例将永远存在于每个进程/客户端，具体取决于 > env 它正在运行）。

你可以在这里找到一个例子ES6 Singleton。

注意：此模式在 Flux Dispacher 中使用

通量：www.npmjs.com/package/flux

调度程序示例：github.com/facebook/flux/blob/master/examples/flux-todomvc/js/dispatcher/AppDispatcher.js#L16

Answer 5

单例类

class SingletonClass {
    constructor( name = "", age = 0 ) {
        if ( !this.constructor.instance ) {

            this.constructor.instance = this;
            this.name = name;
            this.age = age;

        }

        return this.constructor.instance;
    }

    getName() {
        return this.name;
    }

    getAge() {
        return this.age;
    }
}
    
const instanceOne = new SingletonClass( "One", 25 );
const instanceTwo = new SingletonClass( "Two", 44 );

console.log( `Name of instanceOne is "${instanceOne.getName()}"` );
console.log( `Name of instanceTwo is "${instanceTwo.getName()}"` );