html5用记事本编译,HTML5实战：用Jquery Mobile制作记事本

【IT168技术】随着HTML5时代的来临，移动开发中除了传统的Native APP外(即使用移动操作平台自带的SDK进行编写代码)，通过使用跨平台跨浏览器的HTML5制作的webapp移动应用也将大行其道。由于HTML5编写的移动应用，采用的是跨平台和浏览器的HTML5，以及搭配CSS3和Javascript，在程序的编写上难度大为降低，因此越来越受到广大开发人员的青睐，开发人员可以很快利用已有的知识技能加入到移动开发的阵营中去。而Jquery Mobile框架的出现，无疑更为已经熟悉Jquery开发的开发者提供了更多的方便。

本文假设读者已经对jQuery或者jQuery Mobile有一定的认识，其中jQuery Mobile框架在http://jquerymobile.com可以获得下载。如果读者对jQuery Mobile基础知识不大了解，可以参考如下的几篇文章，

统一接口工具JQuery Mobile简介

使用JQuery Mobile实现手机新闻浏览器

JQuery Mobile实现手机新闻浏览器(2)

使用jQuery Mobile实现新闻浏览器(3)

本系列教程中，将使用jQuery Mobile编写一个简单的移动记事本的应用，同样地，在

《移动跨平台开发框架Sencha Touch实战》系列中(地址为：

http://tech.it168.com/a2011/0714/1218/000001218224_all.shtml )介绍了如何使用另外一个适合移动开发的Sencha Touch框架开发同样的一个记事本应用，有兴趣的读者可以进行学习。本文将介绍一个基于行为驱动模式开发(behavior-driven approach简称BDD)的框架Jasmine framework.(https://github.com/pivotal/jasmine/wiki )，在BDD开发中，我们将就每一个步骤都通过该开发框架来进行不断重构，以达到快速开发的目的。

在本系列教程的第一部分，将首先看下系统的整体设计，将完成如下的几个步骤：

1)、设计应用的总体架构

2)、创建一个基本的用户界面模型

3)、使用Jasmine开发框架定义应用的公共接口

4)、开始实现已定义的公共接口

应用的总体架构

我们打算记事本应用能提供如下功能：

1)、创建记事

2)、编辑记事内容

3)、删除记事内容

4)、将记事的内容保存在移动客户端中

5)、查看所有已建立的记事列表

主界面效果

首先我们要实现的是一个可以增加和编辑记事的界面，我们将这个界面命名为Note Editor。界面看上去应该是如下图的样子(下图是个设计草稿图)：

此外，我们需要一个记事的列表的界面，以显示已经存在的记事，这个是我们启功应用程序时首先显示给用户的主界面，主界面如下所示：

接下来，看下如何使用BDD行为驱动的方式进行开发