11_实现shallowReadonly和isProxy功能

一、实现shallowReadonly

（一）单元测试

// src/reactivity/tests/shallowReadonly.spec.ts

import { isReadonly, shallowReadonly } from '../reactive';

describe('shallowReadonly', () => {
  it('should not make non-reactive properties reactive', () => {
    const props = shallowReadonly({ n: { foo: 1 } });

    expect(isReadonly(props)).toBe(true);
    expect(isReadonly(props.n)).toBe(false);
  });
});

shallowReadonly，浅层只读，从单测也很容易看出来。一般的应用场景，可能就是用于项目的优化，避免将深层全部转为readonly。

（二）代码实现

// src/reactivity/reactive.ts

import { mutableHandlers, readonlyHandlers, shallowReadonlyHandlers } from './baseHandlers';

export function shallowReadonly(target) {
  return createReactiveObject(target, shallowReadonlyHandlers);
}

// src/reactivity/baseHandlers.ts

import { isObject, extend } from '../shared';

function createGetter(isReadonly = false, shallow = false) {
  return function get(target, key) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly;
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly;
    }

    const res = Reflect.get(target, key);

    // + shallow，直接返回，深层不转响应式
    if (shallow) {
      return res;
    }

    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res);
    }

    if (!isReadonly) {
      track(target, key);
    }

    return res;
  };
}

const shallowReadonlyGet = createGetter(true, true);

// + 其实可见shallowReadonly的set逻辑同readonly，所以从readonly那继承过来，然后改写get逻辑即可
export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
  get: shallowReadonlyGet
});

最基本的逻辑，这就完成了，单测一下。

（三）额外的单测

当然为了严谨一些，我们还是测试一下，浅层和深层的set操作的结果，是否是我们期望的。

it('should make root level properties readonly', () => {
  console.warn = jest.fn();

  const user = shallowReadonly({ age: 10 });

  user.age = 11;
  expect(console.warn).toBeCalled();
});

it('should NOT make nested properties readonly', () => {
  console.warn = jest.fn();

  const props = shallowReadonly({ n: { foo: 1 } });
  props.n.foo = 2;

  expect(props.n.foo).toBe(2);
  expect(console.warn).not.toBeCalled();
});

二、实现isProxy

这里贴上官网对isProxy的描述。

Checks if an object is a proxy created by reactive or readonly

（一）单元测试

我们只需要在之前的用例中补充断言即可。

// src/reactivity/tests/reactive.spec.ts

import { reactive, isReactive, isProxy } from '../reactive';

// reactive -> happy path

expect(isProxy(observed)).toBe(true);

// src/reactivity/tests/readonly.spec.ts

import { readonly, isReadonly, isProxy } from '../reactive';

// readonly -> happy path

expect(isProxy(wrapped)).toBe(true);

（二）代码实现

其实实现起来，我们只要复用之前的isReactive和isProxy即可。

// src/reactivity/reactive.ts

export function isProxy(value) {
  return isReactive(value) || isReadonly(value);
}

ps

这是一个 早起俱乐部！

⭐️ 适合人群：所有想有所改变的人，可以先从早起半小时开始！抽出30分钟，从初心开始！！ ⭐️ 没有任何其它意味，只是本人想寻找一起早起、志同道合的小伙伴。