【IT168技术】在本教程的上一篇(http://tech.it168.com/a2012/0111/1301/000001301499_all.shtml)中，为大家介绍了将要制作的记事本的总体架构，以及如何使用基于行为驱动模式开发的javascript框架jasmine进行简单的测试开发。在本文中，将指导大家使用jQuery Mobile框架进行实际的开发。
在本篇教程完结后，读者将会看到如下的一个制作好的记事本界面的样子，如下图：
下面我们开始对单元测试用例中编写修改的代码进行不断的重构，以达到我们的目的，这样的一个好处是能够很高效并且不编写多余的代码。
编写数据上下文模块
我们在第一篇教程中，使用jasmine编写了测试套件，第一个测试套件是如下所示：
describe("Public interface exists", function () {
it("Should have public interface to return notes list", function () {
expect(Notes.app.getNotesList).toBeDefined();
});
});
it("Should have public interface to return notes list", function () {
expect(Notes.app.getNotesList).toBeDefined();
});
});
第二个测试套件则为：
describe("Public interface implementation", function () {
it("Should return notes list", function () {
var notesList = Notes.app.getNotesList();
expect(notesList instanceof Array).toBeTruthy();
});
})
it("Should return notes list", function () {
var notesList = Notes.app.getNotesList();
expect(notesList instanceof Array).toBeTruthy();
});
})
现在我们要对它们进行重构，尝试把它们整合为一个测试套件即可，如下代码所示：
describe("Data Context tests", function () {
it(“Exists in the app”, function () {
expect(Notes.dataContext).toBeDefined();
});
it(“Returns notes Array”, function () {
var notesList = Notes.dataContext.getNotesList();
expect(notesList instanceof Array).toBeTruthy();
});
});
it(“Exists in the app”, function () {
expect(Notes.dataContext).toBeDefined();
});
it(“Returns notes Array”, function () {
var notesList = Notes.dataContext.getNotesList();
expect(notesList instanceof Array).toBeTruthy();
});
});
在第一个测试用例it()方法中，我们将应用app的实例参数改为dataContext,也就是凡是跟数据访问有关系的方法，都会放在这个类的实例中。在教程的第一篇中，app变量是如下的代码：
Notes.app = (function () {
var notesList = [];
function getNotesList() {
return notesList;
}
return {
getNotesList: getNotesList
}
})();
var notesList = [];
function getNotesList() {
return notesList;
}
return {
getNotesList: getNotesList
}
})();
当我们更换名称后，代码如下：
Notes.dataContext = (function () {
var notesList = [];
function getNotesList() {
return notesList;
}
return {
getNotesList: getNotesList
}
})();
var notesList = [];
function getNotesList() {
return notesList;
}
return {
getNotesList: getNotesList
}
})();
同时，我们将App.js更名为DataContext.js,在更改后，目录文件如下图所示：
当然，我们还要修改specrunner.html,将app.js修改为DataContext.js，如下：
<!-- App -->
<script type="text/javascript" src="app/DataContext.js"></script>
<script type="text/javascript" src="app/DataContext.js"></script>
现在我们再次运行Jasmine,打开specrunner.html,然后运行，可以看到如下的结果：
这证明测试已经通过，简而言之，这里就是说我们将应用的模块名称改名了，叫做DataContext并且通过了单元测试。
