? ? ? ? 接下來就是將多頁面組合在一個(gè)頁面上，首先要將每個(gè)頁面對象化潦闲，通過調(diào)用對象牵啦，來實(shí)現(xiàn)頁面的切換，比如要從index頁面跳轉(zhuǎn)到register頁面摊腋，只需要在js上調(diào)用類似以下的語句
? ? ? ? indexPage.unit();? //頁面卸載
? ? ? ? registerPage.init();? //頁面裝載
下圖表示頁面卸載以及裝載的過程
根據(jù)圖上的流程沸版，我們創(chuàng)建Page對象，代碼如下
? ? ? ? Page對象的getDomObj與removeDomObj方法兴蒸，需要手動重寫视粮，不然調(diào)用原型函數(shù)提前報(bào)錯。新建Page對象中傳入一個(gè)id类咧，對應(yīng)的script里面存放著html馒铃。因此將html全部通過script標(biāo)簽全部引入head標(biāo)簽中蟹腾。如下代碼
css代碼完全不變痕惋，和上一篇的完全相同
在頁面的body元素上加入容器，放置頁面娃殖，如下圖
在js上值戳，我們新建4個(gè)對象，分別如下代碼
indexPage對象
loginPage對象
goalPage對象
最后通過該語句初始化頁面
? ? ? ? indexPage.init(pageContainer);
? ? ? ? 成功的將多頁面拼湊到了一個(gè)頁面上炉爆，切換的時(shí)候不需要等待頁面切換之前的白屏堕虹。然而卻多了很多步驟，需要手動的去清除dom與解綁事件芬首。我們需要新的一個(gè)對象去管理Page對象赴捞，把無關(guān)于業(yè)務(wù)邏輯的事情都抽離出來，讓Page更專注于業(yè)務(wù)邏輯郁稍。
總結(jié)：很多時(shí)候赦政，可以通過面向?qū)ο螅缓笸ㄟ^操作對象來對代碼以及業(yè)務(wù)邏輯進(jìn)行更好的管理耀怜。在這里恢着，可以不采用Page對象同樣可以進(jìn)行同樣的操作，為了后續(xù)業(yè)務(wù)的增加财破，導(dǎo)致頁面的不斷增加掰派，通過管理對象會讓開發(fā)更加省力。如何創(chuàng)建的對象模板左痢，需要開發(fā)者自己抽出流程的共同點(diǎn)靡羡，比如畫一張流程圖是非常有必要的系洛，然后根據(jù)流程圖進(jìn)行實(shí)現(xiàn)過程。
后續(xù)更新：下一篇將引入新的對象亿眠，用于管理Page對象碎罚，把除了業(yè)務(wù)邏輯以外的操作轉(zhuǎn)移到該對象去實(shí)現(xiàn)，比如這里的解除事件纳像，清理dom對象以及后續(xù)的更改title荆烈， history，過場動畫等竟趾。
請用移動端設(shè)備打開該案例案例鏈接
原生開發(fā)移動web單頁面(step by step)1——傳統(tǒng)頁面的開發(fā)
原生開發(fā)移動web單頁面(step by step)3——App對象
原生開發(fā)移動web單頁面(step by step)4——tap事件與slide事件
原生開發(fā)移動web單頁面(step by step)5——nodejs服務(wù)器的搭建
原生開發(fā)移動web單頁面(step by step)6——history api應(yīng)用
