import {
|
isFn,
|
noop
|
} from 'uni-shared'
|
|
import {
|
wrapperMPEvent
|
} from 'uni-helpers/patch'
|
|
import {
|
VD_SYNC,
|
UI_EVENT,
|
PAGE_CREATE,
|
PAGE_CREATED,
|
MOUNTED_DATA,
|
UPDATED_DATA,
|
VD_SYNC_VERSION
|
} from '../../../constants'
|
|
import {
|
generateId
|
} from '../../../helpers/util'
|
|
import {
|
removeVdSync,
|
registerVdSync
|
} from '../subscribe-handlers/on-vd-sync'
|
|
import {
|
vdSyncCallbacks
|
} from '../subscribe-handlers/on-vd-sync-callback'
|
|
import {
|
hookKeyboardEvent
|
} from './keyboard'
|
|
import parseComponentCreateOptions from './parse-component-create-options'
|
|
function wrapperEvent (event) {
|
event.preventDefault = noop
|
event.stopPropagation = noop
|
return wrapperMPEvent(event)
|
}
|
|
const handleVdData = {
|
[UI_EVENT]: function onUIEvent (vdBatchEvent, vd) {
|
vdBatchEvent.forEach(([cid, nid, event]) => {
|
nid = String(nid)
|
const target = vd.elements.find(target => target.cid === cid && target.nid === nid)
|
if (!target) {
|
if (process.env.NODE_ENV !== 'production') {
|
console.error(`event handler[${cid}][${nid}] not found`)
|
}
|
return
|
}
|
const type = event.type
|
const mpEvent = wrapperEvent(event)
|
if (type === 'focus' || type === 'blur') {
|
hookKeyboardEvent(mpEvent, event => {
|
target.dispatchEvent(type, event)
|
})
|
} else {
|
target.dispatchEvent(type, mpEvent)
|
}
|
})
|
}
|
}
|
|
function onVdSync (vdBatchData, vd) {
|
vdBatchData.forEach(([type, vdData]) => {
|
handleVdData[type](vdData, vd)
|
})
|
}
|
|
export class VDomSync {
|
constructor (pageId, pagePath, pageQuery, pageVm) {
|
this.pageId = pageId
|
this.pagePath = pagePath
|
this.pageQuery = pageQuery
|
this.pageVm = pageVm
|
this.batchData = []
|
this.vms = Object.create(null)
|
this.initialized = false
|
|
this.pageCreateData = false
|
|
this.elements = [] // 目前仅存储事件 element
|
|
this._init()
|
}
|
|
_init () {
|
registerVdSync(this.pageId, (vdBatchData) => {
|
onVdSync(vdBatchData, this)
|
})
|
}
|
|
addMountedVm (vm) {
|
vm._$mounted() // 触发vd数据同步
|
this.addVdSyncCallback(function mounted () {
|
vm.__call_hook('mounted')
|
})
|
}
|
|
addUpdatedVm (vm) {
|
vm._$updated() // 触发vd数据同步
|
this.addVdSyncCallback(function mounted () {
|
vm.__call_hook('updated')
|
})
|
}
|
|
addVdSyncCallback (callback) {
|
isFn(callback) && vdSyncCallbacks.push(callback)
|
}
|
|
getVm (id) {
|
return this.vms[id]
|
}
|
|
addVm (vm) {
|
const id = vm._$id
|
const oldVm = this.vms[id]
|
if (oldVm) {
|
const newId = generateId(oldVm, oldVm.$parent, VD_SYNC_VERSION)
|
oldVm._$id = newId
|
this.vms[newId] = oldVm
|
this.elements.forEach(element => {
|
const cid = element.cid
|
element.cid = cid === id ? newId : cid
|
})
|
}
|
this.vms[id] = vm
|
}
|
|
removeVm (vm) {
|
const cid = vm._$id
|
if (vm === this.vms[cid]) { // 仅相同vm的才移除，否则保留
|
// 目前同一位置的vm，cid均一样
|
// 移除尚未同步的data
|
this.batchData = this.batchData.filter(data => data[1][0] !== cid)
|
delete this.vms[cid]
|
}
|
}
|
|
addElement (elm) {
|
this.elements.indexOf(elm) === -1 && this.elements.push(elm)
|
}
|
|
removeElement (elm) {
|
const elmIndex = this.elements.indexOf(elm)
|
if (elmIndex === -1) {
|
if (process.env.NODE_ENV !== 'production') {
|
console.error(`removeElement[${elm.cid}][${elm.nid}] not found`)
|
}
|
return
|
}
|
this.elements.splice(elmIndex, 1)
|
}
|
|
push (type, cid, data, options) {
|
const typeData = [cid, data]
|
if (options) {
|
typeData.push(options)
|
}
|
this.batchData.push([type, typeData])
|
}
|
|
find (type, cid) {
|
return this.batchData.find(data => data[0] === type && data[1][0] === cid)
|
}
|
|
sendPageCreate (data) {
|
this.pageCreateData = data
|
UniServiceJSBridge.publishHandler(VD_SYNC, {
|
data: [
|
[PAGE_CREATE, data]
|
],
|
options: {
|
timestamp: Date.now()
|
}
|
}, [this.pageId])
|
}
|
|
flush () {
|
if (!this.initialized) {
|
this.initialized = true
|
this.batchData.push([PAGE_CREATED, [this.pageId, this.pagePath, this.pageQuery]])
|
}
|
const batchData = this.batchData.filter(data => {
|
if (data[0] === UPDATED_DATA && !Object.keys(data[1][1]).length) {
|
return false
|
}
|
return true
|
})
|
this.batchData.length = 0
|
if (batchData.length) {
|
UniServiceJSBridge.publishHandler(VD_SYNC, {
|
data: batchData,
|
options: {
|
timestamp: Date.now()
|
}
|
}, [this.pageId])
|
}
|
}
|
|
restorePageCreate () {
|
this.batchData.push([PAGE_CREATE, this.pageCreateData])
|
}
|
|
restoreMountedData () {
|
const addMountedData = (vm) => {
|
if (vm._$id) {
|
this.push(MOUNTED_DATA, vm._$id, vm._$data, parseComponentCreateOptions(vm))
|
}
|
// TODO vue 中 $children 顺序不可靠，可能存在恢复误差
|
vm.$children.forEach(childVm => addMountedData(childVm))
|
}
|
addMountedData(this.pageVm)
|
}
|
|
restorePageCreated () {
|
this.batchData.push([PAGE_CREATED, [this.pageId, this.pagePath, this.pageQuery]])
|
}
|
|
restore () {
|
this.initialized = true
|
this.batchData.length = 0
|
|
this.restorePageCreate()
|
this.restoreMountedData()
|
this.restorePageCreated()
|
|
this.flush()
|
}
|
|
destroy () {
|
this.batchData.length = 0
|
this.vms = Object.create(null)
|
this.initialized = false
|
this.elements.length = 0
|
removeVdSync(this.pageId)
|
}
|
}
|
