60 行代码实现一个简易MobX

作者: HuaRongSAO | 来源:发表于2019-11-04 15:59 被阅读0次

我们将实现 MobX 的的主要功能：

observable
autoRun
computed

至于 decorator(修饰器)且更多的是依赖于 ES 新的特性，在这里不过多分析

MobX 的特性

MobX: Simple, scalable state management
简单，可扩展的状态管理工具

我们先看一下 MobX 的一些特性和使用

import { observable, autorun, computed } from 'mobx'

const todoStore = observable({
  /* 一些观察的状态 */
  todos: [],

  /* 推导值 */
  get completedCount() {
    return this.todos.filter(todo => todo.completed).length
  }
})
/* 推导值 */
const finished = computed(() => {
  return todoStore.todos.filter(todo => todo.completed).length
})
/* 观察状态改变的函数 */
autorun(function() {
  console.log('Completed %d of %d items', finished, todoStore.all)
})

/* ..以及一些改变状态的动作 */
todoStore.todos[0] = {
  title: 'Take a walk',
  completed: false
}
// -> 同步打印 'Completed 0 of 1 items'

todoStore.todos[0].completed = true
// -> 同步打印 'Completed 1 of 1 items'

我们分析一下 MobX 做了什么：

1.封装 observable 对象：监听对象的属性和值的变化，这个过程一般是通过Object.defineProperty和 getter，setter 进行拦截。或者Proxy进行拦截。如果是学习过 vue，那 vue2.0 采用的就是前者，而最新的 vue3.0（vue-next）采用的后者 Proxy。
2.依赖收集：使用 autoRun 进行依赖收集，这是一个什么样的过程呢？比如a = {collect: 1, noCollect: 2},当我对 a 的 collect 进行依赖收集autoRun(()=>console.log(a.collect)),当a.collect++，就会立即输出 2，但是当我对a.noCollect++,由于 noCollect 未进行依赖收集，因此不会执行运行输出。
3.自动计算 computed：即自动执行代码const finished = computed(() => (todoStore.todos.filter(todo => todo.completed).length)),当 todos 发生变化的时候自动更新finished这个变量的值。

原理探究

说了那么多，除了第一个可能有稍微听过，其他的感觉是不是都挺陌生，其实原理相对简单。整个大程序的实现可以分成三个大部分。

观察者模式（dep)
拦截器(Proxy)
对象原始值(Symbol.toPrimitive)

什么是观察者模式（EventBus）

一对多关系时，使用观察者模式（Observer Pattern）。只要当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新，解决了主体对象与观察者之间功能的耦合，即一个对象状态改变给其他对象通知的问题。

event-proxy.png

一个简单的观察者模式

const dep = {
  event: {},
  on(key, fn) {
    this.event[key] = this.event[key] || []
    this.event[key].push(fn)
  },
  emit(key, args) {
    if (!this.event[key]) return
    this.event[key].forEach(fn => fn(args))
  }
}

dep.on('print', args => console.log(args))
dep.emit('print', 'hello world')
// output: hello world

仔细对比

// 观察者模式
dep.on('print', args => console.log(args))
dep.emit('print', 'hello world')
// MobX
autorun(() => console.log(todoStore.todos.length'))
todoStore.todos[0] = {
  title: 'Take a walk',
  completed: false
}

是不是非常的相识，只是一个显式触发，一个隐式触发。
那如何进行隐式触发？

1.拦截器(Proxy)

其实除了 Proxy 我们还有一种选择Object.defineProperty,我们先看一下 Object.defineProperty 的实现方式。

const px = {}
let val = ''
Object.defineProperty(px, 'proxy', {
  get() {
    console.log('get', val)
    // dep.on('proxy', fn)
    return val
  },
  set(args) {
    console.log('set', args)
    // dep.emit('proxy')
    val = args
  }
})
px.proxy = 1
// output set 1
console.log(px.proxy)
// output get 1
// output 1

没错注册和触发的方式通过，get set的方式进行隐式的注册和触发。
但是Object.defineProperty存在着一些缺陷。

对数组支持不友好
封装相对复杂

Proxy

我们将上面的代码改写成 Proxy 的方式，注册和触发的位置还是用于get set

const printFn = () => console.log('emit print key')
const handler = {
  set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver)
    // dep.emit(key, target) 触发事件
    if (key === 'key') dep.emit('key')
    return result
  },
  get(target, key, value, receiver) {
    if (key === 'key') {
      //注册事件
      dep.on(key, printFn)
    }
    return Reflect.get(target, key, value, receiver)
  }
}
// 递归封装Proxy
const observable = obj => {
  Object.entries(obj).forEach(([key, value]) => {
    if (typeof value !== 'object' || value === null) return
    obj[key] = observable(value)
  })
  return new Proxy(obj, handler)
}

const obj = observable({})
obj.key // 运行get方法注册  printFn
obj.key = 'print' // 运行set触发事件  执行 printFn
// output 'emit print key'

这时候我们就完成了自动响应运行。
这时候我们 autoRun 就该上场了。

2.依赖收集

会看上面的代码，注册的方法（printFn）是直接写死的，但是实际场景，我们需要有一个注册器，就像 autoRun。

const printFn = () => console.log('emit print key')
// 非常简单
const autoRun = (key, fn) => {
  dep.on(key, fn)
}
// 简单修改一下我们的代理器
const handler = {
  set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver)
    dep.emit(key)
    return result
  },
  get(target, key, value, receiver) {
    return Reflect.get(target, key, value, receiver)
  }
}
// 递归封装Proxy
const observable = obj => {
  Object.entries(obj).forEach(([key, value]) => {
    if (typeof value !== 'object' || value === null) return
    obj[key] = observable(value)
  })
  return new Proxy(obj, handler)
}
const obj = observable({})
autoRun('key', printFn)
obj.key = 'print' // 运行set触发事件 autoRun  执行 printFn
// output emit print key

这时候你可能就会问，这边注册的方式还是通过key来完成的啊，说好的依赖收集呢？说好的自动注册呢？

当我们运行一段代码时，我们是如何得知这段代码里面用了什么变量？用了几次变量？怎么将方法和和变量进行关联？
比如：想一想如何将ob.name和 autoRun 的方法进行关联

const ob = observable({})
autoRun(() => {
  console.log(`print ${ob.name}`)
})
ob.name = 'hello world'
// print hello world

依赖收集原理： <strong> 通过全局变量和运行 </strong>（敲黑板）
我们将上面的代码改一改。

// 全局唯一的 id
let obId = 0
const dep = {
  event: {},
  on(key, fn) {
    if (!this.event[key]) {
      this.event[key] = new Set()
    }
    this.event[key].add(fn)
  },
  emit(key, args) {
    const fns = new WeakSet()
    const events = this.event[key]
    if (!events) return
    events.forEach(fn => {
      if (fns.has(fn)) return
      fns.add(fn)
      fn(args)
    })
  }
}

// 全局变量
let pendingDerivation = null

// 依赖收集
const autoRun = fn => {
  pendingDerivation = fn
  fn()
  pendingDerivation = null
}

const handler = {
  set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver)
    dep.emit(`${target.__obId}${key}`)
    return result
  },
  get(target, key, value, receiver) {
    if (target && key && pendingDerivation) {
      dep.on(`${target.__obId}${key}`, pendingDerivation)
    }
    return Reflect.get(target, key, value, receiver)
  }
}

const observable = obj => {
  obj.__obId = `$$obj${++obId}__`
  Object.entries(obj).forEach(([key, value]) => {
    if (typeof value !== 'object' || value === null) return
    obj[key] = observable(value)
  })
  return new Proxy(obj, handler)
}

纵观上面的代码，其实关键的修改大概就两处：

// 全局变量
let pendingDerivation = null
// 收集依赖  step 1
const autoRun = fn => {
  pendingDerivation = fn
  fn()
  pendingDerivation = null
}
// 收集依赖  step 2
const handler = {
  get(target, key, value, receiver) {
    if (target && key && pendingDerivation) {
      dep.on(`${target.__obId}${key}`, pendingDerivation)
    }
    return Reflect.get(target, key, value, receiver)
  }
}

原理：
<strong>就是通过全局变量和立即执行一次，进行变量的确认和观察者模式里的事件注册</strong>
我们回顾一下 MobX 的描述：

当使用 autorun 时，所提供的函数总是立即被触发一次，然后每次它的依赖关系改变时会再次被触发。 --MobX

在执行 autoRun 的 fn 的时候，就会触发到 Proxy 里的各个属性的 get 方法，这时候通过全局的变量将属性和方法进行映射。

computed：对象原始值(Symbol.toPrimitive)

其实 MobX 关于 computed 的实现还是通过事件来触发的，但是在阅读源码的时候，突发奇想，是不是也可以通过Symbol.toPrimitive来实现。

const computed = fn => {
  return {
    _computed: fn,
    [Symbol.toPrimitive]() {
      return this._computed()
    }
  }
}

代码很简单，通过 computed 封装一个方法，然后直接返回一个对象，这个对象通过复写Symbol.toPrimitive,实现方法的缓存，然后在 get 的时候进行运行。

完整代码

代码只是对主要逻辑进行梳理，缺乏代码细节

let obId = 0
let pendingDerivation = null

const dep = {
  event: {},
  on(key, fn) {
    if (!this.event[key]) {
      this.event[key] = new Set()
    }
    this.event[key].add(fn)
  },
  emit(key, args) {
    const fns = new WeakSet()
    const events = this.event[key]
    if (!events) return
    events.forEach(fn => {
      if (fns.has(fn)) return
      fns.add(fn)
      fn(args)
    })
  }
}

const autoRun = fn => {
  pendingDerivation = fn
  fn()
  pendingDerivation = null
}

const handler = {
  set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver)
    dep.emit(target.__obId + key)
    return result
  },
  get(target, key, value, receiver) {
    if (target && key && pendingDerivation) {
      dep.on(target.__obId + key, pendingDerivation)
    }
    return Reflect.get(target, key, value, receiver)
  }
}

const observable = obj => {
  obj.__obId = `__obId${++obId}__`
  Object.entries(obj).forEach(([key, value]) => {
    if (typeof value !== 'object' || value === null) return
    obj[key] = observable(value)
  })
  return new Proxy(obj, handler)
}

const computed = fn => {
  return {
    computed: fn,
    [Symbol.toPrimitive]() {
      return this.computed()
    }
  }
}

// demo
const todoObs = observable({
  todo: [],
  get all() {
    return this.todo.length
  }
})

const compuFinish = computed(() => {
  return todoObs.todo.filter(t => t.finished).length
})

const print = () => {
  const all = todoObs.all
  console.log(`print: finish ${compuFinish}/${all}`)
}

autoRun(print)

todoObs.todo.push({
  finished: false
})

todoObs.todo.push({
  finished: true
})

// print: finish 0/0
// print: finish 0/1
// print: finish 1/2

以上代码去除 demo，仅仅 60 行代码。
在回顾一下流程图。

processon.png

60 行代码实现一个简易MobX

MobX 的特性

原理探究

什么是观察者模式（EventBus）

1.拦截器(Proxy)

Proxy

2.依赖收集

computed：对象原始值(Symbol.toPrimitive)

完整代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞

Web前端之路

Web 前端开发