JavaScriptMVC之Fixture

lyndon.lin

浏览: 234657 次
性别:
来自: 深圳

最近访客更多访客>>

ZSPINGGG

angel008

sd_zf

呼延浩云

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascriptmvc

javascriptmvc jquery

注：阅读这篇同学必须已经认识了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请求和影响已经讲完。

2
顶

0
踩

分享到：

JavaScriptMVC之数据绑定(jquery.tie) | 从JavaScriptMVC开始如何完成项目之压缩文 ...

2012-04-20 22:19
浏览 1469
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论