建站
咨詢
售后
建站咨詢
新聞中心
在本系列教程的第一部分，將首先看下系統(tǒng)的整體設(shè)計(jì)，將完成如下的幾個(gè)步驟：
創(chuàng)新互聯(lián)長期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為漳縣企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作，漳縣網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
設(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í)首先顯示給用戶的主界面，主界面如下所示：
接下來，看下如何使用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ì)。先來看下如何使用Jasmine framework這個(gè)框架。
Jasmine是一個(gè)允許開發(fā)者使用行為驅(qū)動(dòng)的方式對(duì)Javascript進(jìn)行測(cè)試的框架。這意味著開發(fā)者可以使用類似自然語言(易于理解)的方式，通過Jasmine編寫測(cè)試用例，最后生成Javascript代碼，這樣明顯降低了開發(fā)的難度，甚至讓不是專業(yè)程序員的人也能讀懂和編寫。
下面快速舉一個(gè)例子來說明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ù)用來創(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í)例。
接下來，我們通過 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 框架，首先我們來看下其目錄結(jié)構(gòu)。首先我們?yōu)轫?xiàng)目創(chuàng)建一個(gè)名為NoteApp的文件夾。在這個(gè)主文件夾下，再創(chuàng)建一個(gè)名為app的目錄，這個(gè)目錄中將存放的是程序的應(yīng)用邏輯和表示層的頁面文件。創(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框架的文件，在接下來的學(xué)習(xí)中將會(huì)詳細(xì)介紹。
接著，我們可以將下載到的jasmine框架的文件解壓后，放到j(luò)asmine目錄下，如下圖：
接下來，我們開始編寫應(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ù)念悗煳募?，代碼如下：
- css" rel="stylesheet" type="text/css" />
最后，我們把這個(gè)文件放到恰當(dāng)?shù)奈恢?，如下圖：
#p#
開始編寫邏輯代碼
接下來，我們開始使用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è)試的用例，這里只是簡單去斷言應(yīng)用的命名空間是否已經(jīng)定義。
接下來我們開始進(jìn)行測(cè)試，使用瀏覽器中打開specrunner.html這個(gè)文件，可以看到如下圖的結(jié)果：
可以看到，出現(xiàn)了錯(cuò)誤的提示：Notes is not defined。這是正確的，因?yàn)槲覀兊拇a中還沒定義命名空間，接下來我們編寫代碼修正之，如下：
- 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ā)方法。
接下來，我們需要將一些記事的內(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è)試用例，主要用來斷言測(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è)試。
接下來的步驟
接下來，我們將使用jQuery Mobile開始正式開始編寫我們的業(yè)務(wù)邏輯層代碼了。請(qǐng)留意本教程系列的第2講。
原文鏈接：http://www.byhtml5.com/hjc/2012-01-20/504_7.html
文章名稱：用jQueryMobile制作記事本
地址分享：http://www.dlmjj.cn/article/dphpjhj.html
