技术开发 频道

HTML5实战:用Jquery Mobile制作记事本

  Jasmine的使用步骤

  下面我们开始正式使用Jasmine 框架,首先我们来看下其目录结构。首先我们为项目创建一个名为NoteApp的文件夹。在这个主文件夹下,再创建一个名为app的目录,这个目录中将存放的是程序的应用逻辑和表示层的页面文件。创建一个名为spec的目录,这个目录中存放的是Jasmine的测试套件。除此之外,我们还创建一个lib的目录,这个目录保存的是项目中要用到的一些目录,整个目录架构如下图:

Jasmine的使用步骤

  在上图中,读者可能奇怪jqm和jstorage两个文件夹存放的是什么,jqm存放的是jquery mobile的框架文件,而jstorage存放的是jstorage框架的文件,在接下来的学习中将会详细介绍。

  接着,我们可以将下载到的jasmine框架的文件解压后,放到jasmine目录下,如下图:

Jasmine的使用步骤

  接下来,我们开始编写应用的第一个代码文件,一个是名为app.js,放在app目录下,另外一个是jasmine的测试程序,文件为Appsec.js,文件的保存位置如下图:

Jasmine的使用步骤

  最后,我们将编写一个名为specrunner.html的文件,这个文件中将会运行调用jasmine的测试用例。这个文件实际在jasmine的下载包中存在,但我们要对其进行一些必要的修改,以使其引用到恰当的类库文件,代码如下:

      <!-- 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>

  最后,我们把这个文件放到恰当的位置,如下图:

Jasmine的使用步骤

0
相关文章