`
bellstar
  • 浏览: 150936 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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});
分享到:
评论

相关推荐

    amplifyjs-1.1.0-sources.jar

    官方版本,亲测可用

    amplifyjs-1.1.0.jar

    官方版本,亲测可用

    前端项目-amplifyjs.zip

    AmplifyJS 是一个强大的前端JavaScript库,专为构建现代Web应用程序而设计。它提供了一系列模块化的工具,帮助开发者在处理数据存储、API调用、路由、会话管理以及前端错误处理等方面工作更加高效。这个名为"前端...

    javascript表格的渲染组件.docx

    在JavaScript组件开发的世界里,有许多优秀的框架和工具,如AmplifyJS,它们提供了组件协作和资源管理的功能,让开发者能够更专注于业务逻辑,而不是底层的实现细节。学习和掌握这些技术,对于成为一名出色的前端...

    amplify API

    AmplifyJS是基于jQuery的组件库,提供了数据存储、RESTful请求、发布/订阅等功能。这个文件可能详细阐述了如何利用AmplifyJS来增强jQuery的功能,包括如何集成到现有的jQuery项目中,以及如何使用它的各种组件和API...

    amplifyjs

    AmplifyJS 是一个强大的前端JavaScript库,专为构建现代Web应用而设计。它由AT&T Labs开源,致力于提供一套全面的工具集,帮助开发者轻松处理常见的Web开发任务,如数据存储、API交互、会话管理、以及各种类型的数据...

    iTMS-Mobile:使用 jquery mobile 和淘汰赛 js 构建的应用程序

    此外,提到了AmplifyJS,这是一款强大的JavaScript库,提供了数据存储、Ajax请求增强、模板处理等功能,增强了原生JavaScript的功能。同时,提及了谷歌地图,这意味着iTMS-Mobile可能集成了地理定位和地图服务,让...

Global site tag (gtag.js) - Google Analytics