构建简易store

• 需求

  • 通过闭包实现一个简易的store，实现功能如下：
    • 1. store只能被创建一次，多次创建返回同一个实例
    • 2. store实例有一个listeners数组，用于存储监听函数
    • 3. store实例有一个addChangeListener方法，用于添加监听函数
    • 4. store实例有一个setState方法，用于更新store数据，并触发监听函数

• 思路

  • 1. 通过闭包实现单例模式，保证store只能被创建一次
  • 2. 通过Object.create创建store实例，实例上有listeners数组，用于存储监听函数

• 代码示例

export const _createStore = (function () {
  let instance;

  return function (init) {
    if (instance) {
      return instance;
    } else {
      instance = Object.create({
        listeners: [],
        addChangeListener(fn) {
          this.listeners.push(fn);
        },
        setState(newState) {
          let flag = false;
          Object.keys(newState).forEach(key => {
            if (Object.hasOwn(this, key)) {
              if (this[key] !== newState[key]) {
                this[key] = newState[key];
                flag = true;
              }
            }
          })
          if (flag) {
            this.listeners.forEach(fn => fn(newState));
          }
        }
      });
      return Object.assign(instance, init);
    }
  }
})();

const store = _createStore({count: 0});
store.addChangeListener(function (data) {
  console.log(data, 123)
})
store.addChangeListener(function (data) {
  console.log(data, 222)
})
store.setState({
  count: 1,
  listeners: []
})

const store2 = _createStore({count: 2})

console.log(store)
console.log(store2)