分类 模式 下的文章

用 Map 结构来实现此功能,Test Case 如下:

const ee = new EventEmmiter();

ee.on('e1', function() {
  console.log('trigger e1');
});

ee.on({
  e1: function() {
    console.log('trigger e11');
  },
  e2: function() {
    console.log('trigger e2');
  }
});

ee.trigger('e2');
ee.trigger('e2');
ee.trigger('e2');
ee.trigger('e1');

setTimeout(_ => {
  ee.off('e1');
  ee.off('e2');
}, 1000);

下面是源码的实现:

const _events = {};

const has = name => _events[name] !== void 0;

const hasOwn = (obj, key) => ({}.hasOwnProperty.call(obj, key));

const eachObject = (obj, cb) => {
  for (let key in obj) {
    if (hasOwn(obj, key)) {
      cb(key, obj[key]);
    }
  }
};

class EventEmmiter {
  on(name, handler) {
    if (typeof name === 'string') {
      if (typeof handler !== 'function') {
        throw new Error('handle must is function.');
      }

      if (has(name)) {
        _events[name].push(handler);
      } else {
        _events[name] = [handler];
      }
    } else if (typeof name === 'object') {
      eachObject(name, (key, handle) => {
        if (has(key)) {
          _events[key].push(handle);
        } else {
          _events[key] = [handle];
        }
      });
    }

    return () => {
      if (typeof name === 'string') {
        this.off(name);
      } else if (typeof name === 'object') {
        eachObject(name, key => {
          this.off(key);
        });
      }
    };
  }

  trigger(name, args = [], context = this) {
    const handlers = _events[name];
    if (handlers && handlers.length > 0) {
      handlers.forEach(handle => handle.call(context, args));
    }
  }

  off(name) {
    _events[name] = null;
    delete _events[name];
  }
}

如果要实际使用的话可以将判断 Object 替换为 is-plain-object 这个类库。

一、前言

模式是一种规律或者说有效的方法,所以掌握某一种实践总结出来的模式是快速学习和积累的较好方法,模式的对错需要自己去把握,但是只有量的积累才会发生质的改变,多思考总是好的。(下面的代码实例更多是 React 类似的伪代码,不一定能够执行,函数类似的玩意更容易简单描述问题)

- 阅读剩余部分 -

一、前言

其实对于软件开发模式来说,Angular 有着整套的一条龙服务,而 React 只是单纯的解决 View 层的问题,如果只是使用 React 开发项目会或多或少有点麻烦。下面主要讨论下数据层的东西,之前出了一个 mobx 来解决这个问题,但是这里想换个思路套用一下。其实 mobx 主要是声明了 @action, @computed, @observable 等元素来做到将 Store 作为一个可监控的源头,自动做到 VM 的效果,下面我也是,不过我采用 Rx 来做这个事情,简单利用下这种思想,能不能不污染我的原始数据(因为如果是双向的一种数据结构,那么就会被包装成监听类型的数据结构),这样我们调试的时候依然看到的是清晰的数据,并且还可以解决最初 Flux 库的一些麻烦,经过 Rx 改造的结果,可能比 mobx 的可测试性更好一些,具体就不说了,先谈 DEMO。

如果不想看文章的可以直接看代码 GitHub

- 阅读剩余部分 -

主要讲解这几个部分:state、store、static、this、module-global data

前言

随着 React 和 Redux 的到来,一个共同的问题被问到:

我应该将数据保存在 Redux Store 中呢?还是应该保存成本地 state?

其实这个问题是说的不完整( 或者原文说的太简单 ),因为你能在组件中存储数据的方式还有两种:static 和 this.(其实就是静态数据,还是类的实例数据)

让我们来依次讨论一下,你应该在什么时候使用它们。

- 阅读剩余部分 -