转换辛格尔顿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/

这有什么意义转换2单一对象使用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

我认为单身人士（管理他们自己的单身人士生命的班级）在任何语言中都是不必要的。这并不是说singleton的生命周期没有用处，只是我更喜欢除了班级以外的其他东西来管理对象的生命周期，例如DI容器。

也就是说，singleton模式可以应用于JavaScript类，借用ActionScript中使用的“SingletonEnforcer”模式。在将现有的使用单例的代码移植到ES6中时，我可以看到想要做类似这样的事情。

在这种情况下，您的想法是您可以通过一个公共静态instance getter来创建一个私有（通过一个未公开的Symbol）的静态singleton实例。然后，将构造函数限制为可以访问不在模块外部暴露的特殊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 2

号是没有意义的。

这里有一个单一对象的ES6一个非常简单的例子：

let appState = {}; 
export default appState; 

如果你真的想在你的单身的方法来使用一个类，我会建议不要使用“静态”，因为它多好困惑对于一个单身至少JS，而是返回类像这样一个单独的实例...

class SomeClassUsedOnlyAsASingleton { 
    // implementation 
} 

export default new SomeClassUsedOnlyAsASingleton(); 

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

Answer 3

为了创建Singleton模式使用带有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的+浏览器实现中， >模块的输出缓存，所以出口默认新MyClass的（）将 >导致某行为表现为单例行为（根据运行的环境，只有一个 >这个类的实例将永远存在于每个进程/客户端）。

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

注：该图案在助焊剂Dispacher

助焊剂使用：www.npmjs.com/package/flux

Dispacher例：github.com/facebook/flux/ blob/master/examples/flux-todomvc/js/dispatcher/AppDispatcher.js＃L16

Answer 4

我必须这样做，所以这里是一个简单而直接的做单身的方法， 屈膝礼来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（辛格尔顿）