分析 vant4 源码，学会用 vue3 + ts 开发毫秒级渲染的倒计时组件，真是妙啊-六虎

本文为稀土技能社区首发签约文章，14天内制止转载，14天后未获授权制止转载，侵权必究！

1. 前言

我们好，我是若川。我倾力继续组织了一年每周我们一同学习200行左右的源码共读活动，感兴趣的能够点此扫码加我微信 ruochuan12 参加。别的，想学源码，极力引荐重视我写的专栏《学习源码整体架构系列》，现在是重视人数（4.1k+人）榜首的专栏，写有20余篇源码文章。

咱们开发事务时经常会运用到组件库，一般来说，许多时候咱们不需要关怀内部完成。可是假如期望学习和深究里边的原理，这时咱们能够剖析自己运用的组件库完成。有哪些高雅完成、最佳实践、前沿技能等都能够值得咱们学习。

比较于原生 JS 等源码。咱们或许更应该学习，正在运用的组件库的源码，因为有助于协助咱们写事务和写自己的组件。

假如是 Vue 技能栈，开发移动端的项目，大多会选用 vant 组件库，现在（2022-11-20）star 多达 20.5k，最新版本是 v4.0.0-rc7。咱们能够选择 vant 组件库学习，我会写一个组件库源码系列专栏，欢迎我们重视。

vant 4 行将正式发布，支撑暗黑主题，那么是怎么完成的呢
跟着 vant4 源码学习怎么用 vue3+ts 开发一个 loading 组件，仅88行代码
剖析 vant4 源码，怎么用 vue3 + ts 开发一个瀑布流翻滚加载的列表组件？

这次咱们来学习倒计时组件，countdown。

学完本文，你将学到：

1. 怎么开发一个更高雅的毫秒级烘托的倒计时组件
2. 学会运用 requestAnimationFrame
3. 等等

2. 准备工作

看一个开源项目，咱们能够先看 README.md 再看 github/CONTRIBUTING.md

2.1 克隆源码

You will need Node.js >= 14 and pnpm.

# 引荐克隆我的项目
git clone https://github.com/lxchuan12/vant-analysis
cd vant-analysis/vant
# 或许克隆官方仓库
git clone git@github.com:vant-ui/vant.git
cd vant
# 装置依赖，假如没装置 pnpm，能够用 npm i pnpm -g 装置，或许检查官网经过其他方式装置
pnpm i
# 启动服务
pnpm dev

履行 pnpm dev 后，这时咱们打开倒计时组件 http://localhost:5173/#/zh-CN/count-down。

3. 倒计时组件可谓是十分常用

在各种电商类或许其他的移动端页面中，倒计时真的是太常见了。咱们自己也根本能够快速的写一个倒计时组件。代码完成参阅这儿，首要是 JavaScript。

代码中，我直接运用的 setInterval 和每秒钟履行一次。把倒计时的时候减去1s，当倒计时毫秒数不足时用 clearInterval 清除中止定时器。

但假如要完成毫秒级的倒计时这种办法行不通。别的 setInterval 这种做法，并不是最优的。那么，vant 倒计时组件中，是怎么处理毫秒级和完成倒计时呢。

带着问题咱们直接找到 countdown demo 文件：vant/packages/vant/src/count-down/demo/index.vue。为什么是这个文件，我在之前文章跟着 vant4 源码学习怎么用 vue3+ts 开发一个 loading 组件，仅88行代码剖析了其原理，感兴趣的小伙伴点击检查。这儿就不赘述了。

4. 运用 demo 调试源码

组件源码中的 TS 代码我不会过多解说。没学过 TS 的小伙伴，引荐学这个TypeScript 入门教程。别的，vant 运用了 @vue/babel-plugin-jsx 插件来支撑 JSX、TSX。

剖析 vant4 源码，学会用 vue3 + ts 开发毫秒级烘托的倒计时组件，真是妙啊

// vant/packages/vant/src/count-down/demo/index.vue
<script setup lang="ts">
import VanGrid from '../../grid';
import VanGridItem from '../../grid-item';
import VanCountDown, { type CountDownInstance } from '..';
import { ref } from 'vue';
import { useTranslate } from '../../../docs/site';
import { showToast } from '../../toast';
const t = useTranslate({
  'zh-CN': {
    reset: '重置',
    pause: '暂停',
    start: '开端',
    finished: '倒计时完毕',
    millisecond: '毫秒级烘托',
    customStyle: '自定义款式',
    customFormat: '自定义格局',
    manualControl: '手动操控',
    formatWithDay: 'DD 天 HH 时 mm 分 ss 秒',
  },
});
const time = ref(30 * 60 * 60 * 1000);
const countDown = ref<CountDownInstance>();
// 开端
const start = () => {
  countDown.value?.start();
};
// 暂停
const pause = () => {
  countDown.value?.pause();
};
// 重置
const reset = () => {
  countDown.value?.reset();
};
const onFinish = () => showToast(t('finished'));
</script>
<template>
  <!-- 根本运用 -->
  <demo-block :title="t('basicUsage')">
    <van-count-down :time="time" />
  </demo-block>
  <!-- 自定义烘托 -->
  <demo-block :title="t('customFormat')">
    <van-count-down :time="time" :format="t('formatWithDay')" />
  </demo-block>
  <!-- 毫秒级烘托 -->
  <demo-block :title="t('millisecond')">
    <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
  </demo-block>
  <!-- 自定义款式-->
  <demo-block :title="t('customStyle')">
    <van-count-down :time="time">
      <template #default="currentTime">
        <span class="block">{{ currentTime.hours }}</span>
        <span class="colon">:</span>
        <span class="block">{{ currentTime.minutes }}</span>
        <span class="colon">:</span>
        <span class="block">{{ currentTime.seconds }}</span>
      </template>
    </van-count-down>
  </demo-block>
  <!-- 手动操控 -->
  <demo-block :title="t('manualControl')">
    <van-count-down
      ref="countDown"
      millisecond
      :time="3000"
      :auto-start="false"
      format="ss:SSS"
      @finish="onFinish"
    />
    <van-grid clickable :column-num="3">
      <van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
      <van-grid-item icon="pause-circle-o" :text="t('pause')" @click="pause" />
      <van-grid-item icon="replay" :text="t('reset')" @click="reset" />
    </van-grid>
  </demo-block>
</template>

从 demo 文件中，咱们能够看出 import VanCountDown, { type CountDownInstance } from '..';，引入自 vant/packages/vant/src/count-down/index.ts。咱们继续来看进口 index.ts。

5. 进口 index.ts

首要便是导出一下类型和变量等。

// vant/packages/vant/src/count-down/index.ts
import { withInstall } from '../utils';
import _CountDown from './CountDown';
export const CountDown = withInstall(_CountDown);
// 默许导出
// import xxx from 'vant'
export default CountDown;
export { countDownProps } from './CountDown';
export type { CountDownProps } from './CountDown';
export type {
  CountDownInstance,
  CountDownThemeVars,
  CountDownCurrentTime,
} from './types';
declare module 'vue' {
  export interface GlobalComponents {
    VanCountDown: typeof CountDown;
  }
}

withInstall 函数在之前文章5.1 withInstall 给组件目标添加 install 办法也有剖析，这儿就不赘述了。

咱们能够在这些文件，任意位置加上 debugger 调试源码。

截两张调企图。

调试 Countdown setup。

调试 useCountDown。

咱们跟着调试，继续剖析 Countdown。

6. 主文件 Countdown

// vant/packages/vant/src/count-down/CountDown.tsx
import { watch, computed, defineComponent, type ExtractPropTypes } from 'vue';
// Utils
import {
  truthProp,
  makeStringProp,
  makeNumericProp,
  createNamespace,
} from '../utils';
import { parseFormat } from './utils';
// Composables
import { useCountDown } from '@vant/use';
import { useExpose } from '../composables/use-expose';
const [name, bem] = createNamespace('count-down');
export const countDownProps = {
  time: makeNumericProp(0),
  format: makeStringProp('HH:mm:ss'),
  autoStart: truthProp,
  millisecond: Boolean,
};
export type CountDownProps = ExtractPropTypes<typeof countDownProps>;
export default defineComponent({
  name,
  props: countDownProps,
  emits: ['change', 'finish'],
  setup(props, { emit, slots }) {
    // 代码省掉，下文叙说
  },
});

6.1 setup 部分

这一部分首要运用了useCountDown。

setup(props, { emit, slots }) {
  // useCountDown 组合式 API
  const { start, pause, reset, current } = useCountDown({
    // 传入的时刻毫秒数，+ 是字符串转数字
    time: +props.time,
    // 毫秒级烘托
    millisecond: props.millisecond,
    // 回调事情，onChange, onFinish
    onChange: (current) => emit('change', current),
    onFinish: () => emit('finish'),
  });
  // 格局化时刻
  const timeText = computed(() => parseFormat(props.format, current.value));
  // 重置，重新开端
  const resetTime = () => {
    reset(+props.time);
    if (props.autoStart) {
      start();
    }
  };
  watch(() => props.time, resetTime, { immediate: true });
  // 导出 start、pause、reset
  useExpose({
    start,
    pause,
    reset: resetTime,
  });
  return () => (
    // 有传入插槽，运用插槽，支撑自定义款式，传入解析后的时刻目标
    <div role="timer" class={bem()}>
      {slots.default ? slots.default(current.value) : timeText.value}
    </div>
  );
},

6.2 useExpose 暴露

import { getCurrentInstance } from 'vue';
import { extend } from '../utils';
// expose public api
export function useExpose<T = Record<string, any>>(apis: T) {
  const instance = getCurrentInstance();
  // 合并到 getCurrentInstance().proxy 上
  if (instance) {
    extend(instance.proxy as object, apis);
  }
}

经过 ref 能够获取到 Countdown 实例并调用实例办法，详见组件实例办法。

Vant 中的许多组件供给了实例办法，调用实例办法时，咱们需要经过 ref 来注册组件引用信息，引用信息将会注册在父组件的 $refs 目标上。注册完成后，咱们能够经过 this.$refs.xxx 或许

const xxxRef = ref();
xxxRef.value.xxx();

访问到对应的组件实例，并调用上面的实例办法。

7. useCountDown 组合式 API

7.1 parseTime 解析时刻

// vant/packages/vant-use/src/useCountDown/index.ts
import {
  ref,
  computed,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
} from 'vue';
import { raf, cancelRaf, inBrowser } from '../utils';
export type CurrentTime = {
  days: number;
  hours: number;
  total: number;
  minutes: number;
  seconds: number;
  milliseconds: number;
};
export type UseCountDownOptions = {
  time: number;
  // 毫秒
  millisecond?: boolean;
  onChange?: (current: CurrentTime) => void;
  onFinish?: () => void;
};
const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;
// 解析时刻
function parseTime(time: number): CurrentTime {
  const days = Math.floor(time / DAY);
  const hours = Math.floor((time % DAY) / HOUR);
  const minutes = Math.floor((time % HOUR) / MINUTE);
  const seconds = Math.floor((time % MINUTE) / SECOND);
  const milliseconds = Math.floor(time % SECOND);
  return {
    total: time,
    days,
    hours,
    minutes,
    seconds,
    milliseconds,
  };
}

以上这大段代码，parseTime 是首要函数，解析时刻，生成天数、小时、分钟、秒、毫秒的目标。

7.2 useCountDown 实在逻辑

实在逻辑这一段能够不必细看。能够调试时再细看。

首要便是运用 Date.now() 会自己走的原理。

初始化开端：完毕时刻 = 当时时刻戳 + 剩余时刻
获取：剩余时刻 = 完毕时刻 - 当时时刻戳
加上自己定时器逻辑循环
剩余时刻便是实在消逝的时刻
假如是毫秒级烘托，就直接赋值剩余时刻
假如不是，那就判别是同一秒才赋值

设计的十分巧妙，看到这儿，咱们或许感慨：不得不敬服。

// 简化版 一
const useCountDown = (options) => {
  let endTime;
  let remain = options.time;
  const getCurrentRemain = () => Math.max(endTime - Date.now(), 0);
  const start = () => {
    endTime = Date.now() + remain;
  }
  const setRemain = (value) => {
    remain = value;
  };
  return {
    start,
  }
}
const { start } = useCountDown({time: 3 * 1000});
start();

码上倒计时简化版二

// vant/packages/vant-use/src/useCountDown/index.ts
function isSameSecond(time1: number, time2: number): boolean {
  return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
}
export function useCountDown(options: UseCountDownOptions) {
  let rafId: number;
  let endTime: number;
  let counting: boolean;
  let deactivated: boolean;
  const remain = ref(options.time);
  const current = computed(() => parseTime(remain.value));
  const pause = () => {
    counting = false;
    cancelRaf(rafId);
  };
  const getCurrentRemain = () => Math.max(endTime - Date.now(), 0);
  const setRemain = (value: number) => {
    remain.value = value;
    options.onChange?.(current.value);
    if (value === 0) {
      pause();
      options.onFinish?.();
    }
  };
  const microTick = () => {
    rafId = raf(() => {
      // in case of call reset immediately after finish
      if (counting) {
        setRemain(getCurrentRemain());
        if (remain.value > 0) {
          microTick();
        }
      }
    });
  };
  const macroTick = () => {
    rafId = raf(() => {
      // in case of call reset immediately after finish
      if (counting) {
        const remainRemain = getCurrentRemain();
        if (!isSameSecond(remainRemain, remain.value) || remainRemain === 0) {
          setRemain(remainRemain);
        }
        if (remain.value > 0) {
          macroTick();
        }
      }
    });
  };
  const tick = () => {
    // should not start counting in server
    // see: https://github.com/vant-ui/vant/issues/7807
    if (!inBrowser) {
      return;
    }
    if (options.millisecond) {
      microTick();
    } else {
      macroTick();
    }
  };
  const start = () => {
    if (!counting) {
      endTime = Date.now() + remain.value;
      counting = true;
      tick();
    }
  };
  const reset = (totalTime: number = options.time) => {
    pause();
    remain.value = totalTime;
  };
  // 组件被卸载之前被调用
  onBeforeUnmount(pause);
  // 激活
  onActivated(() => {
    if (deactivated) {
      counting = true;
      deactivated = false;
      tick();
    }
  });
  onDeactivated(() => {
    if (counting) {
      pause();
      deactivated = true;
    }
  });
  // 回来办法和当时时刻目标
  return {
    start,
    pause,
    reset,
    current,
  };
}

咱们继续来看 raf 和 cancelRaf，是怎么完成的。

8. raf、cancelRaf、inBrowser 完成

// 判别是不是浏览器环境，你或许会问，为啥要判别？因为 SSR （服务端烘托）不是浏览器环境。
export const inBrowser = typeof window !== 'undefined';
// Keep forward compatible
// should be removed in next major version
export const supportsPassive = true;
export function raf(fn: FrameRequestCallback): number {
  return inBrowser ? requestAnimationFrame(fn) : -1;
}
export function cancelRaf(id: number) {
  if (inBrowser) {
    cancelAnimationFrame(id);
  }
}
// double raf for animation
export function doubleRaf(fn: FrameRequestCallback): void {
  raf(() => raf(fn));
}

上文代码，首要一个 API，requestAnimationFrame、cancelAnimationFrame。

咱们这儿简略理解为 window.requestAnimationFrame() 中的回调函数，每 16.67ms 履行一次回调函数即可。

也便是类似 setTimeout、clearTimeout

const timeId = setTimeout( () => {
  // 16.67ms 履行一次
  console.log('16.67ms 履行一次');
}, 16.67);
clearTimeout(timeId);

也能够自行查找这个 API 查阅更多资料。比方 MDN 上的解说。

mdn window.requestAnimationFrame

window.requestAnimationFrame() 告诉浏览器——你期望履行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该办法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前履行

回调函数履行次数通常是每秒 60 次，但在大多数遵循 W3C 主张的浏览器中，回调函数履行次数通常与浏览器屏幕改写次数相匹配。

备注：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身有必要再次调用 window.requestAnimationFrame()。

9. 支撑格局化时刻，默许 HH:mm:ss

9.1 parseFormat 处理格局化

再来看看，组件中，是怎么格局化时刻的。这个值得咱们参阅。咱们许多时候或许都是写死天数、小时等文案。不支撑自定义格局化。

// vant/packages/vant/src/count-down/utils.ts
import { padZero } from '../utils';
import { CurrentTime } from '@vant/use';
export function parseFormat(format: string, currentTime: CurrentTime): string {
  const { days } = currentTime;
  let { hours, minutes, seconds, milliseconds } = currentTime;
  // 有 DD 参数，补零替换，没有则小时数加上天数
  if (format.includes('DD')) {
    format = format.replace('DD', padZero(days));
  } else {
    hours += days * 24;
  }
  // 有 HH 参数，补零替换，没有则分钟数加上小时数
  if (format.includes('HH')) {
    format = format.replace('HH', padZero(hours));
  } else {
    minutes += hours * 60;
  }
  // 有 mm 参数，补零替换，没有则秒数加上分钟数
  if (format.includes('mm')) {
    format = format.replace('mm', padZero(minutes));
  } else {
    seconds += minutes * 60;
  }
  // 有 mm 参数，补零替换，没有则毫秒数加上秒数
  if (format.includes('ss')) {
    format = format.replace('ss', padZero(seconds));
  } else {
    milliseconds += seconds * 1000;
  }
  // 毫秒数 默许补三位数，依照格局终究给出对应的位数
  if (format.includes('S')) {
    const ms = padZero(milliseconds, 3);
    if (format.includes('SSS')) {
      format = format.replace('SSS', ms);
    } else if (format.includes('SS')) {
      format = format.replace('SS', ms.slice(0, 2));
    } else {
      format = format.replace('S', ms.charAt(0));
    }
  }
  // 终究回来格局化的数据
  return format;
}

9.2 padZero 补零

// vant/packages/vant-compat/node_modules/vant/src/utils/format.ts
// 补零操作
export function padZero(num: Numeric, targetLength = 2): string {
  let str = num + '';
  while (str.length < targetLength) {
    str = '0' + str;
  }
  return str;
}

行文自此，咱们就剖析完了毫秒级烘托的倒计时组件的完成。

10. 总结

咱们来简略总结下。经过 demo 文件调试，进口文件，主文件，useCountDown 组合式 API，插槽等。剖析了自定义格局、毫秒级烘托、自定义款式（运用插槽）等功能的完成。

其中毫秒级烘托，首要便是运用 Date.now() 和（window.requestAnimationFrame）每 16.67ms 履行一次回调函数。

大致流程如下：

初始化开端：完毕时刻 = 当时时刻戳 + 剩余时刻
获取：剩余时刻 = 完毕时刻 - 当时时刻戳
加上自己定时器逻辑循环（`window.requestAnimationFrame`）每 16.67ms 履行一次回调函数
剩余时刻便是实在消逝的时刻
假如是毫秒级烘托，就直接赋值剩余时刻
假如不是，那就判别是同一秒才赋值

看完这篇源码文章，再去看 CountDown 组件文档，或许就会有豁然开朗的感觉。再看其他组件，或许就能够猜测出大约完成的代码了。

假如是运用 react、Taro 技能栈，感兴趣也能够看看 taroify CountDown 组件的完成文档，源码。

假如看完有收获，欢迎点赞、谈论、共享支撑。你的支撑和肯定，是我写作的动力。

11. 加源码共读群交流

最终能够继续重视我@若川。我会写一个组件库源码系列专栏，欢迎我们重视。

我倾力继续组织了一年每周我们一同学习200行左右的源码共读活动，感兴趣的能够点此扫码加我微信 ruochuan12 参加。

别的，想学源码，极力引荐重视我写的专栏《学习源码整体架构系列》，现在是重视人数（4.2k+人）榜首的专栏，写有20余篇源码文章。包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue 3.2 发布、vue-this、create-vue、玩具vite、create-vite 等20余篇源码文章。

分析 vant4 源码，学会用 vue3 + ts 开发毫秒级渲染的倒计时组件，真是妙啊

1. 前言

2. 准备工作

2.1 克隆源码

3. 倒计时组件可谓是十分常用

4. 运用 demo 调试源码

5. 进口 index.ts

6. 主文件 Countdown

6.1 setup 部分

6.2 useExpose 暴露

7. useCountDown 组合式 API

7.1 parseTime 解析时刻

7.2 useCountDown 实在逻辑

8. raf、cancelRaf、inBrowser 完成

9. 支撑格局化时刻，默许 HH:mm:ss

9.1 parseFormat 处理格局化

9.2 padZero 补零

10. 总结

11. 加源码共读群交流

作者信息

推广

分析 vant4 源码，学会用 vue3 + ts 开发毫秒级渲染的倒计时组件，真是妙啊

1. 前言

2. 准备工作

2.1 克隆源码

3. 倒计时组件可谓是十分常用

4. 运用 demo 调试源码

5. 进口 index.ts

6. 主文件 Countdown

6.1 setup 部分

6.2 useExpose 暴露

7. useCountDown 组合式 API

7.1 parseTime 解析时刻

7.2 useCountDown 实在逻辑

8. raf、cancelRaf、inBrowser 完成

9. 支撑格局化时刻，默许 HH:mm:ss

9.1 parseFormat 处理格局化

9.2 padZero 补零

10. 总结

11. 加源码共读群交流

相关文章

pytorch 构建神经网络

sqlite wal 分析

android 微信抢红包工具 AccessibilityService

开源项目：数据库表结构生成文档工具

作者信息

推广