目錄
UI層的page 實(shí)際上是一個(gè) 基于 vue開(kāi)發(fā)的頁(yè)面泼差。
前面我們說(shuō)到族扰，我們使用 Component 函數(shù)來(lái)包裹了開(kāi)發(fā)者 options 代碼熬北。在這一層，我們是不能運(yùn)行開(kāi)發(fā)者的代碼的耘斩，所以重新修改了返回?cái)?shù)據(jù)潭兽。
改寫(xiě)返回 options
function createComponentOptions(
options,
{ route, components }
) {
const pid = parseInt(frameElement.dataset.pid)
const dataKeys = []
for (const k in options.data) {
dataKeys.push(k)
}
const ret = {
data() {
return data
},
computed: {},
methods: {},
watch: {},
created() {
const cid = this._uid
const initData = {}
dataKeys.forEach(v => {
initData[v] = this[v]
})
const postData = {
compType,
route,
cmd: COMPONENT_CREATED,
initData
}
postMessageToLogic(postData, cid, pid)
},
mounted() {
postMessageToLogic(
{
cmd: COMPONENT_MOUNTED
},
this._uid,
pid
)
},
beforeDestroy() {
postMessageToLogic(
{
cmd: COMPONENT_BEFORE_DESTROY
},
this._uid,
pid
)
}
}
...
return ret
}
改寫(xiě)methods
開(kāi)發(fā)者寫(xiě)的 methods 函數(shù)中，有些是用于獨(dú)立方法王浴，有些是事件回調(diào)脆炎，其中只有跟模板中對(duì)應(yīng)事件處理方法才是有作用的，需要把他們改成通知logic層氓辣。鑒于從 html模板中分析出方法名比較復(fù)雜秒裕，先默認(rèn)全部按事件回調(diào)處理，不是真正的事件的methods方法在項(xiàng)目運(yùn)行中不會(huì)執(zhí)行（性能優(yōu)化的時(shí)候這是一個(gè)優(yōu)化點(diǎn)）钞啸。
function handleMethod(name) {
ret.methods[name] = function(e) {
postMessageToLogic(
{
cmd: COMPONENT_EVENT,
methodName: name,
handleEvent: new BaseEvent(e)
},
this._uid,
pid
)
}
}
跟小程序一樣几蜻，事件event是特殊處理過(guò)的。
擴(kuò)展問(wèn)題
- page.js中体斩，或多或少會(huì)引用其他js梭稚，在 UI 層怎么解決引入帶來(lái)的安全和性能問(wèn)題？
- 子組件應(yīng)該怎么實(shí)現(xiàn)絮吵？
