跟绝大多数PhoneGap程序一样，Index.html是程序的入口。这个页面应该完成应用程序的初始化工作。

首先，让我们来看看这个页面通常都长什么样子：

下面我将一一解释这个页面都做了哪些初始化工作。

2.1 引用所有的CSS

所有的CSS都应该在放在index.html里面，这样做的好处是其他页面会变得很干净，不会到处都在引用CSS，使得CSS更容易管理。

你可以使用SASS来编写CSS，但最后请一定把所有的CSS合并到一个文件。在我的试验中，当index.html引用了太多CSS和JS的时候，程序启动时间变长，并且容易崩溃。

2.2 引用所有的Javascript

跟CSS一样，所有的JS也需要合并到一个文件，当然你可以保留一些重型的库，如cordova, jquery, nova. 具体JS文件的组织和管理我会在第五章文件结构中详细叙述。这里你需要理解的是，在index.html加载完成的时候，你写的所有的JS都已经加载了，这样当你想使用某一个对象或者类的时候，你不用等待加载相关的JS文件。这里我推荐使用grunt来进行JS文件的合并和压缩, 具体的内容我会在第十章开发环境中详细描述.

2.3 初始化本地数据库

在我们的这个框架中,本地数据库采用HTML5 SQLite。数据库的表结构是由代码来定义和生成的，如果你熟悉EntityFramework（EF）的话，你会发现，该框架提供的数据库的定义正好跟EF的CodeFirst模式一样，对数据库的访问也跟EF非常类似，这也是我一直想要达到的效果。

在index.html，数据库通过代码来生成，以及初始化一些初始数据。

2.4 设置应用程序的UI壳

首先，让我们特别注意id为body的这个div。这个div#body在我们的框架中起着非常重要的作用，因为它在应用程序启动的时候被设置了固定的、跟屏幕大小一致的宽和高，并且设置了样式overflow:hidden。 这样一来，我们所有页面的所有HTML元素都将在这个固定的div里面呈现。有了这个固定的div，我们要做fixed header, fixed footer以及fixed anything 都将易如反掌。

如果说index.html是整个应用程序的壳的话，那么这个壳的最外层是<html>标签，壳的最里层就是div#body。这个壳无比坚韧，以至于里面的任何内容都无法超出div#body。

当然，我们也可以增加这个壳的厚度，或是加一些装饰品。根据项目需要，你可以任意定制这个index.html，比如用div包裹div#body， 或是增加导航、菜单元素。

当所有初始化工作完成之后，就可以加载程序的第一个页面了，比如登陆页面。在下一章中，我将详细介绍如何呈现一个页面，以及页面跳转、传值、事件等。

Nova PhoneGap框架 第二章 理解index.html的更多相关文章

  1. Nova PhoneGap框架 第一章 前言

    Nova PhoneGap Framework诞生于2012年11月,从第一个版本的发布到现在,这个框架经历了多个项目的考验.一直以来我们也持续更新这个框架,使其不断完善.到现在,这个框架已比较稳定了 ...

  2. Nova PhoneGap框架 第九章 控件

    我们的框架中也提供了一些常用的控件,这些控件大多都依赖于我们的框架,也正是在我们的框架下才使得实现这些控件的变得更简单.但是我们的框架是不依赖与这些控件的,如果你用不上这些控件,你完全可以把相关的代码 ...

  3. Nova PhoneGap框架 第五章 文件结构

    一个好的项目架构必然有着合理的文件结构,如果一个项目的文件组织混乱,那么可以断言一定是项目架构有问题. 合理的文件结构能够帮你更清晰的管理你的文件,并且当需要添加新的文件的时候,你的程序员很清楚应该加 ...

  4. Nova PhoneGap框架 第七章 设备事件处理

    我们的框架包含了几种设备事件的处理,目的是为了让我们的程序员更容易的完成代码.这些事件包括:回退键(Android)和横竖屏切换事件. 7.1 Android回退键 首先来说说回退键的事件处理.当用户 ...

  5. Nova PhoneGap框架 总结

    Nova PhoneGap Framework 是完全针对PhoneGap应用程序量身定做的,在这个框架下开发的应用程序很容易实现高质量的代码,很容易让程序拥有很好的性能和用户体验. 在经历了多个项目 ...

  6. Nova PhoneGap框架 第八章 滚动条

    你可能会疑惑为什么滚动条这么常见的功能会在这里单独列出,但如果你有过PhoneGap开发经验的话,你就会发现要在Android 2.3 里面实现滚动条那真不是一件容易的事. 8.1 概述 目前主流的P ...

  7. Nova PhoneGap框架 第四章 本地数据库

    我一直想把EntityFramework(简称EF)的那一套搬过来,应用于HTML5 SQLite. 幸运的是,我几乎做到了,有些功能无法完成的那是因为SQLite本身不支持.至少从现在已经完成的功能 ...

  8. Nova PhoneGap框架 第六章 使用Mock

    在我们的框架中引入了一个很重要的设计,那就是使用Mock. 这里的mock是指cordova.mock.js文件,它模拟了PhoneGap(Cordova)的API,从而可以在浏览器中运行测试我们的程 ...

  9. Nova PhoneGap框架 第三章 页面

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

随机推荐

  1. F#之旅7 - 图片处理入门

    首先,隆重介绍今天的主角:ImageProcessor(http://imageprocessor.org/).虽然我并没有在实际工作中用到这个库,但是它干净利索的使用方式打动了我,很久以前就存了下来 ...

  2. nodejs+mysql 断线重连

    var mysql = require('mysql'); var conn; function handleError () { conn = mysql.createConnection({ ho ...

  3. JavaScript高级程序设计-(1)html中使用JavaScript

    html中使用JavaScript 1.延迟脚本 script标签定义了defer属性,脚本会被延迟到整个页面都解析完毕后运行 详细内容如下: 2.异步脚本 script标签定义了async属性,as ...

  4. [转]在Eclipse中使用JUnit4进行单元测试（初级篇）

    首先,我们来一个傻瓜式速成教程,不要问为什么,Follow Me,先来体验一下单元测试的快感! 首先新建一个项目叫JUnit_Test,我们编写一个Calculator类,这是一个能够简单实现加减乘除 ...

  5. apache 服务器配制

    简介:Apache 是世界上使用量第一的Web服务器软件,可用于linux,unix,windows等平台,尤其是对Linux支持完美 Apache的优点: 功能强大,自带很多功能模块,可根据需求编译 ...

  6. 返水bug-中澳

    NOOK(Y) CSBFB(30000) off(N) QQ(2652880032) G(1) off1(Y) QQ1(3479301404) G1(1) off2(N) QQ2(309235846) ...

  7. Xmarks Hosts

    使用 Chrome 浏览器,但实在是没精力去各种FQ和寻找 Google 的 hosts 来同步书签,没办法只好折中使用 Xmarks 来单独同步书签,没想到最近 Xmarsks 又不好使了.再次标记 ...

  8. linux shell输出带颜色文本

    echo -e "\033[33;31m Color Text" - red echo -e "\033[33;32m Color Text" - green ...

  9. JS操作Json

    因为我水啊 所以我就要手打一下 熟悉一下 ===== JSON 全称 JavaScript Object Notation(标记) 一种轻量级的数据交互格式,采用完全独立于语言的文本格式 同事JSON ...

  10. 解决FF浏览器无法执行window.close()脚本

    在FF浏览器中输入about:config 查找dom.allow_scripts_to_close_windows 将值改为true