amplifyjs--有关组件通讯与请求管理与本地存储的js库

阅读更多

简介：
本介绍只是方便英文不好的人快速对这个框架有个了解，当然我的英文也差，还好理解代码。

官方网站： http://amplifyjs.com
github： https://github.com/appendto/amplify

请求管理
amplifyjs通过一个抽象层来统一管理你的请求，帮助你封装请求和响应数据以适应server api和业务代码，并统一回调接口。这些都可以减轻业务代码受server api变化的影响，并且减少请求处理代码和业务代码的耦合。amplifyjs还可以设置不同的过期策略来缓存你的响应数据，避免重复请求。

组件通讯
amplifyjs的组件通讯很简单，采用subcribe（订阅）| publish（发布）的模式，订阅者的回调函数可以设置自己的this对象，多个订阅者之间可以通过设置重要性值来调整响应顺序，消息发布时可以同时推送多个数据给订阅者。你可以用它来实现组件通讯和完成观察者模式的功能。

本地存储
amplifyjs提供了统一的接口让你在本地缓存数据，它最大可能的支持了不同版本和类型的浏览器，包括ie，firefox，chrome, iphone, android等等


示例

请求管理示例
更多示例见官网 http://amplifyjs.com/api/request/#examples

一个简单示例展示定义请求和发起请求， 只是把请求和响应分离

//定义请求
amplify.request.define( "ajaxExample1", "ajax", {
    url: "/myApiUrl",
    dataType: "json",
    type: "GET"
});


//发起请求
amplify.request( "ajaxExample1", function( data ) {
    data.foo; // bar
});

这个示例避免在发起请求时不用拼接API URL字符串

//REST api的url中需要type和id两个参数通过模板占位符表示
amplify.request.define( "ajaxRESTFulExample", "ajax", {
    url: "/myRestFulApi/{type}/{id}",
    type: "GET"
})

//发起请求时就简单啦
amplify.request( "ajaxRESTFulExample",
    {
        type: "foo",
        id: "bar"
    },
    function( data ) {
        // /myRESTFulApi/foo/bar was the URL used
        data.foo; // bar
    }
);

这个示例在回调业务代码前对响应进行解析，再以统一的形式发给回调

amplify.request.define( "decoderSingleExample", "ajax", {
    url: "/myAjaxUrl",
    type: "POST",
    decoder: function ( data, status, xhr, success, error ) {
        if ( data.status === "success" ) {
            success( data.data );
        } else if ( data.status === "fail" || data.status === "error" ) {
            error( data.message, data.status );
        } else { //这个时候可能data都不正常
            error( data.message , "fatal" );
        }
    }
});

amplify.request({
    resourceId: "decoderSingleExample",
    success: function( data ) {
        data.foo; // bar
    },
    error: function( message, level ) {
        alert( "always handle errors with alerts." );
    }
});

请求管理还可以通过定义全局回调，对所有请求进行集中处理或监控等。

subscribe( "request.error", function( settings, data, status ) {
    if ( status === "abort" ) {
        // deal with explicit abort of request
    } else {
        // deal with normal error
    }
});

组件通讯示例
官方示例见 http://amplifyjs.com/api/pubsub/#examples
下面的示例bellstar有版权

一个简单的订阅和发布，只要id是同一个，它们就对接上了。

amplify.subscribe( "吃中饭了", function() {
    alert( "小明听到要吃中饭了" );
});

amplify.publish( "吃中饭了" );

发布时，传递消息

amplify.subscribe("吃中饭了", function(food1, food2) {
    alert("小明的午饭是："  +  food1 + "," + food2 );
});

amplify.publish( "吃中饭了", "鸡腿","鸡翅");

接收消息方指定响应函数要绑定的this对象，小明方便改成Jim

var ming = {name: "小明"};

amplify.subscribe( "吃中饭了", ming, function(food1, food2) {
    alert(this.name + "的午饭是："  +  food1 + "," + food2);
});

amplify.publish( "吃中饭了", "鸡腿", "鸡翅");

还可以指定消息订阅者的响应顺序

var ming = {name: "小明"};
var jim = {name: "Jim"};
var mei = {name: "梅"};

var eating = function(food1, food2) {
    alert( this.name + "开始吃："  +  food1 + "," + food2 );
}

amplify.subscribe( "派饭了", ming, eating, 1);
amplify.subscribe( "派饭了", jim, eating, 2);
amplify.subscribe( "派饭了", mei, eating);

amplify.publish( "派饭了", "鸡腿", "鸡翅");

猜谁先吃到饭： 小明 > Jim > 梅 选中这行看答案（点再点再点）

本地存储示例
详见 http://amplifyjs.com/api/store/

//存储
amplify.store("key","value");

//获取
amplify.store("key");

//5秒后过期，打字要快哦，要不然一直会是undefined
amplify.store("key2","value" {expires: 5000});