原生開發移動web單頁面(step by step)3——App對象

       為了讓Page對象更專注于業務邏輯，将其它的操作轉移出去，是以引入了App對象。App對象起到了管理多個Page對象的作用。有了App對象後， Page對象隻需要負責渲染頁面以及綁定事件，其它的都讓App自動幫Page解決。類似以下代碼：

     首先建立一個App對象

     var app = new App();

     再建立一個Page對象，隻需要重寫getDomObj方法以及相關的事件方法。然後調用

     var indexPage = new Page();

     indexPage.getDomObj = function () {};

     相關事件的方法定義（省略），最後通過一下代碼切換

     app.render(indexPage)；

     啟用app.render方法後，将會自動解除安裝之前的頁面，将目前的頁面初始化插入頁面中，進而簡化了開發流程。App對象的代碼如下

App的對象的代碼

        讓App對象更好的管理Page對象，改造Page對象，新增_dispose和_initialize方法，分别指向裝載和解除安裝操作，Page構造函數如下代碼

Page對象的代碼

        其中domList與eventList存放着對應dom元素以及事件方法，通過規範化的資料結構，用于自動化綁定以及解除安裝。

_dispose和_initialize方法的源代碼

         這裡是解除安裝與裝載的實作，分别調用了以下方法

         _removeEventListeners(): 移除所有的挂在頁面的事件

        _removeDom() : 清除dom元素

        getDomObj(container): 緩存元素以及緩存事件存于domList和eventList     中，然後通過_addEventListener()方法一起綁定，需要開發者重寫

        _addEventListeners(); 将事件綁定到頁面上。

        這裡的命名規則，内部使用的方法以下劃線開頭，提供使用者實作的以駝峰命名。

       以下為domList與eventList存儲資料的格式

       domList為簡單對象，以key-value的格式， value代表dom元素，通過attachDom方法來存儲，比如page.attachDom("#id", "id", dom);  id為key， value為該代碼document.querySelector("#id")獲得的元素

        eventList是一個數組，每個元素都是一個對象eventObj， eventObj擁有key字段和eventArray字段， key字段與domList的key對應，eventArray是一個數組，存儲綁定事件的詳情，每個事件詳情都有method字段代表事件類型， eventArray字段代表事件函數的數組，每個事件函數都有函數本身，以及事件的傳播方向（冒泡或者捕獲），還有一個自定義的與bind函數，用于把事件函數的作用域轉移到該Page對象，進而達到更好的封裝作用。通過attachEvent方法進行存儲事件。

         以下為attachDom與attachEvent方法的代碼定義

attachDom方法的代碼

attachEvent方法的代碼

attachEvent事件中，調用了_getEvent方法，主要起到防止多次綁定完全相同的事件。

getEvent方法的代碼

         定義完資料結構以及資料的存儲方式，下面就是關于資料操作處理，以下是_remvoeDom方法， _addEventListeners方法以及_removeEventListener方法的定義

removeDom方法的代碼

addEventListeners方法的代碼

removeEventListeners方法的代碼

        進行代碼重寫之前，引入兩個常用輔助函數，分别挂在App函數下面。

extend方法的代碼

建立Page對象的工廠函數

        預備代碼完畢， 接下開始重寫頁面代碼， 這裡html以及css完全不變， 隻要更改js代碼

indexPage的js代碼

loginPage的js代碼

registerPage的js代碼

goalPage的js代碼

       最後初始化app

初始化app代碼

        總結：引入了App對象管理Page對象是有必要的，可以讓使用者更專注自己的習慣來編寫代碼。與現實中類似的，既然有管理者，被管理者必須要服從管理，是以對于Page對象做了很多相應的更改。這篇的代碼有點多，但是這是做單頁面的核心部分，通過代碼的分離，可以為以後更好的維護打下堅實的基礎。

        後續更新：下一篇将引入tap事件和slide事件，這兩個事件是移動端非常常用的，通過tap事件來代替click事件， slide事件用于簡單的手勢操作。

案例連結 原生開發移動web單頁面(step by step)1——傳統頁面的開發 原生開發移動web單頁面(step by step)2——Page對象 原生開發移動web單頁面(step by step)4——tap事件與slide事件 原生開發移動web單頁面(step by step)5——nodejs伺服器的搭建 原生開發移動web單頁面(step by step)6——history api應用