- 浏览: 1431203 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
promise api 与应用场景
promise 是 commonjs 社区中提出的异步规范,其简洁直观的 api 使得异步读值操作更易于理解和使用,主要 api 包括:
API
Defer
功能实现者调用 Defer() 后产生 Defer 对象,它包括 promise 属性以及 resolve 和 reject 方法
promise 对象
功能调用者通过调用 promise 的 then 方法添加成功回调和失败回调函数。多次调用 then 添加的回调函数最终“并行”执行,互相独立。
resolve/reject
功能实现者通过 resolve/reject 来通知 promise 对象成功与否并传递指定的参数给调用者的回调函数来执行。
note:
通过分离 Defer 对象和 promise 对象,可以达到功能实现者和调用者的权限分离,符合 Object-capability-model 从而更有利于系统的安全。
all
通过 all 方法生成一个新的 promise 对象,通过该对象可以监控一批 promise 对象,只有当全部 promise 都成功时才使得新的 promise 对象成功,否则只要有一个 promise 对象失败那么新生成的 promise 就算做失败。
when
调用 when 可以统一获取 promise 对象和非 promise 对应的值,屏蔽异步的差异。
api 使用
then
1. 统一的回调注册
then 方法提供了一个统一的回调注册接口,无论注册时该异步 promise 是否已经成功,都会保证回调函数会被及时调用。
例如:
可以成功前注册:
var defer= S.Defer(); defer.promise.then(function(v){ alert(v===1); }); setTimeout(function(){ defer.resolve(1); },5000);
也可以在成功后注册(仍然会被调用)
var defer= S.Defer(); defer.resolve(1); setTimeout(function(){ defer.promise.then(function(v){ alert(v===1); }); },5000);
2. 链式操作
then 会返回一个新的 promise 对象,那么在这个返回对象上可以继续调用 then 方法,而参数值则是上一个 then 方法的返回值:
var defer = S.Defer(); defer.promise.then(function(v){ alert(v===1); return v+1; }).then(function(v2){ alert(v2===2); }); defer.resolve(1);
3. 嵌套链式操作
更进一步:回调函数也可以返回一个 promise 对象,那么 then 返回的 promise 对象则会等待回调函数返回的 promise 对象成功后才算成功,并且最后一个 then 的回调函数的参数为 导致前一个 then 回调函数返回的 promise 对象成功 的值:
var defer = S.Defer(); defer.promise.then(function(v){ alert(v===1); var d2= S.Defer(); setTimeout(function(){ d2.resolve(2); },1000); return d2.promise; }).then(function(v2){ alert(v2===2); }); defer.resolve(1);
all
使用 all 也可以达到嵌套调用的效果(同时等待多个 promise 成功),并可一次性得到导致所有 promise 成功的值:
var defer = S.Defer(); var defer2 = S.Defer(); setTimeout(function(){ defer2.resolve(2); defer.resolve(1); },1000); S.Promise.all([defer.promise,defer2.promise]).then(function(vs){ alert(vs[0]===1); alert(vs[1]===2); });
when
使用 when 可以不加区别得对待 promise 对象和非 promise 对象,通过成功回调可以一致得获取最终结果:
function check(p){ S.Promise.when(p,function(v){ alert(v===1); }); } var defer=S.Defer(); defer.resolve(1); check(1); // => alert(true) check(defer.promise); //=> alert(true);
使用场景
domReady
domReady 是个异步过程,具备以下特征使得它非常适合使用 promise 来实现:
1. domReady 添加回调时可能该事件已经触发过。
2. 多个 domReady 添加的回调并不需要前后依赖,并且要求其中一个回调失败并不影响其他回调(即回调间独立)
那么内部实现即可将 S.ready(fn) 的调用转交给内部的 readyDefer.promise.then。那么当浏览器 domready 时只需简单调用 readyDefer.resolve(S) 即可.
io/ajax
io/ajax 一般也是异步 io,通过 promise 实现 io,那么就可以摆脱必须将处理逻辑统统写在一处的限制:
var r=S.io({...}); r.then(function(v){ // logic 1 }); r.then(function(v){ // logic 2 });
并且通过嵌套以及 all 也可以很容易支持多个系统间的相互时序依赖。
串行:
var r=S.io({..}); r.then(function(v){ return S.io({..,data:{v2:v+1}}) }).then(function(v2){ // logic v2 })
并行:
S.Promise.all([S.io({url:'u1'}),S.io({url:'u2'})]).then(function(vs){ alert("u1+u2 => " + (vs[0]+vs[1])); });
Module Loader
同 io 类似通过用嵌套以及 all 来管理多个 module 代码文件的串行以及并行加载,可以更加清晰得组织代码结构。
Refer:
KISSY.Defer API & KISSY.Promise API
http://wiki.commonjs.org/wiki/Promises
http://en.wikipedia.org/wiki/Futures_and_promises#Read-only_views
http://en.wikipedia.org/wiki/Object-capability_model
https://github.com/kriskowal/q
http://www.sitepen.com/blog/2010/05/03/robust-promises-with-dojo-deferred-1-5/
http://dojotoolkit.org/documentation/tutorials/1.6/deferreds/
http://api.jquery.com/category/deferred-object/
发表评论
-
continuation, cps
2013-09-12 16:49 2707起 随着 nodejs 的兴起,异步编程成为一种潮流 ... -
一种基于匹配回朔的 css3 选择器引擎实现
2013-05-07 20:40 3336一种基于匹配回朔的 css3 选择器引擎实现 介绍 C ... -
模块化高扩展性的前端框架 KISSY
2013-03-14 14:58 8537模块化高扩展性的前端框架 KISSY 注:本文为 2 ... -
cubic-bezier 模拟实现
2013-01-05 16:34 14005cubic-bezier 曲线是 css3 动画的一个重要基石 ... -
构建前端 DSL
2012-10-11 22:10 5273目前在传统的软件开 ... -
KISSY kisses bootstrap navbar
2012-08-03 01:12 5947看了下 bootstrap 的导航菜单,立刻非常喜欢,注意是浅 ... -
Get cursor position and coordinates from textarea
2012-04-10 20:50 4916最近需要从 textarea 中获 ... -
兼容 ie 的 transform
2012-02-23 14:00 6322css 2d transform 是 css3 引入的一个新的 ... -
closure compiler 代码优化实例
2012-01-08 03:23 2761closure compiler 可以进行不少有意思的优化 ... -
write html parser
2011-12-01 02:48 2839首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取 ... -
获取剪贴板数据
2011-11-07 23:31 6367兼容性: 获取剪贴板数据这块各个浏览器间存在很大的 ... -
url 映射问题
2011-11-07 21:52 3156背景 url mapping 我最早知道是作为 j ... -
tip:如何原生播放声音
2011-10-19 12:45 2882如果不想考虑浏览器间 ... -
unified event model
2011-10-14 23:02 1738为了处理原生事件在各 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2778简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2782场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2193分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6923作为前端开放的基础安全保证,caja 是目前比较合 ... -
tokenization of html
2011-08-29 22:38 2668html 符号解析问题 场景: 在页面上输出包 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2405这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ...
相关推荐
基于promise的异步ajax请求库,支持promise所有的API 浏览器端/node端都可以使用,浏览器中创建XMLHttpRequests 支持请求/响应拦截器 支持请求取消 可以转换请求数据和响应数据,并对响应回来的内容自动转换成JSON...
通过该模块提供的 API,开发者们可以方便地创建连接、执行查询、插入、更新、删除操作等,从而实现与 MySQL 数据库的交互。 在使用 mysql 模块时,开发者们可以采用回调函数或 Promise 等方式来编写异步代码,从而...
当工程需要让两个函数在执行上不互相干扰时,同时也不希望它们会会成为主线程,同时,这两个函数还需要实现类似并发多线程之间的协调需求的时候,你可以使用这个并发模拟库,这种这种应用场景很少(扎心了呀) 。...
它与callback一起提供的callback , deferred和promise样式model API一起使用。 *注意:这需要Sails v0.11.0 +。 安装 $ npm install --save sails-hook-scenario 用法 在模型中 在Sails模型中添加scenarios静态...
API实现要求使用promise和Async函数。 我还使用类和模块在实现JavaScript,HTML和CSS最佳实践的同时,以行业标准的代码样式集成了所有内容。场景标题场景主要场景游戏结束现场比分场面建于开发工具JavaScript 移相...
webpack+eslint搭建一个promise场景练习 Usage npm运行 npm install npm run json-server npm start npm运行 npm install npm start Record webpack不打包静态资源并且独立出来放到dist指定文件上,两种方法1....
这里的想法是简化基本场景下与GH API的交互。 它使用promise(因为promise比回调好得多,abstract)。 我正在使用的数据集和用例使它变得非常合理,以便在兑现承诺时发送多个gets和将分页数据的输出汇总在一起是...
采用 ES6+ 语法,将异步 api 使用 Promise 包裹,并采用 jest 进行了完整的单元测试。已适配以下场景:web 场景:使用 localStorage 作为存储对象小程序场景:使用微信提供的原生存储对象Node.js 场景:直接使用内存...
使用 Node.js 模拟发起 http 请求很常用的,但是由于 Node 模块(原生和第三方库)提供里面的方法都是异步,对于很多场景下应用很麻烦,不如同步来的方便。下面总结了几个常见的库 API 从异步转同步的几种方法。模块...
jsHue使用ES6,JSON,promise和fetch API。 (如果需要在较旧的环境中运行jsHue,请考虑使用v0.3.0。) 入门 并将源文件包含在HTML中: < script src =" path/to/jshue.js " > </ script > 然后在您的...
前一阵有完成在小程序内动态生成图片再进行分享的需求,是很常见的场景,因此我抽出了一个小工具CanvasPainter.js,囊括在小程序内canvas画图基本需求: 用配置形式绘图(暂支持单行及多行文本,矩形,圆形,图片及...
异步操作,在进行大量数据存取时不会阻塞应用程序。 适用场景 适用于复杂对象、经常需要序列化处理的数据操作,否则使用 localStorage 更加方便 快速开始 安装 直接在 获取 yux-storage.js (推荐) [removed]...