effect返回runner单测实现示例详解

目录
  • 一、 runner 单测
  • 二、 核心逻辑实现

一、 runner 单测

首先介绍一下runner的功能，分以下几点:

  • effect(fn)执行会返回一个runner函数；
  • 执行runner，相当于重新执行一遍effect里面传入的fn（原始依赖）；
  • 最后runner的返回值就是fn的返回值。

至于runner的作用，可以看做是对外暴露ReactiveEffect实例的run方法。

  • 一方面是为了可以手动调用触发依赖；
  • 另一方面，也是为了和stop结合使用，来手动控制响应式的生效与失效；
    具体点就是：使用者可以手动执行runner()来控制副作用函数的生效 和 执行stop(runner)也就是runner.effect.stop()使之失效，具体stop的实现实现后面再说。

还是先来看一下单测吧，单测用例如下：

it('runner', function () {
  // effect(fn) -> return runner -> runner() == fn() -> return
  let foo = 10;
  const runner = effect(() => {
    foo++;
    return 'foo';
  });
  expect(foo).toBe(11);
  const r = runner();
  expect(foo).toBe(12);
  expect(r).toBe('foo');
});

二、 核心逻辑实现

// + 为新增加的代码。

class ReactiveEffect {
  private _fn: any;
  constructor(fn) {
    this._fn = fn;
  }
  run() {
    activeEffect = this;
    // + 返回fn的返回值
    return this._fn();
  }
}
export function effect(fn) {
  const _effect = new ReactiveEffect(fn);
  _effect.run();
  // + 涉及到run()中this指向的问题，所以需要bind处理一下。
  return _effect.run.bind(_effect);
}

具体实现较为简单，上述代码中也有相应注释，这里就不再赘述了。
再次完整跑一遍effect单测，保证新功能的增加对以往实现功能不造成影响。

单测结果如下：

以上就是effect返回runner单测实现示例详解的详细内容，更多关于effect返回runner单测的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue3中的响应式原理-effect

    目录 effect的基本实现 依赖收集 触发更新 分支切换与cleanup 停止effect 调度执行 深度代理 总结 effect的基本实现 export let activeEffect = undefined;// 当前正在执行的effect class ReactiveEffect {     active = true;     deps = []; // 收集effect中使用到的属性     parent = undefined;     constructor(public fn

  • Vue3系列之effect和ReactiveEffect track trigger源码解析

    目录 引言 一.ReactiveEffect 1. 相关的全局变量 2. class 声明 3. cleanupEffect 二.effect 函数 1. 相关ts类型 2. 函数声明 3. stop函数 三.track 依赖收集 1. track 2. createDep 3. trackEffects 4. 小结 四.trigger 1. triggerEffect 2. triggerEffects 3. trigger 五.小结 1. 依赖收集 2. 触发更新 引言 介绍几个API的时候

  • vue3调度器effect的scheduler功能实现详解

    目录 一.调度执行 二.单元测试 三.代码实现 四.回归实现 五.结语 一.调度执行 说到scheduler,也就是vue3的调度器,可能大家还不是特别明白调度器的是什么,先大概介绍一下. 可调度性是响应式系统非常重要的特性.首先我们要明确什么是可调度性.所谓可调度性,指的是当trigger 动作触发副作用函数重新执行时,有能力决定副作用函数执行的时机.次数以及方式. 有了调度函数,我们在trigger函数中触发副作用函数重新执行时,就可以直接调用用户传递的调度器函数,从而把控制权交给用户. 举

  • 一文搞懂Vue3中watchEffect侦听器的使用

    目录 watchEffect 侦听器 watchEffect 侦听器使用 watchEffect 监听基本数据 watchEffect 监听复杂数据 watchEffect 啥时候执行 关闭 watchEffect 监听 上一节我们学习了 watch 侦听器的基础用法,用来监听页面数据的变化,那么今天呢,我们来学习一下 watch 侦听器的好兄弟 watchEffect 侦听器.这个相对来说比较简单,用的不是很多,当然了,根据自己的项目情况自行决定使用.这个就不详细说了,简单过一下子. watc

  • 深入理解Vue3里的EffectScope

    Vue 3.2 版本引入了新的 Effect scope API,使用 effectScope 创建一个 effect 作用域,可以捕获其中所创建的响应式副作用 (即计算属性和侦听器),这样捕获到的副作用可以一起处理.使用 getCurrentScope 返回当前活跃的 effect 作用域.使用 onScopeDispose 在当前活跃的 effect 作用域上注册一个处理回调函数.当相关的 effect 作用域停止时会调用这个回调函数. const scope = effectScope()

  • useEffect理解React、Vue设计理念的不同

    useEffect理解React、Vue设计理念的不同

    目录 引言 Vue与React的差异 useEffect会越来越复杂 总结 引言 我们知道,React发布Hooks后,带来了业界一波Hooks热.很多框架(比如Vue Composition API.Solid.js)都借鉴了Hooks的模式. 但是,即使这些框架都借鉴了Hooks,但由于框架作者的理念不同,发展方向也逐渐不同. 比如,在Vue Composition API中,对标React useEffect API的是watchEffect,在Vue文档中,有一小段内容介绍他的用法: 而

  • effect返回runner单测实现示例详解

    目录 一. runner 单测 二. 核心逻辑实现 一. runner 单测 首先介绍一下runner的功能,分以下几点: effect(fn)执行会返回一个runner函数: 执行runner,相当于重新执行一遍effect里面传入的fn(原始依赖): 最后runner的返回值就是fn的返回值. 至于runner的作用,可以看做是对外暴露ReactiveEffect实例的run方法. 一方面是为了可以手动调用触发依赖: 另一方面,也是为了和stop结合使用,来手动控制响应式的生效与失效:具体点

  • Java之单例设计模式示例详解

    单例设计模式 保证一个类在内存中只能有一个对象. 思路: 1)如果其他程序能够随意用 new 创建该类对象,那么就无法控制个数.因此,不让其他程序用 new 创建该类的对象. 2)既然不让其他程序 new 该类对象,那么该类在自己内部就要创建一个对象,否则该类就永远无法创建对象了. 3)该类将创建的对象对外(整个系统)提供,让其他程序获取并使用. 饿汉式: 一上来我就把对象给你 new 好了,你来了直接就可以拿去"吃"了 懒汉式 (要是有人问单例的延迟加载方式指的就是这种方式) 一开始

  • JavaWeb实现表单提交的示例详解

    JavaWeb实现表单提交的示例详解

    目录 register.html RegisterServlet.java 修改web.xml,添加如下code 重新配置服务器 先点击左侧图标 再点击Redeploy,重新部署Tomcat服务器 访问表单页面 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <ht

  • python性能测试手机号验证码登录压测示例详解

    目录 引言 业务逻辑: 基本的校验规则如下: 解决方案: 测试方案: 压测脚本: 模块类方法: 引言 这两天遭遇了手机号登录相关的压测需求,算是比较棘手的.主要原因有两个,第一:之前从来没有接手过这个项目,不熟悉各种规则:第二:数据量偏大,需要开发配合协调校验规则. 业务逻辑: 请求发送验证码接口,发送成功(已绑定的手机号,且有效的用户状态)可以获取到登录的一个参数traceNo 使用traceNo.短信验证码.手机号请求登录接口 基本的校验规则如下: 手机号校验,排除一些不存在的号段,11位数

  • jQuery.Validate表单验证插件的使用示例详解

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例 示例包含 验证错误时,显示红色错误提示 自定义验证规则 引入中文错误提示 重置表单需要执行2句话 源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • MyBatis-Plus动态返回实体类示例详解

    目录 1. 自定义SqlSession 2. 自定义SqlSessionFactory 3. 自定义SqlSessionTemplate 4. 自定义基础Mapper 5. 使用 1. 自定义SqlSession @Slf4j public class GenericSqlSession extends DefaultSqlSession { private static final ThreadLocal<Class<?>> CTX = new ThreadLocal<&g

  • Gin与Mysql实现简单Restful风格API实战示例详解

    Gin与Mysql实现简单Restful风格API实战示例详解

    目录 It works main.go 编译运行 数据库 CURD 增删改查 增 查 查询列表 Query 查询单条记录 QueryRow 改 删 组织代码 封装模型方法 Handler函数 组织项目 数据库处理 数据model封装 handler 路由 分组路由 app入口 总结 我们已经了解了Golang的Gin框架.对于Webservice服务,restful风格几乎一统天下.Gin也天然的支持restful.下面就使用gin写一个简单的服务,麻雀虽小,五脏俱全.我们先以一个单文件开始,然

  • Go单元测试利器testify使用示例详解

    目录 testify assert 包 require 包 mock 包 suite 包 testify 在团队里推行单元测试的时候,有一个反对的意见是:写单元测试耗时太多.且不论这个意见对错,单元测试确实不应该太费时间.这时候,一个好的单测辅助工具,显得格外重要.本文推荐的 testify(github.com/stretchr/te…) 包,具有断言.mock 等功能,能配合标准库,使你的单元测试更加简洁易读. testify 有三个主要功能: 断言,在 assert 包和 require

  • 实现shallowReadonly和isProxy功能示例详解

    目录 一.实现shallowReadonly (一)单元测试 (二)代码实现 (三)额外的单测 二.实现isProxy (一)单元测试 (二)代码实现 一.实现shallowReadonly (一)单元测试 // src/reactivity/tests/shallowReadonly.spec.ts import { isReadonly, shallowReadonly } from '../reactive'; describe('shallowReadonly', () => { it(

  • 正则表达式使用示例详解

    正则表达式(Regular Expression)是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符"). 正则表达式使用单个字符串来描述.匹配一系列匹配某个句法规则的字符串. 下面通过实例代码介绍下正则表达式使用 //一个数据类型,记录文本规则,一些事先定义好的一些特殊字符,对字符串的过滤逻辑 //表单验证账号长度,字母或数字组合,高级搜索 //特点,不仅js有:极简的方式操作字符串:灵活,功能强大 // 正则表达式大全 var patt1=new

随机推荐