feat: 新增 timer-store

o2team · Jun 16, 2020 · 74a9657 · 74a9657
1 parent 79708b4
commit 74a9657
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 102 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,15 +43,15 @@ 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)
   }
 }
 
 /* 定时器增量 id  */
 Timer.count = 0
-/* 存储页面定时器和页面显示或隐藏状态 */
-Timer.pageStore = new Map()
 
 export { Timer }