【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简介
http://tech.it168.com/a2010/1210/1136/000001136835.shtml
使用JQuery Mobile实现手机新闻浏览器
http://tech.it168.com/a2011/0321/1168/000001168231.shtml
JQuery Mobile实现手机新闻浏览器(2)
http://tech.it168.com/a2011/0323/1169/000001169682.shtml
使用jQuery Mobile实现新闻浏览器(3)
http://tech.it168.com/a2011/0324/1170/000001170077.shtml
本系列教程中，将使用jQuery Mobile编写一个简单的移动记事本的应用，同样地，在
《移动跨平台开发框架Sencha Touch实战》系列中(地址为：
http://tech.it168.com/a2011/0708/1215/000001215353_all.shtml 、
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行为驱动的方式进行开发
