Skip to content

A
activity-core
Commit 047b16e0 authored by liupengfei's avatar liupengfei
Browse files
Options

栗子

parent 1cb76ffa
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 516 deletions
src/couponModal/index.js
View file @ 047b16e0
/*
* @Author: flyharvest
* @Date: 2020-07-15 15:50:45
* @LastEditTime: 2020-07-19 14:09:11
* @LastEditTime: 2020-07-20 15:38:44
* @LastEditors: flyharvest
*/
/* eslint-disable*/
import $ from 'jquery'
import { normallizeOptions, normallizeEvent, WATERFALL, ASYNCWATERFALL } from '@lib/utils'
import { createHooks } from '@lib/utils'
import './index.less'
class CouponModal {
constructor(opts) {
constructor() {
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}
'confirmClick',
'closeClick',
'afterClose',
'contentClick',
'replaceHtml',
'modifyDom'
]
this.hooks = normallizeOptions(opts, this.hooksDefine)
this.allHooksName = this.getHooksName(this.hooksDefine)
this.hooks = createHooks(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
})
}
}
class CouponModalEvent {
constructor(opts) {
this.hooksDefine = [
{ name: 'confirmClick', type: WATERFALL },
{ name: 'closeClick', type: WATERFALL },
{ name: 'afterClose', type: WATERFALL },
{ name: 'contentClose', type: WATERFALL },
{ name: 'replaceHtml', type: WATERFALL },
{ name: 'getDom', type: ASYNCWATERFALL}
]
this.hooks = normallizeEvent(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">
......@@ -144,7 +36,7 @@ class CouponModalEvent {
`
return Promise.resolve(dom)
}
show (data) {
start (data) {
this.data = data
this.showPromise = new Promise(resolve => {
this.resolve = resolve
......@@ -155,17 +47,19 @@ class CouponModalEvent {
}, content))
}
// 不用默认的弹层，替换自定义弹层。
this.hooks.getDom.promise({couponModalResolve: domResolve})
this.hooks.replaceHtml.promise({couponModalResolve: domResolve})
.then(res => {
if (res.isReplaced) {
if (res && res.isReplaced) {
} else {
this.init(data)
.then(dom => {
this.el = $(dom)
this.el = this.hooks.replaceHtml.call(this.el)
this.events()
$('body').append(this.el)
this.hooks.modifyDom.promise({el: this.el})
.then(() => {
this.events()
$('body').append(this.el)
})
})
}
})
......@@ -178,24 +72,30 @@ class CouponModalEvent {
const content = $(this.el).find('.content')
$(content).on('click', () => {
let res = this.hooks.closeClick.call()
if (res === true) {
this.close('contentClick')
}
this.hooks.closeClick.promise()
.then(res => {
if (res === true) {
this.close('contentClick')
}
})
})
$(confirm).on('click', () => {
let res = this.hooks.closeClick.call()
if (res === true || res === undefined) {
this.close('confirmClick')
}
this.hooks.closeClick.promise()
.then(res => {
if (res === true || res === undefined) {
this.close('confirmClick')
}
})
})
$(close).on('click', () => {
let res = this.hooks.closeClick.call()
if (res === true || res === undefined) {
this.close('closeClick')
}
this.hooks.closeClick.promise()
.then(res => {
if (res === true || res === undefined) {
this.close('closeClick')
}
})
})
}
......@@ -210,6 +110,5 @@ class CouponModalEvent {
}
export {
CouponModal,
CouponModalEvent
CouponModal
}
src/handleDojoin/index.js
View file @ 047b16e0
......@@ -2,13 +2,11 @@
/*
* @Author: flyharvest
* @Date: 2020-07-15 11:38:44
* @LastEditTime: 2020-07-19 13:56:30
* @LastEditTime: 2020-07-20 16:54:19
* @LastEditors: flyharvest
*/
import {
normallizeOptions,
normallizeEvent,
WATERFALL
createHooks
} from '@lib/utils'
// mock 是否需要增值
......@@ -19,240 +17,128 @@ function enable () {
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)
constructor () {
this.hooksDefine = ['mediaMsg', 'afterHandleDojoin']
this.hooks = createHooks(this.hooksDefine)
}
getHooksName (hooksDefine) {
return hooksDefine.map(e => e.name)
}
handle (res, opts = {}) {
this.tempHooks = normallizeOptions(opts, this.hooksDefine)
start (res) {
// 声明自己的promise
let solve
const handlePromise = new Promise(resolve => {
solve = resolve
})
const { success, data, code } = res
let modalType = {}
let mediaMsg = ''
if (success) {
const { result } = data
const { lottery, creditsConsumeAlertMsg } = result
creditsConsumeAlertMsg && this.hooks.mediaMsg(creditsConsumeAlertMsg) && this.tempHooks.mediaMsg(creditsConsumeAlertMsg)
mediaMsg = creditsConsumeAlertMsg
if (enable() && ['lucky', 'thanks', 'coupon'].includes(lottery.type)) {
solve({
modalType = {
type: 'showIncitve',
data: data,
source
})
}
} else {
switch (lottery.type) {
case 'lucky':
case 'coupon':
solve({
modalType = {
type: 'showCoupon',
data,
source
})
}
break
case 'thanks':
solve({
modalType = {
type: 'showThanks',
data,
source
})
}
break
case 'alipay':
solve({
modalType = {
type: 'showAlipay',
data,
source
})
}
break
case 'qb':
solve({
modalType = {
type: 'showQb',
data,
source
})
}
break
case 'bill':
solve({
modalType = {
type: 'showBill',
data,
source
})
}
break
case 'virtual':
solve({
modalType = {
type: 'showVirtual',
data,
source
})
}
break
case 'physical':
solve({
modalType = {
type: 'showVirtual',
data,
source
})
}
break
default:
solve({
modalType = {
type: 'showEror',
data,
source
})
}
break
}
}
} else if (code === '0100001') {
solve({
modalType = {
type: 'showRecomend',
data,
source
})
}
} else if (code === '0200004') {
solve({
modalType = {
type: 'showPreview',
data,
source
})
}
} else {
solve({
modalType = {
type: 'showError',
data,
source
})
}
}
return handlePromise
}
}
class HandleDojoinEvent {
constructor (opts = {}) {
this.hooksDefine = [
{ name: 'mediaMsg', type: WATERFALL }
]
this.hooks = normallizeEvent([
{ name: 'mediaMsg', type: WATERFALL }
])
this.allHooksName = this.getHooksName(this.hooksDefine)
}
getHooksName (hooksDefine) {
return hooksDefine.map(e => e.name)
}
handle (res) {
// 声明自己的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)
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
if (mediaMsg) {
return this.hooks.mediaMsg.promise(mediaMsg)
.then(() => {
this.hooks.afterHandleDojoin.promise(modalType)
.then(res => {
solve(res)
})
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
})
this.hooks.afterHandleDojoin.promise(modalType)
.then(res => {
solve(res)
})
}
return handlePromise
}
}
export {
HandleDojoin,
HandleDojoinEvent
HandleDojoin
}
src/services/index.js
View file @ 047b16e0
......@@ -2,10 +2,10 @@
/*
* @Author: flyharvest
* @Date: 2020-07-15 09:46:20
* @LastEditTime: 2020-07-19 12:41:12
* @LastEditTime: 2020-07-20 15:43:40
* @LastEditors: flyharvest
*/
import { normallizeOptions, CustomError, WATERFALL, normallizeEvent} from '@lib/utils'
import { createHooks } from '@lib/utils'
var http = null
var params = {}
......@@ -18,82 +18,33 @@ function use (ajax, opts = {}) {
}
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
}))
})
}
}
class DoJoinEvent {
constructor() {
this.hooksDefine = [
{
name: 'beforeDojoin',
type: WATERFALL
}
]
this.hooks = normallizeEvent(this.hooksDefine)
this.allHooksName = this.getHooksName(this.hooksDefine)
}
getHooksName(hooksDefine) {
return hooksDefine.map(e => e.name)
constructor () {
this.hooksDefine = ['beforeDojoin', 'afterDojoin']
this.hooks = createHooks(this.hooksDefine)
}
start () {
let data = {
ownData: '测试'
}
data = this.hooks.beforeDojoin.call(data)
return http.get('/activity/doJoin', { data }).then(res => {
return res
}).catch((err) => {
return Promise.reject(new CustomError({
name: 'toast',
message: '获取网络失败',
source: 'services',
raw: err
}))
})
console.log(this.hooks.beforeDojoin)
return this.hooks.beforeDojoin.promise(data)
.then(beforeDojoin => {
data = beforeDojoin ? beforeDojoin : data
return http.get('/activity/doJoin', {data})
.then(doJoinResult => {
return this.hooks.afterDojoin.promise(doJoinResult)
.then(afterDojoin => {
console.log(afterDojoin)
return afterDojoin ? afterDojoin : doJoinResult
})
})
})
}
}
const services = {
use,
DoJoin,
DoJoinEvent
DoJoin
}
export default services
src/utils/index.js
View file @ 047b16e0
/*
* @Author: flyharvest
* @Date: 2020-07-15 09:51:43
* @LastEditTime: 2020-07-19 16:25:44
* @LastEditTime: 2020-07-20 15:25:57
* @LastEditors: flyharvest
*/
import { SyncWaterfallHook, AsyncSeriesWaterfallHook } from 'tapable'
const WATERFALL = 'SyncWaterfallHook'
const ASYNCWATERFALL = 'AsyncSeriesWaterfallHook'
import { AsyncSeriesBailHook } from 'tapable'
function isObject (obj) {
return Object.prototype.toString.call(obj) === '[object Object]'
......@@ -18,73 +16,10 @@ function isFn (fn) {
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 normallizeEvent (hooksDefine = []) {
function createHooks (hooksDefine = []) {
const hooks = {}
hooksDefine.forEach(hook => {
switch (hook.type) {
case WATERFALL:
hooks[hook.name] = new SyncWaterfallHook(['data'])
break
case ASYNCWATERFALL:
hooks[hook.name] = new AsyncSeriesWaterfallHook(['data'])
break
default:
break
}
hooksDefine.forEach(name => {
hooks[name] = new AsyncSeriesBailHook(['data'])
})
return hooks
}
......@@ -102,10 +37,7 @@ CustomError.prototype.constructor = CustomError
export {
isFn,
isObject,
normallizeOptions,
noop,
CustomError,
normallizeEvent,
WATERFALL,
ASYNCWATERFALL
createHooks
}
test/tapable-test/index.js
View file @ 047b16e0
......@@ -2,15 +2,15 @@
/*
* @Author: flyharvest
* @Date: 2020-07-14 14:09:40
* @LastEditTime: 2020-07-20 10:45:36
* @LastEditTime: 2020-07-20 15:54:52
* @LastEditors: flyharvest
*/
import * as rem from '@lib/flexible'
import { ajax } from '@lib/xhr'
import services from '@lib/services'
import { HandleDojoinEvent } from '@lib/handleDojoin'
import { CouponModalEvent } from '@lib/couponModal'
import { WATERFALL, isFn } from '@lib/utils'
import { HandleDojoin } from '@lib/handleDojoin'
import { CouponModal } from '@lib/couponModal'
import { isFn } from '@lib/utils'
import $ from 'jquery'
import './index.less'
......@@ -18,56 +18,46 @@ rem.setViewPort()
rem.init(750, 750)
services.use(ajax)
const DoJoinEvent = services.DoJoinEvent
const Dojoin = services.DoJoin
const dojoin = new DoJoinEvent()
const dojoin = new Dojoin()
const couponModal = new CouponModalEvent()
const couponModal = new CouponModal()
const handleDojoin = new HandleDojoinEvent()
const handleDojoin = new HandleDojoin()
const handOut = (opts, sign) => {
const handOut = (opts, sign, external = {}) => {
const steam = [dojoin, handleDojoin, couponModal]
steam.forEach(e => {
e.hooksDefine.forEach(hooksDesc => {
if (hooksDesc.type === WATERFALL) {
const cb = (data) => {
const fn = opts[hooksDesc.name]
if (fn && isFn(fn)) {
return fn(data)
}
e.hooksDefine.forEach(name => {
const cb = (data) => {
const fn = opts[name]
if (fn && isFn(fn) && fn.then) {
return fn(data, external[name])
} else if (fn && isFn(fn)) {
return Promise.resolve(fn(data, external[name]))
} else {
return Promise.resolve()
}
e.hooks[hooksDesc.name].tap(sign, cb)
} else {
const cb = (data) => {
const fn = opts[hooksDesc.name]
if (fn && isFn(fn) && fn.then) {
return fn(data)
} else if (fn && isFn(fn)) {
return Promise.resolve(fn(data))
} else {
return Promise.resolve(data)
}
}
e.hooks[hooksDesc.name].tapPromise(sign, cb)
}
e.hooks[name].tapPromise(sign, cb)
})
})
}
const coreMethods = {
beforeDojoin () {
beforeDojoin (data) {
console.log('我被调用-core')
return {
haha: 123123
}
},
mediaMsg (media) {
mediaMsg () {
console.log(media + 'ss')
},
replaceHtml (data) {
console.log(1)
$(data).find('.content').css({
modifyDom ({ el }) {
$(el).find('.content').css({
background: 'red'
})
}
......@@ -81,20 +71,28 @@ const coreMethods = {
* @return:
*/
const methods = {
replaceHtml (data) {
console.log('skinDefault')
$(data).find('.confirm').css({
beforeDojoin(data) {
console.log('我被调用了-skinName')
return {
lala: '123213'
}
},
modifyDom ({ el }, fn) {
console.log(fn)
$(el).find('.confirm').css({
background: 'green'
})
})
return {el}
}
}
handOut(methods, 'skinDefault')
handOut(methods, 'skinDefault', coreMethods)
handOut(coreMethods, 'core')
let inited = false
const tempHandOut = (opts, sign) => {
const tempHandOut = (opts, sign, external1 = {}, external2 = {}) => {
if (inited) {
tempHandOut.setOpts(opts)
return
......@@ -103,34 +101,21 @@ const tempHandOut = (opts, sign) => {
tempHandOut.setOpts(opts)
const steam = [dojoin, handleDojoin, couponModal]
steam.forEach(e => {
e.hooksDefine.forEach(hooksDesc => {
if (hooksDesc.type === WATERFALL) {
const cb = (data) => {
const fn = tempHandOut.getOpts()[hooksDesc.name]
if (fn && isFn(fn)) {
return fn(data)
}
e.hooksDefine.forEach(name => {
const cb = (data) => {
const fn = tempHandOut.getOpts()[name]
if (fn && isFn(fn) && fn.then) {
return fn(data, external1[name], external2[name])
} else if (fn && isFn(fn)) {
return Promise.resolve(fn(data, external1[name], external2[name]))
} else {
return Promise.resolve()
}
e.hooks[hooksDesc.name].tap({
name: sign,
stage: 100
}, cb)
} else {
const cb = (data) => {
const fn = tempHandOut.getOpts()[hooksDesc.name]
if (fn && isFn(fn) && fn.then) {
return fn(data)
} else if (fn && isFn(fn)) {
return Promise.resolve(fn(data))
} else {
return Promise.resolve(data)
}
}
e.hooks[hooksDesc.name].tapPromise({
name: sign,
stage: 100
}, cb)
}
e.hooks[name].tapPromise({
name: sign,
stage: -1
}, cb)
})
})
}
......@@ -144,17 +129,20 @@ tempHandOut.getOpts = () => {
const $doJoin = (opts = {}) => {
tempHandOut(opts, 'skinTemp')
return dojoin.start()
.then(res => {
return handleDojoin.handle(res)
console.log(dojoin)
return dojoin.start().then(res => {
return handleDojoin.start(res)
})
.then(res => {
return couponModal.show(res)
return couponModal.start(res)
})
.then((data) => {
console.log(data)
})
}
let times = 0
const getDom = ({ couponModalResolve }) => {
const replaceHtml = ({ couponModalResolve }) => {
console.log(++times)
const loading = $('<div class="loading"></div>')
loading.text('加载中...')
......@@ -175,18 +163,23 @@ const getDom = ({ couponModalResolve }) => {
}, 2000)
})
}
$doJoin()
$doJoin({
beforeDojoin (data) {
console.log('我被调用了-特殊')
}
})
.then(() => {
return $doJoin({
getDom
replaceHtml
})
})
.then(() => {
$doJoin({
replaceHtml (data) {
$(data).find('.close').css({
modifyDom ({el}) {
$(el).find('.close').css({
background: 'blue'
})
return {el}
}
})
})
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment