回调测试

cli/entry.js

 
 // this file is auto Write By development scripts
 module.exports = {
-  entry: '/Users/liupengfei/work/duiba/@tuia/acitivity-core-real/test/haha/index.js',
-  libHtml: '/Users/liupengfei/work/duiba/@tuia/acitivity-core-real/test/haha/index.html',
+  entry: '/Users/liupengfei/work/duiba/@tuia/acitivity-core-real/test/handleDojoin/index.js',
+  libHtml: '/Users/liupengfei/work/duiba/@tuia/acitivity-core-real/test/handleDojoin/index.html',
   output: {
-    path: '/Users/liupengfei/work/duiba/@tuia/acitivity-core-real/temporary/haha'
+    path: '/Users/liupengfei/work/duiba/@tuia/acitivity-core-real/temporary/handleDojoin'
   }
 }

package.json

@@ -18,6 +18,7 @@
     "types"
   ],
   "devDependencies": {
+    "@babel/cli": "^7.10.5",
     "@babel/core": "^7.9.0",
     "@babel/plugin-transform-runtime": "^7.10.4",
     "@babel/preset-env": "^7.9.5",
@@ -86,5 +87,9 @@
     "webpack-dev-middleware": "^3.7.2",
     "webpack-dev-server": "^3.10.3",
     "webpack-hot-middleware": "^2.25.0"
+  },
+  "dependencies": {
+    "jquery": "^3.5.1",
+    "tapable": "^1.1.3"
   }
 }

src/couponModal/index.js

+/*
+ * @Author: flyharvest
+ * @Date: 2020-07-15 15:50:45
+ * @LastEditTime: 2020-07-19 01:59:06
+ * @LastEditors: flyharvest
+ */
+/* eslint-disable*/
+import $ from 'jquery'
+import { normallizeOptions } from '@lib/utils'
+import './index.less'
+
+class CouponModal {
+  constructor(opts) {
+    this.hooksDefine = [
+      { name: 'confirmClick', type: 1 },
+      { name: 'closeClick', type: 1 },
+      { name: 'afterClose', type: 1 },
+      { name: 'contentClose', type: 1 },
+      { name: 'replaceHtml', type: 2 },
+      { name: 'getDom', type: 4}
+    ]
+    this.hooks = normallizeOptions(opts, this.hooksDefine)
+    this.allHooksName = this.getHooksName(this.hooksDefine)
+    this.isShow = false
+    this.el = null
+    this.resolve = null
+    this.showPromsie = null
+  }
+  getHooksName (hooksDefine) {
+    return hooksDefine.map(e => e.name)
+  }
+  init () {
+    const dom = `
+      <div class="wrapper">
+        <div class="content">广告</div>
+        <div class="close">关闭</div>
+        <div class="confirm">领奖</div>
+      </div>
+    `
+    return Promise.resolve(dom)
+  }
+  show (data, opts = {}) {
+    this.tempHooks = normallizeOptions(opts, this.hooksDefine)
+    this.data = data
+    this.showPromise = new Promise(resolve => {
+      this.resolve = resolve
+    })
+    const domResolve = (content) => {
+      return this.resolve(Object.assign({
+        isCustom: true
+      }, content))
+    }
+    // 不用默认的弹层，替换自定义弹层。
+    this.hooks.getDom({couponModalResolve: domResolve})
+      .then(mid => {
+        console.log(mid)
+        this.tempHooks.getDom(mid)
+          .then(res => {
+            console.log(res)
+            if (res.isReplaced) {
+              // 
+            } else {
+              this.init(data)
+                .then(dom => {
+                  this.el = $(dom)
+                  let mid = this.hooks.replaceHtml(this.el)
+                  this.el = this.tempHooks.replaceHtml(mid)
+                  this.events()
+                  $('body').append(this.el)
+                })
+            }
+          })
+      })
+    return this.showPromise
+  }
+  events() {
+
+    const confirm = $(this.el).find('.confirm')
+    const close = $(this.el).find('.close')
+    const content = $(this.el).find('.content')
+
+    $(content).on('click', () => {
+      const mid = this.hooks.contentClick()
+      const res = this.tempHooks.contentClick(mid)
+      if (res === true) {
+        this.close('contentClick')
+      }
+    })
+
+    $(confirm).on('click', () => {
+      const mid = this.hooks.confirmClick()
+      const res = this.tempHooks.confirmClick(mid)
+      if (res === true || res === undefined) {
+        this.close('confirmClick')  
+      }
+    })
+
+    $(close).on('click', () => {
+      const mid = this.hooks.closeClick()
+      const res = this.tempHooks.closeClick(mid)
+      if (res === true || res === undefined) {
+        this.close('closeClick')
+      }
+    })
+  }
+
+  close (source) {
+    this.el.remove()
+    this.resolve({
+      type: source,
+      data: this.data
+    })
+  }
+
+}
+
+
+export default CouponModal

src/couponModal/index.less

+.wrapper {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  font-size: 40px;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  height: 400px;
+  font-size: 40px;
+  background: white;
+  transform: translate(-50%, -50%);
+}
+
+.close {
+  position: absolute;
+  top: 100px;
+  left: 600px;
+  width: 200px;
+  height: 200px;
+  font-size: 40px;
+  background: white;
+}
+
+.confirm {
+  position: absolute;
+  bottom: 300px;
+  left: 50%;
+  width: 200px;
+  height: 100px;
+  font-size: 40px;
+  background: white;
+  transform: translate(-50%, 0);
+}

src/handleDojoin/index.js

+
+/*
+ * @Author: flyharvest
+ * @Date: 2020-07-15 11:38:44
+ * @LastEditTime: 2020-07-19 00:42:11
+ * @LastEditors: flyharvest
+ */
+import {
+  normallizeOptions
+} from '@lib/utils'
+
+// mock 是否需要增值
+function enable () {
+  return false
+}
+
+const source = 'handleDojoin'
+
+class HandleDojoin {
+  constructor (opts = {}) {
+    this.hooksDefine = [
+      { name: 'mediaMsg', type: 1 }
+    ]
+    this.hooks = normallizeOptions(opts, [
+      { name: 'mediaMsg', type: 1 }
+    ])
+    this.allHooksName = this.getHooksName(this.hooksDefine)
+  }
+
+  getHooksName (hooksDefine) {
+    return hooksDefine.map(e => e.name)
+  }
+
+  handle (res, opts = {}) {
+    this.tempHooks = normallizeOptions(opts, this.hooksDefine)
+    // 声明自己的promise
+    let solve
+    const handlePromise = new Promise(resolve => {
+      solve = resolve
+    })
+
+    const { success, data, code } = res
+    if (success) {
+      const { result } = data
+      const { lottery, creditsConsumeAlertMsg } = result
+      creditsConsumeAlertMsg && this.hooks.mediaMsg(creditsConsumeAlertMsg) && this.tempHooks.mediaMsg(creditsConsumeAlertMsg)
+      if (enable() && ['lucky', 'thanks', 'coupon'].includes(lottery.type)) {
+        solve({
+          type: 'showIncitve',
+          data: data,
+          source
+        })
+      } else {
+        switch (lottery.type) {
+          case 'lucky':
+          case 'coupon':
+            solve({
+              type: 'showCoupon',
+              data,
+              source
+            })
+            break
+          case 'thanks':
+            solve({
+              type: 'showThanks',
+              data,
+              source
+            })
+            break
+          case 'alipay':
+            solve({
+              type: 'showAlipay',
+              data,
+              source
+            })
+            break
+          case 'qb':
+            solve({
+              type: 'showQb',
+              data,
+              source
+            })
+            break
+          case 'bill':
+            solve({
+              type: 'showBill',
+              data,
+              source
+            })
+            break
+          case 'virtual':
+            solve({
+              type: 'showVirtual',
+              data,
+              source
+            })
+            break
+          case 'physical':
+            solve({
+              type: 'showVirtual',
+              data,
+              source
+            })
+            break
+          default:
+            solve({
+              type: 'showEror',
+              data,
+              source
+            })
+            break
+        }
+      }
+    } else if (code === '0100001') {
+      solve({
+        type: 'showRecomend',
+        data,
+        source
+      })
+    } else if (code === '0200004') {
+      solve({
+        type: 'showPreview',
+        data,
+        source
+      })
+    } else {
+      solve({
+        type: 'showError',
+        data,
+        source
+      })
+    }
+    return handlePromise
+  }
+}
+
+export default HandleDojoin

src/index.js

-/*
- * @Author: flyharvest
- * @Date: 2020-07-14 11:14:25
- * @LastEditTime: 2020-07-14 11:18:57
- * @LastEditors: flyharvest
- */
-
-import * as flexible from '@lib/flexible'
-import * as xhr from '@lib/xhr'
-
-export {
-  flexible,
-  xhr
-}

src/services/index.js

+/* eslint-disable */
+/*
+ * @Author: flyharvest
+ * @Date: 2020-07-15 09:46:20
+ * @LastEditTime: 2020-07-19 02:17:03
+ * @LastEditors: flyharvest
+ */
+import { normallizeOptions, CustomError } from '@lib/utils'
+var http = null
+var params = {}
+var config = {}
+
+function use (ajax, opts = {}) {
+  http = ajax
+  params = opts.params || {}
+  config = opts.cfg || {}
+}
+
+class DoJoin {
+  constructor (opts = {}) {
+    this.hooksDefine = [
+      {
+        name: 'beforeDojoin',
+        type: 1
+      }
+    ]
+    this.hooks = normallizeOptions(opts, this.hooksDefine)
+    this.allHooksName = this.getHooksName(this.hooksDefine)
+  }
+
+  getHooksName (hooksDefine) {
+    return hooksDefine.map(e => e.name)
+  }
+
+  start (opts = {}) {
+    this.tempHooks = normallizeOptions(opts, this.hooksDefine)
+    let data = {
+      ownData: '测试'
+    }
+    // 请求前给默认配置的钩子
+    const mid = this.hooks.beforeDojoin(data)
+    // 给临时传递进来的钩子
+    data = this.tempHooks.beforeDojoin(mid)
+
+    return http.get('/activity/doJoin', { data }).then(res => {
+      return res
+    }).catch((err) => {
+      return Promise.reject(new CustomError({
+        name: 'toast',
+        message: '获取网络失败',
+        source: 'services',
+        raw: err
+      }))
+    })
+  }
+}
+
+const services = {
+  use,
+  DoJoin
+}
+export default services

src/utils/index.js

+/*
+ * @Author: flyharvest
+ * @Date: 2020-07-15 09:51:43
+ * @LastEditTime: 2020-07-19 01:02:42
+ * @LastEditors: flyharvest
+ */
+
+function isObject (obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]'
+}
+
+function isFn (fn) {
+  return Object.prototype.toString.call(fn) === '[object Function]'
+}
+
+function noop (data) { return data }
+
+/**
+ * @description:  规范钩子。
+ * 1. 如果是同步钩子，没有或者不是函数就使用noop。
+ *    没有返回值，就返回入参
+ * 2. 如果是异步钩子，没有或者不是函数就直接返回参数。
+ *    没有then方法，包裹一层promise
+ * @example:
+ * @param {type}
+ * @return:
+ */
+function normallizeOptions (hookOpts = {}, hooksDefine = []) {
+  if (!isObject(hookOpts)) {
+    hookOpts = {}
+  }
+  const hooks = {}
+  hooksDefine.forEach(hook => {
+    const fn = hookOpts[hook.name]
+    switch (hook.type) {
+      // 同步钩子,且忽略返回值
+      case 1:
+      case 2:
+        if (!fn || !isFn(fn)) {
+          hooks[hook.name] = noop
+        } else {
+          hooks[hook.name] = (playload) => {
+            let result = fn(playload)
+            result = result === undefined ? playload : result
+            return result === undefined ? playload : result
+          }
+        }
+        break
+      case 3:
+      case 4:
+        if (fn && isFn(fn) && fn.then) {
+          hooks[hook.name] = fn
+        } else if (fn && isFn(fn) && !fn.then) {
+          hooks[hook.name] = (playload) => {
+            let result = fn(playload)
+            result = result === undefined ? playload : result
+            return Promise.resolve(result)
+          }
+        } else {
+          hooks[hook.name] = (data) => {
+            return Promise.resolve(data)
+          }
+        }
+        break
+      default:
+        break
+    }
+  })
+  return hooks
+}
+
+function CustomError ({ name, message, source, raw }) {
+  this.name = name || 'CustomError'
+  this.message = message || '未知错误'
+  this.source = source
+  this.raw = raw
+  this.stack = (new Error()).stack
+}
+CustomError.prototype = Object.create(Error.prototype)
+CustomError.prototype.constructor = CustomError
+
+export {
+  isFn,
+  isObject,
+  normallizeOptions,
+  noop,
+  CustomError
+}

test/couponModal/index.html

+<!--
+ * @Author: flyharvest
+ * @Date: 2020-07-14 10:30:48
+ * @LastEditTime: 2020-07-14 14:09:52
+ * @LastEditors: flyharvest
+--> 
+<!DOCTYPE html>
+<head>
+  <title>测试页面</title>
+  <style type="text/css">
+    * {
+      padding: 0;
+      margin: 0;
+      font-size: 0;
+    }
+
+    body {
+      width: 100vw;
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+</body>
\ No newline at end of file

test/couponModal/index.js

+/*
+ * @Author: flyharvest
+ * @Date: 2020-07-14 14:09:40
+ * @LastEditTime: 2020-07-14 14:10:14
+ * @LastEditors: flyharvest
+ */
+import * as rem from '@lib/flexible'
+rem.setViewPort()
+rem.init(750, 750)

test/handleDojoin/index.html

+<!--
+ * @Author: flyharvest
+ * @Date: 2020-07-14 10:30:48
+ * @LastEditTime: 2020-07-14 14:09:52
+ * @LastEditors: flyharvest
+--> 
+<!DOCTYPE html>
+<head>
+  <title>测试页面</title>
+  <style type="text/css">
+    * {
+      padding: 0;
+      margin: 0;
+      font-size: 0;
+    }
+
+    body {
+      width: 100vw;
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+</body>
\ No newline at end of file

test/handleDojoin/index.js

+/*
+ * @Author: flyharvest
+ * @Date: 2020-07-14 14:09:40
+ * @LastEditTime: 2020-07-19 02:15:36
+ * @LastEditors: flyharvest
+ */
+import * as rem from '@lib/flexible'
+import { ajax } from '@lib/xhr'
+import services from '@lib/services'
+import HandleDojoin from '@lib/handleDojoin'
+import { CustomError } from '@lib/utils'
+import CouponModal from '@lib/couponModal'
+import $ from 'jquery'
+import './index.less'
+
+rem.setViewPort()
+rem.init(750, 750)
+
+services.use(ajax)
+const DoJoin = services.DoJoin
+
+const dojoin = new DoJoin({
+  beforeDojoin (data) {
+    return {
+      haha: 123123
+    }
+  }
+})
+
+const couponModal = new CouponModal({
+  close (type) {
+    return type
+  },
+  replaceHtml (data) {
+    $(data).find('.content').css({
+      background: 'red'
+    })
+  }
+})
+
+const handleDojoin = new HandleDojoin({
+  mediaMsg (media) {
+    console.log(media + 'ss')
+  }
+})
+
+const allHooks = {
+  dojoin: dojoin.allHooksName,
+  handleDojoin: handleDojoin.allHooksName,
+  couponModal: couponModal.allHooksName
+}
+const handout = (opts = {}) => {
+  const cbs = {
+    dojoin: {},
+    handleDojoin: {},
+    couponModal: {}
+  }
+  for (const i in opts) {
+    if (opts[i]) {
+      for (const name in allHooks) {
+        if (allHooks[name].indexOf(i) > -1) {
+          cbs[name][i] = opts[i]
+        }
+      }
+    }
+  }
+  return cbs
+}
+const $doJoin = (opts) => {
+  const cbs = handout(opts)
+  console.log(cbs)
+  return dojoin.start(cbs.dojoin)
+    .then(res => {
+      return handleDojoin.handle(res, cbs.handleDojoin)
+    })
+    .then(res => {
+      return couponModal.show(res, cbs.couponModal)
+    })
+    .catch(err => {
+      if (err instanceof CustomError) {
+        console.log(err)
+      }
+      console.log(err)
+    })
+}
+
+const getDom = ({ couponModalResolve }) => {
+  const loading = $('<div class="loading"></div>')
+  loading.text('加载中...')
+  $('body').append(loading)
+  return new Promise(resolve => {
+    setTimeout(() => {
+      loading.remove()
+      const teshu = $('<div class="teshu"></div>')
+      teshu.text('我是特殊的广告  点我就关闭')
+      teshu.on('click', () => {
+        teshu.remove()
+        couponModalResolve({
+          type: 'confirmClose'
+        })
+      })
+      $('body').append(teshu)
+      resolve({ isReplaced: true })
+    }, 2000)
+  })
+}
+$doJoin()
+  .then(() => {
+    return $doJoin({
+      getDom
+    })
+  })
+  .then(() => {
+    $doJoin({
+      replaceHtml (data) {
+        $(data).find('.close').css({
+          background: 'blue'
+        })
+      }
+    })
+  })

test/handleDojoin/index.less

+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 200px;
+  height: 100px;
+  font-size: 30px;
+  background: rgba(0, 0, 0, 0.4);
+  transform: translate(-50%, -50%);
+}
+
+.teshu {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  height: 400px;
+  font-size: 400px;
+  font-size: 30px;
+  background: rgba(0, 0, 0, 0.4);
+  transform: translate(-50%, -50%);
+}

test/services/index.html

+<!--
+ * @Author: flyharvest
+ * @Date: 2020-07-14 10:30:48
+ * @LastEditTime: 2020-07-14 14:09:52
+ * @LastEditors: flyharvest
+--> 
+<!DOCTYPE html>
+<head>
+  <title>测试页面</title>
+  <style type="text/css">
+    * {
+      padding: 0;
+      margin: 0;
+      font-size: 0;
+    }
+
+    body {
+      width: 100vw;
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+</body>
\ No newline at end of file

test/services/index.js

+/*
+ * @Author: flyharvest
+ * @Date: 2020-07-14 14:09:40
+ * @LastEditTime: 2020-07-15 15:24:19
+ * @LastEditors: flyharvest
+ */
+import * as rem from '@lib/flexible'
+import { ajax } from '@lib/xhr'
+import services from '@lib/services'
+
+rem.setViewPort()
+rem.init(750, 750)
+
+services.use(ajax)
+const doJoin = services.doJoin
+doJoin.$on('doJoinBefore', (data) => {
+  return {
+    haha: 'xx'
+  }
+})
+doJoin({ test: 1 })

test/tapable-test/index.html

+<!--
+ * @Author: flyharvest
+ * @Date: 2020-07-14 10:30:48
+ * @LastEditTime: 2020-07-14 14:09:52
+ * @LastEditors: flyharvest
+--> 
+<!DOCTYPE html>
+<head>
+  <title>测试页面</title>
+  <style type="text/css">
+    * {
+      padding: 0;
+      margin: 0;
+      font-size: 0;
+    }
+
+    body {
+      width: 100vw;
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+</body>
\ No newline at end of file

test/tapable-test/index.js

+/* eslint-disable */
+/*
+ * @Author: flyharvest
+ * @Date: 2020-07-14 14:09:40
+ * @LastEditTime: 2020-07-18 21:25:50
+ * @LastEditors: flyharvest
+ */
+import * as rem from '@lib/flexible'
+rem.setViewPort()
+rem.init(750, 750)
+
+import {
+  SyncHook,
+  SyncBailHook,
+  SyncWaterfallHook,
+  SyncLoopHook,
+  AsyncParallelHook,
+  AsyncParallelBailHook,
+  AsyncSeriesHook,
+  AsyncSeriesBailHook,
+  AsyncSeriesWaterfallHook 
+} from 'tapable'
+
+const hook = new SyncWaterfallHook(['name'])
+
+const hook2 = new AsyncSeriesWaterfallHook(['name'])
+
+
+hook.tap('core', (name) => {
+  console.log(name)
+  return name + 'core'
+})
+hook.tap('skin', (name) => {
+  return name + 'skin'
+})
+
+hook2.tapPromise('core', (name) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(name + 'core')
+    }, 1000)
+  })
+})
+hook2.tapPromise('skin', (name) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(name + 'skin')
+    }, 1000)
+  })
+})
+hook.intercept({
+  tap(name) {
+    console.log(name)
+    console.log('我被触发了')
+  }
+})
+hook2.intercept({
+  tap(name) {
+    console.log(name)
+  }
+})
+const haha = hook.call('haha')
+
+console.log(haha)
+
+hook.promise('lala').then(res => {
+  console.log(res)
+})
+
+
+

test/utils/index.html

+<!--
+ * @Author: flyharvest
+ * @Date: 2020-07-14 10:30:48
+ * @LastEditTime: 2020-07-14 14:09:52
+ * @LastEditors: flyharvest
+--> 
+<!DOCTYPE html>
+<head>
+  <title>测试页面</title>
+  <style type="text/css">
+    * {
+      padding: 0;
+      margin: 0;
+      font-size: 0;
+    }
+
+    body {
+      width: 100vw;
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+</body>
\ No newline at end of file

test/utils/index.js

+/*
+ * @Author: flyharvest
+ * @Date: 2020-07-14 14:09:40
+ * @LastEditTime: 2020-07-14 14:10:14
+ * @LastEditors: flyharvest
+ */
+import * as rem from '@lib/flexible'
+rem.setViewPort()
+rem.init(750, 750)