IT工程師數位筆記本

頁面在項目架構中是一個很重要的概念，它讓我們能夠將一個功能復雜的項目拆分成一個一個功能比較獨立的小區域，這極大的提高了代碼的可讀性和可維護性。

在我們這個框架中，一個頁面由JS和HTML兩部分組成，首先讓我們來看看JS部分吧。

以上的這部分代碼就是一個在命名空間“at.pages”下的“Details”頁面的定義。你可能已經注意到了，在第2行代碼，有一個“pages/details.html”。對，就是這樣，HTML文件的相對路徑在這個頁面的構造函數中進行了指定。這樣，這個頁面的JS部分和HTML部分就聯系起來了。

在這個框架中，所有頁面都應該繼承自"nova.Page"， 當然，你可以定義一個適合你項目的基類，比如DemoPageBase （仍然繼承自nova.Page），然后你定義的其他頁面繼承自這個自定義的基類。

再讓我們來看看HTML部分的代碼：

怎么樣？這個HTML頁面的定義是不是非常清爽呢。

下面，讓我們看看神奇的頁面跳轉和傳值吧。

3.1 頁面跳轉

頁面跳轉在我們這個框架中其實非常簡單，我甚至都想不到能有更簡單的頁面跳轉方式了。

首先，我們來看看另一個示例頁面的定義吧。

這實際上是一個菜單頁面，只放了一些鏈接。這個頁面包含了3種頁面跳轉的方式：

1. 直接回退到上一個頁面（如果指定了參數url的值，那么會一直回退到這個url對應的頁面）；
2. 指定HTML頁面路徑進行跳轉，適用于一些靜態或簡單頁面；
3. 構建一個目標頁面的實例，然后進行跳轉（此處可以傳遞任意參數），適用于大多數頁面。

怎么樣，這樣的頁面跳轉是不是非常簡單呢？既能夠快速跳轉到簡單頁面，有能夠擁有足夠的自由來控制跳轉到復雜的頁面。

注意：這段代碼中的變量"at"擴展自"nova.application"，所以你看到的"at.gotoPage"實際上是"nova.application.gotoPage"。

3.2 頁面傳值

頁面傳值比頁面跳轉更簡單。

請看上節的這段代碼：

首先我們實例化了一個目標頁面，然后直接給這個實例的某個屬性賦值，然后再跳轉到這個頁面。 是不是很簡單并且一目了然呢？

再看看目標頁面的定義：

我們看到"editingTarget" 實際上是這個頁面的一個屬性，這樣目標頁面中的所有代碼都可以基于這個屬性獨立工作，當其他頁面傳過來的值發生改變時，這個頁面就會呈現不一樣的內容了。

3.3 頁面事件

目前在我們項目中大量用到的事件只有onLoaded 和 onNavigatingAway，因此到現在為止，我們這個框架只實現了這兩個事件。但是如果你想添加更多的事件，你也可以很容易的修改我們的框架實現。

需要特別注意的是，這里所說的事件，并不是像jquery中定義的那樣，即一個對象可以為某個事件綁定多個處理程序，然后在事件發生的時候，每個處理程序都將運行。這里所說的事件實際更像是方法的定義，因為它不是用于多次綁定，且在事件發生的時候只會執行一次。

3.3.1 onLoaded事件

還記得我們在定義頁面的構造函數中指定的HTML的路徑嗎？你可能已經猜到了，我們就是用的jquery的ajax去動態加載這個HTML頁面的。默認情況下，ajax返回的HTML會被放到div#body中，然后，頁面的onLoaded事件（實際上是方法）被調用。

于是你明白了，onLoaded事件是頁面的主入口。當代碼執行到onLoaded里面的時候，那個HTML已經加載到了document里面，因此你可以在onLoaded事件里面去綁定數據、綁定單擊事件了。

3.3.2 onNavigatingAway事件

這個事件會在頁面即將離開的時候調用，它有一個參數callback。當你不顯示的調用這個callback的時候，頁面是不會離開的。這樣設計的主要原因是，javascript里面到處都是異步的調用和回調，只有用callback才能在這個事件中做一些異步的操作。

通常我們還會在這個事件中做一件事，那就是釋放這個頁面的實例所占用的資源。