在本系列教程的第一部分，將首先看下系統(tǒng)的整體設(shè)計(jì)，將完成如下的幾個(gè)步驟：

設(shè)計(jì)應(yīng)用的總體架構(gòu)；創(chuàng)建一個(gè)基本的用戶界面模型；使用Jasmine開發(fā)框架定義應(yīng)用的公共接口；開始實(shí)現(xiàn)已定義的公共接口。

應(yīng)用的總體架構(gòu)

我們打算記事本應(yīng)用能提供如下功能：創(chuàng)建記事；編輯記事內(nèi)容；刪除記事內(nèi)容；將記事的內(nèi)容保存在移動(dòng)客戶端中；查看所有已建立的記事列表。

主界面效果

首先我們要實(shí)現(xiàn)的是一個(gè)可以增加和編輯記事的界面，我們將這個(gè)界面命名為Note Editor。界面看上去應(yīng)該是如下圖的樣子(下圖是個(gè)設(shè)計(jì)草稿圖)：

此外，我們需要一個(gè)記事的列表的界面，以顯示已經(jīng)存在的記事，這個(gè)是我們啟功應(yīng)用程序時(shí)首先顯示給用戶的主界面，主界面如下所示：

接下來(lái)，看下如何使用BDD行為驅(qū)動(dòng)的方式進(jìn)行開發(fā)

使用Jasmine Framework框架進(jìn)行為驅(qū)動(dòng)開發(fā)

首先，我們將一步以實(shí)例的方式，一邊讓用戶體驗(yàn)什么是行為驅(qū)動(dòng)模式的開發(fā)。這種開發(fā)模式，能讓我們先行定義和測(cè)試業(yè)務(wù)邏輯，可以跟表現(xiàn)層進(jìn)行分離地設(shè)計(jì)。先來(lái)看下如何使用Jasmine framework這個(gè)框架。

Jasmine是一個(gè)允許開發(fā)者使用行為驅(qū)動(dòng)的方式對(duì)Javascript進(jìn)行測(cè)試的框架。這意味著開發(fā)者可以使用類似自然語(yǔ)言(易于理解)的方式，通過Jasmine編寫測(cè)試用例，最后生成Javascript代碼，這樣明顯降低了開發(fā)的難度，甚至讓不是專業(yè)程序員的人也能讀懂和編寫。

下面快速舉一個(gè)例子來(lái)說明Jasmine框架的使用，更復(fù)雜的用法，請(qǐng)參考其官方網(wǎng)站的手冊(cè)，這個(gè)例子希望讀者能理解，我們將在教程中稍后會(huì)用到。

describe("Notes functions", function () {  
    it("Should return a NoteModel instance", function () {  
        var note = Notes.app.createNote();  
        expect(note instanceof Notes.model.NoteModel).toBeTruthy();  
    });  
});  

在這個(gè)例子中，我們使用了多種Jasmine框架的特性。其中一個(gè)函數(shù)方法就是describe(),這個(gè)函數(shù)用來(lái)創(chuàng)建一個(gè)包含所有相關(guān)的測(cè)試的規(guī)格說明，我們稱之為測(cè)試套件。

其中，一個(gè)測(cè)試規(guī)格說明是通過函數(shù)方法it()中聲明的。當(dāng)調(diào)用it()方法時(shí)，要傳遞一個(gè)字符串參數(shù)進(jìn)去，比如這里，我們期待代碼能創(chuàng)建并返回一個(gè)NoteModel的實(shí)例。

接下來(lái)，我們通過 var note = Notes.app.createNote();創(chuàng)建了NoteModel的實(shí)例，然后使用了expect()函數(shù)這個(gè)斷言(在單元測(cè)試中我們稱之為斷言)，這里是斷言判斷note是否為Notes.model.NoteModel的一個(gè)實(shí)例，并使用toBeThruthy()這個(gè)匹配器去判斷這個(gè)測(cè)試用例是否能正確通過測(cè)試。關(guān)于匹配器請(qǐng)參考(https://github.com/pivotal/jasmine/wiki/Matchers )。

小結(jié)一下，在it()這個(gè)函數(shù)中，開發(fā)者可以編寫相關(guān)的代碼建立測(cè)試用例，并可以多次調(diào)用expect()方法。

#p#

Jasmine的使用步驟

下面我們開始正式使用Jasmine 框架，首先我們來(lái)看下其目錄結(jié)構(gòu)。首先我們?yōu)轫?xiàng)目創(chuàng)建一個(gè)名為NoteApp的文件夾。在這個(gè)主文件夾下，再創(chuàng)建一個(gè)名為app的目錄，這個(gè)目錄中將存放的是程序的應(yīng)用邏輯和表示層的頁(yè)面文件。創(chuàng)建一個(gè)名為spec的目錄，這個(gè)目錄中存放的是Jasmine的測(cè)試套件。除此之外，我們還創(chuàng)建一個(gè)lib的目錄，這個(gè)目錄保存的是項(xiàng)目中要用到的一些目錄，整個(gè)目錄架構(gòu)如下圖：

在上圖中，讀者可能奇怪jqm和jstorage兩個(gè)文件夾存放的是什么，jqm存放的是jquery mobile的框架文件，而jstorage存放的是jstorage框架的文件，在接下來(lái)的學(xué)習(xí)中將會(huì)詳細(xì)介紹。

接著，我們可以將下載到的jasmine框架的文件解壓后，放到j(luò)asmine目錄下，如下圖：

接下來(lái)，我們開始編寫應(yīng)用的第一個(gè)代碼文件，一個(gè)是名為app.js,放在app目錄下，另外一個(gè)是jasmine的測(cè)試程序，文件為Appsec.js，文件的保存位置如下圖：

最后，我們將編寫一個(gè)名為specrunner.html的文件，這個(gè)文件中將會(huì)運(yùn)行調(diào)用jasmine的測(cè)試用例。這個(gè)文件實(shí)際在jasmine的下載包中存在，但我們要對(duì)其進(jìn)行一些必要的修改，以使其引用到恰當(dāng)?shù)念悗?kù)文件，代碼如下：

      <!-- HEAD --> 
   <!-- Jasmine includes --> 
    css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" 
src="../lib/jasmine/jasmine-html.js" type="text/javascript"> 
</script> 
    <!-- Source files --> 
    <script src="app/App.js" type="text/javascript"></script> 
    <!-- Spec files --> 
    <script src="spec/AppSpec.js" type="text/javascript"></script> 
   <!-- BODY -->   
   <script type="text/javascript">   
    jasmine.getEnv().addReporter(new jasmine.TrivialReporter());    
    jasmine.getEnv().execute();    
</script> 

最后，我們把這個(gè)文件放到恰當(dāng)?shù)奈恢?，如下圖：

#p#

開始編寫邏輯代碼

接下來(lái)，我們開始使用jasmine框架以BDD驅(qū)動(dòng)方式編寫主要的代碼。BDD的方式需要我們不斷編寫和修改單元測(cè)試用例AppSec.js,讓我們就從AppSec.js這個(gè)文件開始吧。

首先，我們必須斷言命名空間是存在的，所以可以在AppSec.js文件中，編寫如下代碼：

   describe("Public interface exists", function () {  
    it("Defines the app", function () {  
        expect(Notes.app).toBeDefined();  
    });  
}); 

注意我們?cè)谝粋€(gè)名為Public interface exists的測(cè)試套件中，編寫了測(cè)試說明用例。在這個(gè)測(cè)試套件中，將保存所有對(duì)業(yè)務(wù)邏輯的公共函數(shù)測(cè)試的用例，這里只是簡(jiǎn)單去斷言應(yīng)用的命名空間是否已經(jīng)定義。

接下來(lái)我們開始進(jìn)行測(cè)試，使用瀏覽器中打開specrunner.html這個(gè)文件，可以看到如下圖的結(jié)果：

可以看到，出現(xiàn)了錯(cuò)誤的提示：Notes is not defined。這是正確的，因?yàn)槲覀兊拇a中還沒定義命名空間，接下來(lái)我們編寫代碼修正之，如下：

　　var NotesNotes = Notes || {}  
 
　　Notes.app = (function () {  
 
　　return {}  
 
　　})();  

這里我們定義了應(yīng)用的命名空間，再次運(yùn)行jasmine測(cè)試框架，結(jié)果如下圖：

現(xiàn)在我們可以總結(jié)出其步驟：先定義出行為，然后為行為編寫測(cè)試用例，然后運(yùn)行測(cè)試，看測(cè)試是否通過，不通過的話就修改代碼，再運(yùn)行測(cè)試直到其再次通過，這就是典型的BDD開發(fā)方法。

接下來(lái)，我們需要將一些記事的內(nèi)容列表由業(yè)務(wù)邏輯端返回給前端的表現(xiàn)層，因此我們使用如下的jasmine的行為規(guī)格說明去定義，繼續(xù)往測(cè)試套件中增加如下代碼：

            describe("Public interface exists", function () {  
 
it("Should have public interface to return notes list", function () {  
 
expect(Notes.app.getNotesList).toBeDefined();  
 
});  
 
}); 

這個(gè)測(cè)試用例斷言測(cè)試是否已經(jīng)定義了顯示記事列表的方法getNotesList。再編寫另外一個(gè)測(cè)試用例，稍微復(fù)雜點(diǎn)的，如下：

　　describe("Public interface implementation", function () {  
 
it("Should return notes list", function () {  
 
var notesList = Notes.app.getNotesList();  
 
expect(notesList instanceof Array).toBeTruthy();  
 
});  
 
}); 

這個(gè)測(cè)試用例，主要用來(lái)斷言測(cè)試返回的記事列表是否是一個(gè)數(shù)組。 注意我們現(xiàn)

在新建立了一個(gè)測(cè)試套件,名為 Public interface implementation,在這個(gè)測(cè)試套件中,專門存

放的是針對(duì)接口實(shí)現(xiàn)的測(cè)試用例。再次在瀏覽器中運(yùn)行，可以看到如下圖：

可以看到，兩個(gè)測(cè)試用例都出錯(cuò)了，沒關(guān)系，我們馬上編寫代碼修正：

　　Notes.app = (function () {  
 
var notesList = [];  
 
function getNotesList() {  
 
return notesList;  
 
}  
 
return {  
 
getNotesList: getNotesList  
 
}  
 
})(); 

再次運(yùn)行測(cè)試，結(jié)果如下圖，這次我們通過了測(cè)試。