回想在4個(gè)月前剛剛進(jìn)入公司實(shí)習(xí)時(shí)，我封裝了一個(gè)應(yīng)用于小程序的倒計(jì)時(shí)組件。

鏈接在這里：微信小程序之倒計(jì)時(shí)組件

以現(xiàn)在的視角再去看之前的實(shí)現(xiàn)可以說(shuō)是一坨看不下去的爛代碼。所以也借此機(jī)會(huì)，將之前的組件重構(gòu)一番。

重構(gòu)舊代碼

在原來(lái)的組件中有一個(gè)initDuration屬性和3個(gè)方法，3個(gè)方法分別是countDown，format和runCountDown。

initDuration屬性

首先我們需要三個(gè)page屬性來(lái)幫助完成接下來(lái)的代碼，它們的名字和內(nèi)容如下：

timer: null, // 存儲(chǔ)setInterval的ID flag: false, // 倒計(jì)時(shí)是否結(jié)束的標(biāo)志 num: 0 // 過(guò)去的秒數(shù) 復(fù)制代碼

在initDuration屬性的新的回調(diào)方法中，我們封裝了clearTimer方法，init初始化方法，并且執(zhí)行倒計(jì)時(shí)。

initDuration: {type: Number,value: 0,observer: function (newVal) {if (this.timer) {this.clearTimer()}this.init() // 重置num和flagthis.runCountDown(newVal)} }, 復(fù)制代碼

一定要注意，當(dāng)傳入的屬性的值為默認(rèn)值，例如這里是0時(shí)，是不會(huì)觸發(fā)observer回調(diào)的。

/*** 初始化函數(shù)*/ init: function () {this.flag = falsethis.num = 0 }/*** 清空計(jì)時(shí)器*/ clearTimer: function () {clearInterval(this.timer)this.timer = null } 復(fù)制代碼

countDown方法

countDown方法是接受一個(gè)參數(shù)為倒計(jì)時(shí)的秒數(shù)，返回一個(gè)倒計(jì)時(shí)的字符串。在這個(gè)方法中沒(méi)有太大改動(dòng)，只是改動(dòng)了一些代碼格式。如下：

/*** 計(jì)算倒計(jì)時(shí)* @param {Number} duration - 秒數(shù)時(shí)間差* @returns {string} 倒計(jì)時(shí)的字符串*/ countDown: function (duration) {if (duration <= 0) {this.setFlag(true) // 將flag屬性設(shè)為truereturn '00:00:00' // 返回默認(rèn)時(shí)間設(shè)置}let seconds = this._format(duration % 60)let minutes = Math.floor(duration / 60)minutes = minutes >= 60 ? this._format(minutes % 60) : this._format(minutes)let hours = this._format(Math.floor(duration / 3600))return `${hours}:${minutes}:${seconds}` }, 復(fù)制代碼

format方法

format方法的作用很簡(jiǎn)單，就是處理小于10的數(shù)字展示問(wèn)題。

/*** 格式化小于10的數(shù)字* @param {Number} time - 小于10的數(shù)字* @returns {string} 格式化后的字符串*/ format: function (time) {return time >= 10 ? time : `0${time}` }, 復(fù)制代碼

runCountDown方法

runCountDown方法中的改動(dòng)比較大，在原來(lái)的代碼中邏輯比較混亂，穿插了許多無(wú)關(guān)的代碼，其實(shí)應(yīng)該將它們封裝起來(lái)達(dá)到解耦的目的。

runCountDown: function (initDuration) {// 第一次給倒計(jì)時(shí)賦值 this.setData({ countDownStr })this.setCountDownTime(this.countDown(initDuration))// 每一秒更新一次倒計(jì)時(shí)this.timer = setInterval(() => {if (this.flag == true) { // 倒計(jì)時(shí)結(jié)束clearInterval(this.timer)return undefined}this.addNum() // this.num += 1this.setCountDownTime(this._countDown(initDuration - this.num))}, 1000) }, 復(fù)制代碼

增加新功能

我們?cè)瓉?lái)的倒計(jì)時(shí)組件是缺乏一些功能的，例如傳入的時(shí)間只能是秒數(shù)，倒計(jì)時(shí)結(jié)束后只顯示00:00:00，如果傳入的值是0的話(huà)會(huì)不進(jìn)行初始化（這算是Bug了）。所以我們需要加入以下的新功能：

• 支持自定義倒計(jì)時(shí)結(jié)束后現(xiàn)實(shí)的字符串。
• 修復(fù)傳入值為0的Bug。
• 傳入的時(shí)間可以是秒數(shù)，也可以是UTC時(shí)間的字符串。

自定義結(jié)束字符串

在倒計(jì)時(shí)組件中，展示倒計(jì)時(shí)字符串的是this.data.countDownTime屬性。所以在結(jié)束時(shí)將countDownTime屬性的值設(shè)為傳入的字符串即可。 首先，封裝一個(gè)賦值方法

setEndContent: function (countDownTime) {if (countDownTime) {this.setData({ countDownTime })} } 復(fù)制代碼

接下來(lái)為組件新增加一個(gè)屬性為endContent。

endContent: {type: String,value: '00:00:00' } 復(fù)制代碼

接下來(lái)，在倒計(jì)時(shí)結(jié)束的位置，調(diào)用我們的賦值方法，也就是runCountDown方法的計(jì)時(shí)器回調(diào)函數(shù)中。

this.timer = setInterval(() => {if (this.flag == true) {clearInterval(this.timer)this.setEndContent(this.properties.endContent) // 設(shè)置結(jié)束字符串return undefined}this.addNum()this.setCountDownTime(this._countDown(initDuration - this.num)) }, 1000) 復(fù)制代碼

這樣自定義字符串就成功了，在使用組件時(shí)傳入默認(rèn)值即可。

修復(fù)傳入值為0的Bug

這個(gè)問(wèn)題的出現(xiàn)是因?yàn)楫?dāng)傳入屬性為默認(rèn)值時(shí)，不會(huì)調(diào)用observer回調(diào)函數(shù)，所以這時(shí)我們需要使用組件的attached生命周期函數(shù)。

attached: function () {if (this.properties.initDuration <= 0) {// 如果傳入值為零時(shí)不會(huì)調(diào)用observer回調(diào)，則直接從這里展示倒計(jì)時(shí)結(jié)束this.setEndContent(this.properties.endContent)} } 復(fù)制代碼

可以傳入U(xiǎn)TC時(shí)間字符串

為了簡(jiǎn)潔起見(jiàn)，我們就不為組件增加新的屬性了，依然使用initDuration屬性，所以要將其type從Number改為null（小程序的這點(diǎn)不夠強(qiáng)，不能選擇多類(lèi)型。）。在修改type后我們需要封裝一個(gè)將UTC時(shí)間字符串解析成倒計(jì)時(shí)秒數(shù)的方法。

parseDate: function (date) {if (typeof date == 'string') {// 將傳進(jìn)來(lái)的時(shí)間減去現(xiàn)在的時(shí)間，得到的結(jié)果便和直接傳進(jìn)數(shù)字值相同return Math.floor((+new Date(date) / 1000)) - Math.floor((+new Date / 1000))}return date } 復(fù)制代碼

在observer回調(diào)中調(diào)用時(shí)如下:

initDuration: {type: null,observer: function (newVal) {if (this.timer) {this._clearTimer()}this._init()this._runCountDown(this.parseDate(newVal)) // 在這里調(diào)用parseData方法} } 復(fù)制代碼

總結(jié)

在這次重構(gòu)過(guò)程中，我看到了之前代碼耦合太嚴(yán)重，僅僅滿(mǎn)足了湊合用的情況。如果想要再此基礎(chǔ)上增加功能的成本很高，所以將內(nèi)部邏輯拆分。既方便閱讀和理解，也方便日后拓展功能。所以重構(gòu)后我們便增加了兩個(gè)新功能，希望這邊文章可以幫助大家。

倒計(jì)時(shí)組件代碼：github.com/MeloGuo/wxm…
可將'count-down'文件夾直接copy到項(xiàng)目目錄下使用。
歡迎喜歡、關(guān)注、star、fork，當(dāng)然也歡迎pr、issue.

轉(zhuǎn)載于:https://juejin.im/post/5b670ccfe51d4516e91fcf32

超強(qiáng)干貨來(lái)襲 云風(fēng)專(zhuān)訪(fǎng)：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的【重构】微信小程序倒计时组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。