amplifyjs--有關組件通訊與請求管理與本地存儲的js庫

[size=x-large][b]簡介：[/b][/size]
本介紹只是方便英文不好的人快速對這個框架有個瞭解，當然我的英文也差，還好理解代碼。

官方網站：[url]http://amplifyjs.com[/url]
github：[url]https://github.com/appendto/amplify[/url]

[b]請求管理[/b]
amplifyjs通過一個抽象層來統一管理你的請求，幫助你封裝請求和響應數據以適應server api和業務代碼，並統一回調接口。這些都可以減輕業務代碼受server api變化的影響，並且減少請求處理代碼和業務代碼的耦合。amplifyjs還可以設置不同的過期策略來緩存你的響應數據，避免重複請求。

[b]組件通訊[/b]
amplifyjs的組件通訊很簡單，採用subcribe（訂閱）| publish（發佈）的模式，訂閱者的回調函數可以設置自己的this對象，多個訂閱者之間可以通過設置重要性值來調整響應順序，消息發佈時可以同時推送多個數據給訂閱者。你可以用它來實現組件通訊和完成觀察者模式的功能。

[b]本地存儲[/b]
amplifyjs提供了統一的接口讓你在本地緩存數據，它最大可能的支持了不同版本和類型的瀏覽器，包括ie，firefox，chrome, iphone, android等等


[size=x-large][b]示例[/b][/size]

[size=medium][b]請求管理示例[/b][/size]
更多示例見官網[url]http://amplifyjs.com/api/request/#examples[/url]

一個簡單示例展示定義請求和發起請求， 只是把請求和響應分離

//定義請求
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
    }
});

[size=medium][b]組件通訊示例[/b][/size]
官方示例見[url]http://amplifyjs.com/api/pubsub/#examples[/url]
下面的示例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( "派飯了", "雞腿", "雞翅");

猜誰先吃到飯：[color=white]小明 > Jim > 梅[/color] 選中這行看答案（點再點再點）

[size=medium]本地存儲示例[/size]
詳見[url]http://amplifyjs.com/api/store/[/url]

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

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

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