From 74a96578d5173ca1f509f704a8a1aecffce7351a Mon Sep 17 00:00:00 2001 From: jimczj Date: Tue, 16 Jun 2020 17:18:25 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20timer-store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 27 +++++++++++++- src/behavior.js | 27 ++++++-------- src/index.js | 1 + src/timer-store.js | 37 ++++++++++++++++++ src/timer.js | 93 ++++------------------------------------------ 5 files changed, 83 insertions(+), 102 deletions(-) create mode 100644 src/timer-store.js diff --git a/README.md b/README.md index 064fe41..81af9bf 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ npm install --save timer-miniprogram 2. 导入小程序适配版本的 timer-miniprogram -```javascript +```js import { TimerBehavior } from 'timer-miniprogram' // 在页面中使用 Page({ @@ -45,6 +45,31 @@ Components({ }) ``` +## eslint 配置 + +为了让团队更好地遵守定时器使⽤规范，你还可以配置 eslint 增加代码提示，配置如下： + +``` +// .eslintrc.js +module.exports = { + 'rules': { + 'no-restricted-globals': ['error', { + 'name': 'setTimeout', + 'message': 'Please use TimerBehavior and this.$setTimeout instead. see the link: https://github.com/o2team/timer-miniprogram' + }, { + 'name': 'setInterval', + 'message': 'Please use TimerBehavior and this.$setInterval instead. see the link: https://github.com/o2team/timer-miniprogram' + }, { + 'name': 'clearInterval', + 'message': 'Please use TimerBehavior and this.$clearInterval instead. see the link: https://github.com/o2team/timer-miniprogram' + }, { + 'name': 'clearTimout', + 'message': 'Please use TimerBehavior and this.$clearTimout instead. see the link: https://github.com/o2team/timer-miniprogram' + }] + } +} +``` + ## License diff --git a/src/behavior.js b/src/behavior.js index 6a6636d..f76ca63 100644 --- a/src/behavior.js +++ b/src/behavior.js @@ -1,28 +1,25 @@ import { Timer } from './timer' +import { TimerStore } from './timer-store' const TimerBehavior = Behavior({ + created () { this.$timerStore = new TimerStore() }, + detached () { this.$timerStore.hide() }, pageLifetimes: { - show () { Timer.pageShow(this.__wxWebviewId__) }, - hide () { Timer.pageHide(this.__wxWebviewId__) } + show () { this.$timerStore.show() }, + hide () { this.$timerStore.hide() } }, methods: { $setTimeout (fn = () => {}, timeout = 0, ...arg) { - const timer = new Timer(false, this.__wxWebviewId__, fn, timeout, ...arg) - return timer.id + const timer = new Timer(false, fn, timeout, ...arg) + return this.$timerStore.addTimer(timer) }, $setInterval (fn = () => {}, timeout = 0, ...arg) { - const timer = new Timer(true, this.__wxWebviewId__, fn, timeout, ...arg) - return timer.id + const timer = new Timer(true, fn, timeout, ...arg) + return this.$timerStore.addTimer(timer) }, - $clearInterval (id) { - Timer.clear(this.__wxWebviewId__, id) - }, - $clearTimeout (id) { - Timer.clear(this.__wxWebviewId__, id) - }, - }, - created () { Timer.pageLoad(this.__wxWebviewId__) }, - detached () { Timer.pageUnLoad(this.__wxWebviewId__) }, + $clearInterval (id) { this.$timerStore.clear(id) }, + $clearTimeout (id) { this.$timerStore.clear(id) }, + } }) export { TimerBehavior } diff --git a/src/index.js b/src/index.js index 35d4968..5fa3be2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,2 +1,3 @@ export * from './timer' export * from './behavior' +export * from './timer-store' diff --git a/src/timer-store.js b/src/timer-store.js new file mode 100644 index 0000000..d378f5e --- /dev/null +++ b/src/timer-store.js @@ -0,0 +1,37 @@ +class TimerStore { + constructor () { + this.store = new Map() + this.isActive = true + } + + addTimer (timer) { + this.store.set(timer.id, timer) + this.isActive && timer.start(this.store) + + return timer.id + } + + show () { + /* 没有隐藏，不需要恢复定时器 */ + if (this.isActive) return + + this.isActive = true + this.store.forEach(timer => timer.start(this.store)) + } + + hide () { + this.store.forEach(timer => timer.suspend()) + this.isActive = false + } + + clear (id) { + const timer = this.store.get(id) + if (!timer) return + + clearTimeout(timer.timerId) + timer.timerId = '' + this.store.delete(id) + } +} + +export { TimerStore } diff --git a/src/timer.js b/src/timer.js index a7256ad..c4de479 100644 --- a/src/timer.js +++ b/src/timer.js @@ -1,102 +1,23 @@ -/** - * 定时器管理库 - * @author chenzeji - */ - class Timer { - /** - * 清除定时器 - * @param {String} pageId 页面 id - * @param {String} id 定时器 id - */ - static clear (pageId, id) { - const { timerStore } = Timer.pageStore.get(pageId) || {} - if (!timerStore) return - - const timer = timerStore.get(id) - if (!timer) return - - clearTimeout(timer.timerId) - timer.timerId = '' - timerStore.delete(id) - } - - /** - * 页面加载处理函数 - * @param {String} pageId 页面 id - */ - static pageLoad (pageId) { - Timer.pageStore.set(pageId, { - isActive: true, - timerStore: new Map() - }) - } - - /** - * 页面展示处理函数 - * @param {String} pageId 页面 id - */ - static pageShow (pageId) { - const page = Timer.pageStore.get(pageId) || {} - - /* 没有隐藏，不需要恢复定时器 */ - if (page.isActive) return - - page.isActive = true - page.timerStore && page.timerStore.forEach(timer => timer.start()) - } - - /** - * 页面隐藏处理函数 - * @param {String} pageId 页面 id - */ - static pageHide (pageId) { - const page = Timer.pageStore.get(pageId) || {} - page.timerStore && page.timerStore.forEach(timer => timer.suspend()) - page.isActive = false - } - - /** - * 页面卸载处理函数 - * @param {String} pageId 页面 id - */ - static pageUnLoad (pageId) { - Timer.pageHide(pageId) - Timer.pageStore.delete(pageId) - } - /** * 构造函数 * @param {Boolean} isInterval 是否是 setInterval - * @param {String} pageId 页面 id * @param {Function} fn 回调函数 * @param {Number} timeout 定时器执行时间间隔 * @param {...any} arg 定时器其他参数 */ - constructor (isInterval = false, pageId = '', fn = () => {}, timeout = 0, ...arg) { + constructor (isInterval = false, fn = () => {}, timeout = 0, ...arg) { this.id = ++Timer.count // 定时器递增 id this.fn = fn this.timeout = timeout this.restTime = timeout // 定时器剩余计时时间 - this.pageId = pageId this.isInterval = isInterval this.arg = arg - - /* 存储定时器 */ - const { timerStore } = Timer.pageStore.get(pageId) || {} - timerStore && timerStore.set(this.id, this) - - this.start() } - /** - * 启动定时器 - */ - start () { - const { isActive, timerStore } = Timer.pageStore.get(this.pageId) || {} + /* 启动或恢复定时器 */ + start (timerStore) { /* 页面隐藏，不创建定时器 */ - if (this.restTime < 0 || !isActive) return - this.startTime = +new Date() if (this.isInterval) { @@ -112,7 +33,7 @@ class Timer { /* setTimeout */ const cb = (...arg) => { this.fn(...arg) - timerStore && timerStore.delete(this.id) + timerStore.delete(this.id) } this.timerId = setTimeout(cb, this.restTime, ...this.arg) } @@ -122,7 +43,9 @@ class Timer { if (this.timeout > 0) { const now = +new Date() const nextRestTime = this.restTime - (now - this.startTime) - this.restTime = this.isInterval ? Math.abs(nextRestTime) % this.timeout : nextRestTime + const intervalRestTime = nextRestTime >= 0 ? nextRestTime : this.timeout - (Math.abs(nextRestTime) % this.timeout) + + this.restTime = this.isInterval ? intervalRestTime : nextRestTime } clearTimeout(this.timerId) } @@ -130,7 +53,5 @@ class Timer { /* 定时器增量 id */ Timer.count = 0 -/* 存储页面定时器和页面显示或隐藏状态 */ -Timer.pageStore = new Map() export { Timer }