JavaScriptMVC之Fixture
注：阅读这篇同学必须已经认识了JavaScriptMVC，否则，看起来比较困难。
$.fixture(固定物)是拦截Ajax请求并且用一个文件或者函数来模拟响应结果。当你想开发没有后台的JavaScript，它是一个很好的技术支撑。
Fixtures的类型
一般我们使用Fixtures的2种方法。第一种方法是把Ajax请求映射到一个文件。Fixtures会拦截/tasks.json请求，且把这些请求指向fixtures/tasks.json文件。
$.fixture("/tasks.json","fixtures/tasks.json");
第二种方法是把Ajax请求映射到一个函数。Fixtures会拦截/tasks/ID.json请求，且更新数据。
$.fixture("PUT /tasks/{id}.json", function(original, settings, headers){
return { updatedAt : new Date().getTime() }
})
我们还可以把Fixtures归类为2个类型：
1、静态 - 响应是一个文件
2、动态 - 响应是靠函数生成
查找静态和动态的Fixture是方式是不同的。
静态Fixtures
静态Fixtures使用替换不同URL来响应Ajax的请求。
// looks in fixtures/tasks1.json relative to page
$.fixture("tasks/1", "fixtures/task1.json");
$.fixture("tasks/1", "//fixtures/task1.json");
动态Fixtures
动态Fixtures能获取Ajax请求且模拟服务端返回结果。
例如，从服务端返回一个成功响应的JSON数据。
$.fixture("/foobar.json", function(orig, settings, headers){
return [200, "success", {json: {foo: "bar" } }, {} ]
})
这个Fixture函数可以使用符号表明：
function( originalOptions, options, headers ) {
return [ status, statusText, responses, responseHeaders ]
}
当这个Fixture函数被调用用了以下参数：
originalOptions - 默认的Ajax设置项
options - 请求设置项
headers - 请求头
且把参数以数组的格式返回：
status - HTTP响应状态
statusText - HTTP响应状态文本
responses - HTTP响应结果
headers - 响应包头
然而，$.fixture处理一般的例子都是你需要一个成功响应的JSON数据。这个和之前的写法是相似的：
$.fixture("/foobar.json", function(orig, settings, headers){
return {foo: "bar" };
})
如果你想返回一个数组数据，你可以在响应的数组中再加上其它数组。
$.fixture("/tasks.json", function(orig, settings, headers){
return [ [ "first","second","third"] ];
})
$.fixture功能原理相似于Jquery的Ajax运作系统。想创建更好的Fixtures，理解它是一个关键。
模板匹配Urls
常常，你想一个动态的Fixture通过Urls处理多个资源（例如一个Rest Url）。$.fixture模板匹配Urls允许你用一个通配符去匹配Urls。下面的例子模拟获取和修改100个todos的服务。
// create todos
var todos = {};
for(var i = 0; i < 100; i++) {
todos[i] = {
id: i,
name: "Todo "+i
}
}
$.fixture("GET /todos/{id}", function(orig){
// return the JSON data
// notice that id is pulled from the url and added to data
return todos[orig.data.id]
})
$.fixture("PUT /todos/{id}", function(orig){
// update the todo's data
$.extend( todos[orig.data.id], orig.data );
// return data
return {};
})
注意那数据是通过模板匹配Urls(ex:{id})添加到原始数据对象中。
模拟错误
下面是模拟一个未经授权请求到/foo
$.fixture("/foo", function(){
return [401,"{type: 'unauthorized'}"]
});
通过以下请求可以收到下面内容。
$.ajax({
url: '/foo',
error : function(jqXhr, status, statusText){
// status === 'error'
// statusText === "{type: 'unauthorized'}"
}
})
关闭 Fixtures
你可以删除一个通过把Fixture的选项设置为null。
// add a fixture$.fixture("GET todos.json","//fixtures/todos.json");
// remove the fixture$.fixture("GET todos.json", null)//关闭特定的fixture
你还可以设置[jQuery.fixture.on $.fixture.on] 的值为false:
$.fixture.on = false;//关闭所有fixture
现在我们来重点讲解$.fixture.make，
$.fixture.make可以创建一个CRUD服务层，它还支持条件查询，排序，分组，过滤等等，
从这句话，我们就可以看到make是多强大，几乎包含了页面与后台交互的绝大部分操作。
就连Ajax超时的情况fixture也给我们考虑到了，使用$.fixture.delay来达到。
注意：在条件查询中，fixture要求我们查询的参数名称中必须包含Id或者_id，否则，查询条件不起作用。
有些同学如果使用了查询可能会发现说，只是提供了精确的查询，如果想要模糊查询怎么办？
fixture有没有提供这个功能呢，看看源代码，发现没有，但是我们又看到make最后一个参数是一个过滤器，我们是不是可以通过这个来实现呢。
实践证明，这是可以的，只是需要自己去实现这个过滤器。说到这，我们平时使用到的请求类型都几乎包含了，
大家看看有没有其它请求没有，可以提出来，大家研究研究，看看怎么去实现它。
有了这个Fixture，我们开发人员就可以使用JavaScriptMVC+Web UI Plugin来开发Web项目的高保真了，而且是比较真实的demo。
让我们一起来完成演示例子，以后，我们就可以根据这个例子来构造自己项目的Fixtures。
下面让我一步一步讲解如何在项目到构造和使用Fixtures。
创建项目
在这里，我把下载的MVC包放到本地的E:\jQuery\javascriptmvc这个目录，使用DOC命令，进入到E:\jQuery\javascriptmvc这个目录下，
执行js jquery/generate/app cookbook命令，生成工程，
执行命令后，我们在E:\jQuery\javascriptmvc目录下看到生成的cookbook文件夹，这就是我们创建的工程，然后我们再在这个工程下面创建一个模块message，执行命令：js jquery/generate/scaffold Cookbook.Models.Message，
我们打开cookbook文件夹，看到文件夹下面有一个message文件夹，
这就是我们生成的message模块，而且我们还看到一个fixtures文件夹，我们写的fixture就是在这个文件夹下的fixtures.js文件。
接着修改cookbook.html，如下：
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>cookbook</title>
</head>
<body>
<body>
//把多余的代码删除，添加下面2条代码
<ul id='messages'></ul>//显示message列表的元素
<form id='create' action=''></form>//创建message使用到的元素
<script type='text/javascript'
src='../steal/steal.js?cookbook'>
</script>
</body>
</body>
</html>
接着打开cookbook.html，我们可以看到生成的代码已经具有删除，创建，显示所有message的功能。
但是没有以下功能：修改，条件精确查询，条件模糊查询，分组，排序等。
修改：
其实修改功能已经存在，只是页面上没有体现出来，现在我们给页面上添加上修改的功能。
修改E:\jQuery\javascriptmvc\cookbook\message\list\views\message.ejs文件，添加修改功能的触发元素源。最终代码如下：
<h3><%= name %> <a href='javascript://' class='destroy'>X</a>
<a href='javascript://' class='update'>U</a>//这句是我们添加的代码，点击它可以起到修改的功能
</h3>
<p><%= description %></p>
接着我们来修改controller:E:\jQuery\javascriptmvc\cookbook\message\list\list.js文件，最终代码如下：
steal( 'jquery/controller',
'jquery/view/ejs',
'jquery/controller/view',
'cookbook/models' )
.then( './views/init.ejs',
'./views/message.ejs',
function($){
/**
* @class Cookbook.Message.List
* @parent index
* @inherits jQuery.Controller
* Lists messages and lets you destroy them.
*/
$.Controller('Cookbook.Message.List',
/** @Static */
{
defaults : {}
},
/** @Prototype */
{
init : function(){
//这句就是我们后续需要添加查询功能的语句，我们会不段修改这句来达到各种查询的效果
this.element.html(this.view('init',Cookbook.Models.Message.findAll()) )
},
'.destroy click': function( el ){
if(confirm("Are you sure you want to destroy?")){
el.closest('.message').model().destroy();
}
},
//这个是我们添加的触发修改功能的函数，我们把这个记录的name的值修改为test
'.update click':function(el){
el.closest('.message').model().update({name:'test'});
},
"{Cookbook.Models.Message} destroyed" : function(Message, ev, message) {
message.elements(this.element).remove();
},
"{Cookbook.Models.Message} created" : function(Message, ev, message){
this.element.append(this.view('init', [message]))
},
"{Cookbook.Models.Message} updated" : function(Message, ev, message){
message.elements(this.element)
.html(this.view('message', message) );
}
});
});
条件精确查询：
修改E:\jQuery\javascriptmvc\cookbook\models\message.js文件，最终代码如下：
steal('jquery/model', function(){
/**
* @class Cookbook.Models.Message
* @parent index
* @inherits jQuery.Model
* Wraps backend message services.
*/
$.Model('Cookbook.Models.Message',
/* @Static */
{
/**
* 代码修改点
*/
findAll: function(attr,success,error){
return $.ajax({
url:'messages',
type:'get',
dataType:'json message.models',//这句message.models很重要，因为这个是把影响回来的数据model化
success:success,
error:error,
data:attr,
fixture:'-messages'//指定ajax发送到fixture的messages中
});
},
findOne : "/messages/{id}.json",
create : "/messages.json",
update : "/messages/{id}.json",
destroy : "/messages/{id}.json"
},
/* @Prototype */
{});
})
用浏览器打开cookbook.html，突然发现之前一起显示的列表，现在没有了，看看浏览器的日志，我们看到no fixture found。说明上面的messages没有找到。
现在就到我们修改fixtures.js文件的时候了，最终代码如下：
// map fixtures for this application
steal("jquery/dom/fixture", function(){
$.fixture.make(["messages","message"], 10, function(i, messages){
var descriptions = ["grill fish", "make ice", "cut onions"]
return {
name: "message "+i,
msg_id:'msg_'+i,//精确查询功能
msgId:'msg'+i,//精确查询功能
description: $.fixture.rand( descriptions , 1)[0]
}
}
})
我们可以通过msg_id或者msgId来精确查询记录，有没有发现一个很奇怪的现象就是这些可以精确查询字段都是_id或者Id才可以。
原来，fixture提供的精确查询条件字段一定要包含_id或者Id，否则，不能查询，像上面的name,description都不可以，除非我们修改fixture中的源码。
接着修改list.js文件中的这句代码：
//这句就是我们后续需要添加查询功能的语句，我们会不段修改这句来达到各种查询的效果
this.element.html(this.view('init',Cookbook.Models.Message.findAll()) )
修改成如下：
this.element.html(this.view('init',Cookbook.Models.Message.findAll({
msg_id:'msg_1'
})) )
当然我们还可以添加msgId这个查询条件。
在这里我们还需要提到的一个就是fixture默认提供的一个分页查询参数，offset(从那条记录起)和limit(第页记录数)。 修改上面代码如下：
this.element.html(this.view('init',Cookbook.Models.Message.findAll({
offset:0,
limit:5
})) );
我们可以看到10记录，只显示了5条，这个就是分页的模拟结果了。
排序，分组功能：
这2个功能相似，所以放到一起讲，因为它们所达到的效果其实差不多。fixture提供2个查询参数来达到，order和group。
我们修改查询代码(list.js)，代码如下：
this.element.html(this.view('init',Cookbook.Models.Message.findAll({
order:["description asc"]
})) )
看看效果，再修改这个代码如下：
this.element.html(this.view('init',Cookbook.Models.Message.findAll({
group:["description"]
})) )
看看效果，是不是和上面的差不多。
条件模糊查询：
我们只需要修改fixture.js就可以达到这个效果，查看fixture的API，我们看到$.fixture.make最后面的一个参数是一个过滤函数，我们就拿这个函数
来完成模糊查询的功能，修改代码如下：
// map fixtures for this application
steal("jquery/dom/fixture", function(){
$.fixture.make(["messages","message"], 10, function(i, messages){
var descriptions = ["grill fish", "make ice", "cut onions"]
return {
name: "message "+i,
msg_id:'msg_'+i,//精确查询功能
msgId:'msg'+i,//精确查询功能
description: $.fixture.rand( descriptions , 1)[0]
}
},
/**
* 过滤器，完成模糊查询功能
* 模糊查询description字段中包含make文本的记录
*/
function(item,settings){
if(item.description.indexOf(settings.data.description)>-1){
return item;
}
}
)
})
再次修改查询条件(list.js),代码如下：
this.element.html(this.view('init',Cookbook.Models.Message.findAll({
description:'make'
})) );
我们就记记录集中的make模糊查询出来。
至此，我们所需要讲的使用fixture来模拟我们所需要的Ajax请求和影响已经讲完。