日期:2014-05-16  浏览次数:20268 次

从JavaScriptMVC开始如何完成项目之创建应用程序

如何使用JavaScriptMVC开发项目第一步,就是创建应用程序。

在这里我们使用一个例子开始讲解。

下面我们将创建一个基本厨师手册应用系统,它让我们可以创建和删除食谱。如下图:

JavaScriptMVC提供生成脚本来帮助你们安装应用程序的文件和文件夹。

1、创建一个应用程序

在创建你的应用程序之前,打开一个Window系统的控制台窗口,即doc命令窗口,并且把目录定位到JavaScriptMVC包目录下。
在DOC命令窗口,执行:
js jquery/generate/app cookbook
这个脚本将生成一个应用程序的文件夹和文件。生成最张的程序目录如下:
cookbook/??????????????? // 应用程序的主目录文件夹
? cookbook.css?????????? // 默认的应用程序样式文件
? cookbook.html????????? // 默认的应用程序主页面文件
? cookbook.js??????????? // 应用程序主文件,相当我们main方法,加载所有程序需要的资源
? docs/????????????????? // 帮助文件文件夹
? fixtures/????????????? // 模拟的Ajax请求服务端
? funcunit.html????????? // 功能的测试页面,主要测试C和V
? models/??????????????? // 模型 即MVC中的M数据层
? qunit.html???????????? // 单元测试页面,主要测试M
? scripts/?????????????? // 命令行脚本
??? build.html?????????? // html for build script
??? build.js???????????? // 压缩程序所有文件,这个命令可以让我们只压缩项目中需要的资源
??? clean.js???????????? // code cleaning / linting
??? crawl.js???????????? // generate search content
??? docs.js????????????? // 生成帮助文档,相对我们之前的Web项目,这个可以让Web阅读和维护起到很大的帮助
? test/???????????????????
??? funcunit???????????? // 功能测试文件夹,包含程序中所有功能的测试文件
????? cookbook_test.js?? // cookbook功能的测试文件
????? funcunit.js??????? // 加载程序中所有功能的测试文件
??? qunit/?????????????? //? 单元测试文件夹,包含程序中所有单元测试文件
????? cookbook_test.js?? // cookbook单元测试文件
????? qunit.js?????????? // 加载程序中所有单元测试文件
我们将使用cookbook.html来做为我们应用程序的主页面文件。当然,如果你需要创建其它文件做为应用程序的主页面文件。
执行:
js jquery/generate/page cookbook index.html
或者我们直接创建一个其它文件,然后再在这个文件中添加如下代码即可。
<script type='text/javascript'
??????? src='../path/to/steal/steal.js?cookbook'>
</script>

如果用浏览器打开cookbook.html,你将看到一个JavaScriptMVC欢迎界面。


用编辑器打开cookbook.html文件,你将看到如下代码:
<script type='text/javascript'
??????? src='../steal/steal.js?cookbook'>
</script>

这行代码的意思是加载steal,且告诉steal加载cookbook/cookbook.js文件。

打开cookbook.js文件,你将看到如下代码:
steal(
??? './cookbook.css',?????????? // Web程序的CSS样式文件
??? './models/models.js',?????? // 加载所有模型
??? './fixtures/fixtures.js',?? // 为模型设置模拟的Ajax请求服务端
??? function(){???????????????? // 配置你的应用程序,这个相当于main方法

});

这个相当我们平时经常写的main函数。
这个文件实现了加载和配置你的应用程序所需要的资源。当前,它只是加载了应用程序的CSS样式文件,模型和fixture。

下面我们将创建窗口,模型,和模拟的Ajax请求服务端使我们可以创建和删除食谱。

脚手架上的食谱

我们将使用脚手架产生器快速生成:

一个在服务端具有添删查改功能的食谱模型
一个模拟的食谱服务
一个创建食谱的窗口
一个显示和删除食谱的窗口

脚手架食谱生成只需要在执行以下命令:
js jquery\generate\scaffold Cookbook.Models.Recipe

????? cookbook/models/recipe.js //创建一个食谱模型,它可以生成,检索,修改,和删除食谱在服务端。
????? cookbook/test/qunit/recipe_test.js //食谱模型单元测试文件
????? cookbook/models/models.js (steal added)
????? cookbook/test/qunit/qunit.js (steal added)
??? ? //这个产生器添加模拟的食谱模型Ajax请求代码。(你没有真正的食谱服务,如果你存在真正的服务端,可以把这部分代码删除掉。)
????? cookbook/fixtures/fixtures.js (code added)
??? ? //包含创建食谱的代码的文件夹
????? cookbook/recipe/create/create.html
????? cookbook/recipe/create/create.js
????? cookbook/recipe/create/create_test.js
????? cookbook/recipe/create/funcunit.html
????? cookbook/recipe/create/views/init.ejs
??? ? //包含显示和删除食谱的代码的文件夹
????? cookbook/recipe/list/funcunit.html
????? cookbook/recipe/list/list.html
????? cookbook/recipe/list/list.js
????? cookbook/recipe/list/list_test.js
????? cookbook/recipe/list/views/recipe.ejs
????? cookbook/recipe/list/views/init.ejs
????? cookbook/test/funcunit/funcunit.js (steal added)
????? cookbook/test/funcunit/funcunit.js (steal added)
????? cookbook/cookbook.js (steal added)
????? cookbook/cookbook.js (steal added)
????? cookbook/cookbook.js (code added)

页面安装

产生器执行后,你的应