实现shallowReadonly和isProxy功能示例详解
短信预约 -IT技能 免费直播动态提醒
一、实现shallowReadonly
（一）单元测试
// class="lazy" data-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。
（二）代码实现
// class="lazy" data-src/reactivity/reactive.ts
import { mutableHandlers, readonlyHandlers, shallowReadonlyHandlers } from './baseHandlers';
export function shallowReadonly(target) {
return createReactiveObject(target, shallowReadonlyHandlers);
}
// class="lazy" data-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
（一）单元测试
我们只需要在之前的用例中补充断言即可。
// class="lazy" data-src/reactivity/tests/reactive.spec.ts
import { reactive, isReactive, isProxy } from '../reactive';
// reactive -> happy path
expect(isProxy(observed)).toBe(true);
// class="lazy" data-src/reactivity/tests/readonly.spec.ts
import { readonly, isReadonly, isProxy } from '../reactive';
// readonly -> happy path
expect(isProxy(wrapped)).toBe(true);
（二）代码实现
其实实现起来，我们只要复用之前的isReactive和isProxy即可。
// class="lazy" data-src/reactivity/reactive.ts
export function isProxy(value) {
return isReactive(value) || isReadonly(value);
}
以上就是实现shallowReadonly和isProxy功能示例详解的详细内容，更多关于shallowReadonly isProxy功能的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
