自由屋推书网—热门的小说推荐平台!

你的位置: 首页 > 网页制作

实现shallowReadonly和isProxy功能示例详解

2022-12-26 09:30:42

这篇文章主要为大家介绍了实现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);

(二)代码实现

其实实现起来,我们只要复用之前的isReactiveisProxy即可。

// src/reactivity/reactive.ts
export function isProxy(value) {
  return isReactive(value) || isReadonly(value);
}

编辑推荐

热门小说