feat: 小程序定时器库初始化

Author: jimczj

.eslintrc.js

@@ -0,0 +1,36 @@
+/**
+ * 该 ESLint 配置扩展自 eslint-config-o2team-wx
+ * https://www.npmjs.com/package/eslint-config-o2team-wx
+ * o2team-wx 这一套规则是参考了 StandardJS 和 Airbnb 的 JS 规范，然后结合业务中的最佳实践整理输出的。
+ */
+module.exports = {
+    'extends': 'o2team-wx',
+    'plugins': [
+        'html',
+        'import'
+    ],
+    'settings': {
+        'html/html-extensions': ['.wxml']
+    },
+    'rules': {
+        'newline-per-chained-call': 'off',
+        'eqeqeq': 'off',
+        'indent': ['error', 2, { SwitchCase: 1 }],
+        'prefer-rest-params': 'off',
+        'prefer-template': 'off',
+        'no-else-return': 'off',
+        'no-nested-ternary': 'off',
+        'brace-style': 'off',
+        'semi': 'off',
+        'camelcase': ['off', { properties: 'never' }],  // ESLint 配置问题，暂时不强制所有变量名都用驼峰式命名
+        'array-callback-return': 'off',  // 暂时关闭
+        'prefer-const': 'warn',
+        'no-mixed-operators': 'off',
+        'callback-return': 'warn',
+        'class-methods-use-this': 'warn',
+        // 强制使用ES6 module，便于treeshaking
+        'import/no-commonjs': 'error',
+        'import/no-amd': 'error',
+        'no-debugger': 0
+    }
+}

README.md

@@ -0,0 +1,46 @@
+# timer-miniprogram
+
+小程序定时器管理库，更合理地使用 setTimeout 和 setInterval
+
+## 使用
+
+可参考 example 目录下的示例项目或参照以下流程：
+
+1. 通过 npm 安装
+
+```shell
+npm install --save timer-miniprogram
+```
+
+安装完成之后在微信开发者工具中点击构建 npm。
+
+2. 导入小程序适配版本的 timer-miniprogram
+
+```javascript
+import { TimerBehavior } from 'timer-miniprogram'
+// 在页面中使用
+Page({
+  behaviors: [TimerBehavior],
+  onReady() {
+    this.$setTimeout(() => {
+      console.log('setTimeout')
+    })
+    this.$setInterval(() => {
+      console.log('setTimeout')
+    })
+  }
+})
+
+// 在组件中使用
+Components({
+  behaviors: [TimerBehavior],
+  ready() {
+    this.$setTimeout(() => {
+      console.log('setTimeout')
+    })
+    this.$setInterval(() => {
+      console.log('setTimeout')
+    })
+  }
+})
+

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "timer-miniprogram",
+  "version": "0.0.1",
+  "description": "小程序定时器管理库，更合理地使用 setTimeout 和 setInterval",
+  "main": "src/index.js",
+  "miniprogram": "src",
+  "scripts": {
+    "lint": "eslint \"src/*.js\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/o2team/timer-miniprogram.git"
+  },
+  "keywords": [
+    "setTimeout",
+    "setInterval",
+    "miniprogram",
+    "微信小程序定时器"
+  ],
+  "author": "jimczj",
+  "license": "MIT",
+  "lint-staged": {
+    "*.js": [
+      "eslint --quiet --cache --fix",
+      "git add"
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "7.2.1",
+    "@commitlint/format": "7.2.1",
+    "@commitlint/lint": "7.2.1",
+    "@commitlint/read": "^7.6.0",
+    "eslint": "^4.19.1",
+    "eslint-config-o2team-wx": "^1.0.1",
+    "eslint-plugin-html": "^4.0.2",
+    "eslint-plugin-import": "^2.18.2",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.0.0",
+    "prettier": "^1.12.1",
+    "prettier-eslint": "^8.8.1"
+  },
+  "bugs": {
+    "url": "https://github.com/o2team/timer-miniprogram/issues"
+  },
+  "homepage": "https://github.com/o2team/timer-miniprogram#readme"
+}

src/behavior.js

@@ -0,0 +1,28 @@
+import { Timer } from './timer'
+
+const TimerBehavior = Behavior({
+  pageLifetimes: {
+    show () { Timer.pageShow(this.__wxWebviewId__) },
+    hide () { Timer.pageHide(this.__wxWebviewId__) }
+  },
+  methods: {
+    $setTimeout (fn = () => {}, timeout = 0, ...arg) {
+      const timer = new Timer(false, this.__wxWebviewId__, fn, timeout, ...arg)
+      return timer.id
+    },
+    $setInterval (fn = () => {}, timeout = 0, ...arg) {
+      const timer = new Timer(true, this.__wxWebviewId__, fn, timeout, ...arg)
+      return timer.id
+    },
+    $clearInterval (id) {
+      Timer.clear(this.__wxWebviewId__, id)
+    },
+    $clearTimeout (id) {
+      Timer.clear(this.__wxWebviewId__, id)
+    },
+  },
+  created () { Timer.pageLoad(this.__wxWebviewId__) },
+  detached () { Timer.pageUnLoad(this.__wxWebviewId__) },
+})
+
+export { TimerBehavior }

src/index.js

@@ -0,0 +1,2 @@
+export * from './timer'
+export * from './behavior'

src/timer.js

@@ -0,0 +1,136 @@
+/**
+ * 定时器管理库
+ * @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) {
+    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) || {}
+    /* 页面隐藏，不创建定时器 */
+    if (this.restTime < 0 || !isActive) return
+
+    this.startTime = +new Date()
+
+    if (this.isInterval) {
+      /* setInterval */
+      const cb = (...arg) => {
+        this.fn(...arg)
+        /* timerId 为空表示被 clearInterval */
+        if (this.timerId) this.timerId = setTimeout(cb, this.timeout, ...this.arg)
+      }
+      this.timerId = setTimeout(cb, this.restTime, ...this.arg)
+      return
+    }
+    /* setTimeout  */
+    const cb = (...arg) => {
+      this.fn(...arg)
+      timerStore && timerStore.delete(this.id)
+    }
+    this.timerId = setTimeout(cb, this.restTime, ...this.arg)
+  }
+
+  /* 暂停定时器 */
+  suspend () {
+    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
+    }
+    clearTimeout(this.timerId)
+  }
+}
+
+/* 定时器增量 id  */
+Timer.count = 0
+/* 存储页面定时器和页面显示或隐藏状态 */
+Timer.pageStore = new Map()
+
+export { Timer }