函数实现单例模式

单例模式

一般在前端实现单例模式，大多数都会使用类去实现，因为类的实现，看起来比较简单，下面是一个简单的例子。

class Foo {
static instance;
static init() {
if (!this.instance) this.instance = new Foo();
return this.instance;

  }
constructor() {}

}

// 将单例实例化 并暴露出去
export default Foo.init()

如此，我们就实现了简单的单例模式，并且在其他文件引入的时候已经是实例化过一次的了，或者交由用户者自行调用 init 也是可以的

函数实现

而在函数的实现上，其实本身类就是函数的某种抽象，如果去掉这个 new 的话，单纯用函数又是怎么做的呢？

let ipcMainInstance;
export default () => {
const init = () => {
return {
name: "phy",
hobby: "play games"

    };

  };

return () => {
if (!ipcMainInstance) {

      ipcMainInstance = init();

    }
return ipcMainInstance;

  };

};

使用

const ipcInit = createIpc();
ipcInit();

因为我们使用的是二阶函数进行 init，所以写法上是二次调用才是 init，每个人的设计写法不一样。

然而这种写法上，每次都要写一个 init 方法进行单例实例化的包裹，这明显是一个重复工作，我们是否可以将 init 方法独立成一个函子，让他帮我们自动将我们传进去的函数进行处理，返回来的就是一个单例模式的函数呢？

抽象单例模式函子

// 非void返回值
type NonVoidReturn<T extends (...args: any) => any> = T extends (

  ...args: any

) => infer R

  ? R extends void

    ? never

    : T

  : any;

/**

 * 创建单例模式的函子

 * @param {function} fn

 * @returns {any} fn调用的返回值 必须得有return 可推断

 */
const createSgp = <T extends (...args: any) => any>(fn: NonVoidReturn<T>) => {
let _instance: undefined | ReturnType<T>;

return () => {
if (!_instance) {

      _instance = fn();

    }
return _instance;

  };

};

export default createSgp;

使用上

import createSgp from "./createSgp";

const useAuto = () => {
let count = 0;

const setCount = (num: number) => {

    count = num;

  };

const getCount = () => count

return {

    getCount,

    setCount

  };

};

// 将其处理成单例模式 并且暴露出去
export default createSgp(useAuto);

如此我们就完成了单例模式的包裹处理，并且是一个单例模式的函数。

对于hooks使用单例模式函数的问题

其实上面的操作看起来很酷，实际上很少会用到，因为你得考虑到，我用单例模式的意义是什么，如果这个函数只需要调用一次，那么就有必要用单例模式，但是hooks一般用到的时候，都属于操作性逻辑，尽量不应在hooks里面去做hooks初始化时有函数自执行调用，这个调用应该交由用户去做，我是这么理解hooks的，而这也就导致，hooks不应该用单例了，而且hooks用单例会有bug，请看下面的代码：

  let count = 0;
const useCount = {

    count,
add(num){

      count += num

    }

  }

这里我就一次简化useCount的return出来的东西，那么我们思考下，如果说，这个add在外部调用了，那么这个count会变吗？答案是不会，为什么呢？

因为当前add操作的count，是外部的count，并不是return对象的count，这句话可能很绕，但是仔细思考，一开始useCount()，他return的count是长什么样，此时，他其实就是数字0，那么，add改的count真的是这个return对象的count吗？相信说到这里，你就懂为什么了。

那我如果真的要联动到这个count，怎么做呢？

  const useCount = {
count: 0,
add(num){
this.count += num

    }

  }

答案是，用到this，此时这个add操作的count就是此时return 对象的count了，而这也跟类一个原理了，因为类更改的成员属性，都是实例对象本身的，而不是外部的，所以，他能更新上。这个问题，也是后面我发现的，所以以此记录一下。