Nova PhoneGap框架 第三章 页面

页面在项目架构中是一个很重要的概念，它让我们能够将一个功能复杂的项目拆分成一个一个功能比较独立的小区域，这极大的提高了代码的可读性和可维护性。

在我们这个框架中，一个页面由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才能在这个事件中做一些异步的操作。

通常我们还会在这个事件中做一件事，那就是释放这个页面的实例所占用的资源。