实现shallowReadonly和isProxy功能示例详解
作者:IamZJT_
这篇文章主要为大家介绍了实现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); }
以上就是实现shallowReadonly和isProxy功能示例详解的详细内容,更多关于shallowReadonly isProxy功能的资料请关注脚本之家其它相关文章!