2022年11月23日首發(fā)于掘金，現(xiàn)在同步到公眾號。

11. 前言

大家好，我是若川。推薦點右上方藍字若川視野把我的公眾號設為星標。我傾力持續(xù)組織了一年多源碼共讀，感興趣的可以加我微信 lxchuan12 參與。另外，想學源碼，極力推薦關注我寫的專欄《學習源碼整體架構系列》，目前是掘金關注人數(shù)（4.6k+人）第一的專欄，寫有20余篇源碼文章。

---

我們開發(fā)業(yè)務時經(jīng)常會使用到組件庫，一般來說，很多時候我們不需要關心內部實現(xiàn)。但是如果希望學習和深究里面的原理，這時我們可以分析自己使用的組件庫實現(xiàn)。有哪些優(yōu)雅實現(xiàn)、最佳實踐、前沿技術等都可以值得我們借鑒。

相比于原生 JS 等源碼。我們或許更應該學習，正在使用的組件庫的源碼，因為有助于幫助我們寫業(yè)務和寫自己的組件。

如果是 Vue 技術棧，開發(fā)移動端的項目，大多會選用 vant 組件庫，目前（2022-11-20）star 多達 20.5k，最新版本是 v4.0.0-rc7。我們可以挑選 vant 組件庫學習，我會寫一個組件庫源碼系列專欄^[1]，歡迎大家關注。

• vant 4 即將正式發(fā)布，支持暗黑主題，那么是如何實現(xiàn)的呢

• 跟著 vant4 源碼學習如何用 vue3+ts 開發(fā)一個 loading 組件，僅88行代碼

• 分析 vant4 源碼，如何用 vue3 + ts 開發(fā)一個瀑布流滾動加載的列表組件？

這次我們來學習倒計時組件，`countdown`^[2]。

學完本文，你將學到：

1.?如何開發(fā)一個更優(yōu)雅的毫秒級渲染的倒計時組件
2.?學會使用?requestAnimationFrame
3.?等等

22. 準備工作

看一個開源項目，我們可以先看 README.md^[3] 再看 github/CONTRIBUTING.md^[4]

2.1 克隆源碼

You will need Node.js >= 14^[5] and pnpm^[6].

#?推薦克隆我的項目
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?安裝，或者查看官網(wǎng)通過其他方式安裝
pnpm?i

#?啟動服務
pnpm?dev

執(zhí)行 pnpm dev 后，這時我們打開倒計時組件 http://localhost:5173/#/zh-CN/count-down。

33. 倒計時組件可謂是十分常用

在各種電商類或者其他的移動端頁面中，倒計時真的是太常見了。我們自己也基本能夠快速的寫一個倒計時組件。代碼實現(xiàn)參考這里，主要是 JavaScript。碼上掘金倒計時初步代碼@若川^[7]

代碼中，我直接使用的 setInterval 和每秒鐘執(zhí)行一次。把倒計時的時候減去1s，當?shù)褂嫊r毫秒數(shù)不足時用 clearInterval 清除停止定時器。

但如果要實現(xiàn)毫秒級的倒計時這種方法行不通。 另外 setInterval 這種做法，并不是最優(yōu)的。 那么，vant 倒計時組件中，是如何處理毫秒級和實現(xiàn)倒計時呢。

帶著問題我們直接找到 countdown demo 文件：vant/packages/vant/src/count-down/demo/index.vue。為什么是這個文件，我在之前文章跟著 vant4 源碼學習如何用 vue3+ts 開發(fā)一個 loading 組件，僅88行代碼分析了其原理，感興趣的小伙伴點擊查看。這里就不贅述了。

44. 利用 demo 調試源碼

組件源碼中的 TS 代碼我不會過多解釋。沒學過 TS 的小伙伴，推薦學這個TypeScript 入門教程^[8]。 另外，vant 使用了 @vue/babel-plugin-jsx^[9] 插件來支持 JSX、TSX。

//?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。我們繼續(xù)來看入口 index.ts。

55. 入口 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 函數(shù)在之前文章5.1 withInstall 給組件對象添加 install 方法 也有分析，這里就不贅述了。

我們可以在這些文件，任意位置加上 debugger 調試源碼。

截兩張調試圖。

調試 Countdown setup。

調試 useCountDown。

我們跟著調試，繼續(xù)分析 Countdown。

66. 主文件 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({
????//?傳入的時間毫秒數(shù)，+?是字符串轉數(shù)字
????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 實例并調用實例方法，詳見組件實例方法^[10]。

Vant 中的許多組件提供了實例方法，調用實例方法時，我們需要通過 ref 來注冊組件引用信息，引用信息將會注冊在父組件的 $refs 對象上。注冊完成后，我們可以通過 this.$refs.xxx 或者

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

訪問到對應的組件實例，并調用上面的實例方法。

77. 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 是主要函數(shù)，解析時間，生成天數(shù)、小時、分鐘、秒、毫秒的對象。

7.2 useCountDown 真實邏輯

真實邏輯這一段可以不用細看?？梢哉{試時再細看。

主要就是利用 Date.now() 會自己走的原理。

初始化開始：結束時間?=?當前時間戳?+?剩余時間
獲?。菏Ｓ鄷r間?=?結束時間?-?當前時間戳
加上自己定時器邏輯循環(huán)
剩余時間就是真實流逝的時間
如果是毫秒級渲染，就直接賦值剩余時間
如果不是，那就判斷是同一秒才賦值

設計的十分巧妙，看到這里，我們可能感慨：不得不佩服。

//?簡化版?一
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();

碼上掘金倒計時簡化版二

碼上掘金倒計時簡化版二@若川^[11]

//?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,
??};
}

我們繼續(xù)來看 raf 和 cancelRaf，是如何實現(xiàn)的。

88. raf、cancelRaf、inBrowser 實現(xiàn)

//?判斷是不是瀏覽器環(huán)境，你可能會問，為啥要判斷？因為?SSR?（服務端渲染）不是瀏覽器環(huán)境。
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() 中的回調函數(shù)，每 16.67ms 執(zhí)行一次回調函數(shù)即可。

也就是類似 setTimeout、clearTimeout

const?timeId?=?setTimeout(?()?=>?{
??//?16.67ms?執(zhí)行一次
??console.log('16.67ms?執(zhí)行一次');
},?16.67);

clearTimeout(timeId);

也可以自行搜索這個 API 查閱更多資料。比如 MDN 上的解釋。

mdn window.requestAnimationFrame^[12]

window.requestAnimationFrame() 告訴瀏覽器——你希望執(zhí)行一個動畫，并且要求瀏覽器在下次重繪之前調用指定的回調函數(shù)更新動畫。該方法需要傳入一個回調函數(shù)作為參數(shù)，該回調函數(shù)會在瀏覽器下一次重繪之前執(zhí)行

回調函數(shù)執(zhí)行次數(shù)通常是每秒 60 次，但在大多數(shù)遵循 W3C 建議的瀏覽器中，回調函數(shù)執(zhí)行次數(shù)通常與瀏覽器屏幕刷新次數(shù)相匹配。

備注： 若你想在瀏覽器下次重繪之前繼續(xù)更新下一幀動畫，那么回調函數(shù)自身必須再次調用 window.requestAnimationFrame()。

99. 支持格式化時間，默認 HH:mm:ss

9.1 parseFormat 處理格式化

再來看看，組件中，是如何格式化時間的。這個值得我們參考。我們很多時候可能都是寫死天數(shù)、小時等文案。不支持自定義格式化。

//?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?參數(shù)，補零替換，沒有則小時數(shù)加上天數(shù)
??if?(format.includes('DD'))?{
????format?=?format.replace('DD',?padZero(days));
??}?else?{
????hours?+=?days?*?24;
??}

??//?有?HH?參數(shù)，補零替換，沒有則分鐘數(shù)加上小時數(shù)
??if?(format.includes('HH'))?{
????format?=?format.replace('HH',?padZero(hours));
??}?else?{
????minutes?+=?hours?*?60;
??}

??//?有?mm?參數(shù)，補零替換，沒有則秒數(shù)加上分鐘數(shù)
??if?(format.includes('mm'))?{
????format?=?format.replace('mm',?padZero(minutes));
??}?else?{
????seconds?+=?minutes?*?60;
??}

??//?有?mm?參數(shù)，補零替換，沒有則毫秒數(shù)加上秒數(shù)
??if?(format.includes('ss'))?{
????format?=?format.replace('ss',?padZero(seconds));
??}?else?{
????milliseconds?+=?seconds?*?1000;
??}

??//?毫秒數(shù)?默認補三位數(shù)，按照格式最終給出對應的位數(shù)
??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));
????}
??}

??//?最終返回格式化的數(shù)據(jù)
??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;
}

行文自此，我們就分析完了毫秒級渲染的倒計時組件的實現(xiàn)。

1010. 總結

我們來簡單總結下。通過 demo 文件調試，入口文件，主文件，useCountDown 組合式 API，插槽等。 分析了自定義格式、毫秒級渲染、自定義樣式（利用插槽）等功能的實現(xiàn)。

其中毫秒級渲染，主要就是利用 Date.now() 和 （window.requestAnimationFrame）每 16.67ms 執(zhí)行一次回調函數(shù)。

大致流程如下：

初始化開始：結束時間?=?當前時間戳?+?剩余時間
獲?。菏Ｓ鄷r間?=?結束時間?-?當前時間戳
加上自己定時器邏輯循環(huán)（`window.requestAnimationFrame`）每?16.67ms?執(zhí)行一次回調函數(shù)
剩余時間就是真實流逝的時間
如果是毫秒級渲染，就直接賦值剩余時間
如果不是，那就判斷是同一秒才賦值

看完這篇源碼文章，再去看 CountDown 組件文檔^[13]，可能就會有豁然開朗的感覺。再看其他組件，可能就可以猜測出大概實現(xiàn)的代碼了。

如果是使用 react、Taro 技術棧，感興趣也可以看看 taroify CountDown 組件的實現(xiàn) 文檔^[14]，源碼^[15]。

如果看完有收獲，歡迎點贊、評論、分享支持。你的支持和肯定，是我寫作的動力。

參考資料

[1]

組件庫源碼系列專欄: https://juejin.cn/column/7140264842954276871

[2]

countdown: https://vant-contrib.gitee.io/vant/v4/#/zh-CN/count-down

[3]

README.md: https://github.com/youzan/vant

[4]

github/CONTRIBUTING.md: https://github.com/youzan/vant/blob/main/.github/CONTRIBUTING.md

[5]

Node.js >= 14: https://nodejs.org

[6]

pnpm: https://pnpm.io

[7]

碼上掘金倒計時初步代碼@若川: https://code.juejin.cn/pen/7167966535649230883

[8]

TypeScript 入門教程: http://ts.xcatliu.com/

[9]

@vue/babel-plugin-jsx: https://www.npmjs.com/package/@vue/babel-plugin-jsx

[10]

組件實例方法: https://vant-contrib.gitee.io/vant/v4/#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa

[11]

碼上掘金倒計時簡化版二@若川: https://code.juejin.cn/pen/7168892330752081928

[12]

mdn window.requestAnimationFrame: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

[13]

CountDown 組件文檔: https://vant-contrib.gitee.io/vant/#/zh-CN/count-down

[14]

文檔: https://taroify.gitee.io/taroify.com/components/countdown

[15]

源碼: https://github.com/mallfoundry/taroify/tree/main/packages/core/src/countdown

·················?若川簡介?·················

你好，我是若川，畢業(yè)于江西高?！，F(xiàn)在是一名前端開發(fā)“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經(jīng)堅持寫了8年，點擊查看年度總結。
同時，持續(xù)組織了一年多源碼共讀活動，幫助5000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

掃碼加我微信 lxchuan12、拉你進源碼共讀群

今日話題

目前建有江西|湖南|湖北?籍 前端群，想進群的可以加我微信 lxchuan12?進群。分享、收藏、點贊、在看我的文章就是對我最大的支持~文章來源地址http://www.zghlxwxcb.cn/news/detail-446190.html