? ? ? ? 接下來就是將多頁面組合在一個(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方法，需要手動(dòng)重寫，不然調(diào)用原型函數(shù)提前報(bào)錯(cuò)。新建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í)候不需要等待頁面切換之前的白屏。然而卻多了很多步驟，需要手動(dòng)的去清除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)致頁面的不斷增加，通過管理對象會(huì)讓開發(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，過場動(dòng)畫等。
請用移動(dòng)端設(shè)備打開該案例案例鏈接
原生開發(fā)移動(dòng)web單頁面(step by step)1——傳統(tǒng)頁面的開發(fā)
原生開發(fā)移動(dòng)web單頁面(step by step)3——App對象
原生開發(fā)移動(dòng)web單頁面(step by step)4——tap事件與slide事件
原生開發(fā)移動(dòng)web單頁面(step by step)5——nodejs服務(wù)器的搭建
原生開發(fā)移動(dòng)web單頁面(step by step)6——history api應(yīng)用
