?????? 為了讓Page對(duì)象更專注于業(yè)務(wù)邏輯，將其它的操作轉(zhuǎn)移出去，因此引入了App對(duì)象。App對(duì)象起到了管理多個(gè)Page對(duì)象的作用。有了App對(duì)象后， Page對(duì)象只需要負(fù)責(zé)渲染頁(yè)面以及綁定事件，其它的都讓App自動(dòng)幫Page解決。類似以下代碼：
???? 首先創(chuàng)建一個(gè)App對(duì)象
???? var app = new App();
???? 再創(chuàng)建一個(gè)Page對(duì)象，只需要重寫getDomObj方法以及相關(guān)的事件方法。然后調(diào)用
???? var indexPage = new Page();
???? indexPage.getDomObj = function () {};
???? 相關(guān)事件的方法定義（省略），最后通過(guò)一下代碼切換
???? app.render(indexPage)；
???? 啟用app.render方法后，將會(huì)自動(dòng)卸載之前的頁(yè)面，將當(dāng)前的頁(yè)面初始化插入頁(yè)面中，從而簡(jiǎn)化了開發(fā)流程。App對(duì)象的代碼如下
??????? 讓App對(duì)象更好的管理Page對(duì)象，改造Page對(duì)象，新增_dispose和_initialize方法，分別指向裝載和卸載操作，Page構(gòu)造函數(shù)如下代碼
??????? 其中domList與eventList存放著對(duì)應(yīng)dom元素以及事件方法，通過(guò)規(guī)范化的數(shù)據(jù)結(jié)構(gòu)，用于自動(dòng)化綁定以及卸載。
???????? 這里是卸載與裝載的實(shí)現(xiàn)，分別調(diào)用了以下方法
???????? _removeEventListeners(): 移除所有的掛在頁(yè)面的事件
??????? _removeDom() : 清除dom元素
??????? getDomObj(container): 緩存元素以及緩存事件存于domList和eventList???? 中，然后通過(guò)_addEventListener()方法一起綁定，需要開發(fā)者重寫
??????? _addEventListeners(); 將事件綁定到頁(yè)面上。
??????? 這里的命名規(guī)則，內(nèi)部使用的方法以下劃線開頭，提供用戶實(shí)現(xiàn)的以駝峰命名。
?????? 以下為domList與eventList存儲(chǔ)數(shù)據(jù)的格式
?????? domList為簡(jiǎn)單對(duì)象，以key-value的格式， value代表dom元素，通過(guò)attachDom方法來(lái)存儲(chǔ)，比如page.attachDom("#id", "id", dom);? id為key， value為該代碼document.querySelector("#id")獲得的元素
??????? eventList是一個(gè)數(shù)組，每個(gè)元素都是一個(gè)對(duì)象eventObj， eventObj擁有key字段和eventArray字段， key字段與domList的key對(duì)應(yīng)，eventArray是一個(gè)數(shù)組，存儲(chǔ)綁定事件的詳情，每個(gè)事件詳情都有method字段代表事件類型， eventArray字段代表事件函數(shù)的數(shù)組，每個(gè)事件函數(shù)都有函數(shù)本身，以及事件的傳播方向（冒泡或者捕獲），還有一個(gè)自定義的與bind函數(shù)，用于把事件函數(shù)的作用域轉(zhuǎn)移到該P(yáng)age對(duì)象，從而達(dá)到更好的封裝作用。通過(guò)attachEvent方法進(jìn)行存儲(chǔ)事件。
???????? 以下為attachDom與attachEvent方法的代碼定義
attachEvent事件中，調(diào)用了_getEvent方法，主要起到防止多次綁定完全相同的事件。
???????? 定義完數(shù)據(jù)結(jié)構(gòu)以及數(shù)據(jù)的存儲(chǔ)方式，下面就是關(guān)于數(shù)據(jù)操作處理，以下是_remvoeDom方法， _addEventListeners方法以及_removeEventListener方法的定義
??????? 進(jìn)行代碼重寫之前，引入兩個(gè)常用輔助函數(shù)，分別掛在App函數(shù)下面。
??????? 預(yù)備代碼完畢， 接下開始重寫頁(yè)面代碼， 這里html以及css完全不變， 只要更改js代碼
?????? 最后初始化app
??????? 總結(jié)：引入了App對(duì)象管理Page對(duì)象是有必要的，可以讓使用者更專注自己的習(xí)慣來(lái)編寫代碼。與現(xiàn)實(shí)中類似的，既然有管理者，被管理者必須要服從管理，因此對(duì)于Page對(duì)象做了很多相應(yīng)的更改。這篇的代碼有點(diǎn)多，但是這是做單頁(yè)面的核心部分，通過(guò)代碼的分離，可以為以后更好的維護(hù)打下堅(jiān)實(shí)的基礎(chǔ)。
??????? 后續(xù)更新：下一篇將引入tap事件和slide事件，這兩個(gè)事件是移動(dòng)端非常常用的，通過(guò)tap事件來(lái)代替click事件， slide事件用于簡(jiǎn)單的手勢(shì)操作。
請(qǐng)用移動(dòng)端設(shè)備打開該案例案例鏈接
原生開發(fā)移動(dòng)web單頁(yè)面(step by step)1——傳統(tǒng)頁(yè)面的開發(fā)
原生開發(fā)移動(dòng)web單頁(yè)面(step by step)2——Page對(duì)象
原生開發(fā)移動(dòng)web單頁(yè)面(step by step)4——tap事件與slide事件
原生開發(fā)移動(dòng)web單頁(yè)面(step by step)5——nodejs服務(wù)器的搭建
原生開發(fā)移動(dòng)web單頁(yè)面(step by step)6——history api應(yīng)用
