随着前端的发展,异步这个词真是越来越常见了。假设我们现在有这么一个异步任务:

向服务器发起数次请求,每次请求的结果作为下次请求的参数。

来看看我们都有哪些处理方法:

Callbacks

最先想到也是最常用的便是回调函数了,我们来进行简单的封装:

const makeAjaxCall = (url, cb) => {  
    // do some ajax
    // callback with result
}

makeAjaxCall('http://url1', (result) => {  
    result = JSON.parse(result)
})

嗯,看起来还不错!但是当我们尝试嵌套多个任务时,代码看起来会是这样的:

makeAjaxCall('http://url1', (result) => {  
    result = JSON.parse(result)

    makeAjaxCall(`http://url2?q=${result.query}`, (result) => {
        result = JSON.parse(result)

        makeAjaxCall(`http://url3?q=${result.query}`, (result) => {
            // ...
        })
    })
})

天哪!快让那堆 }) 见鬼去吧!

于是,我们想尝试借助 JavaScript 事件模型:

...

今天在爆栈上刷信仰积分时看到这样一道问题

How to animate the height of the background image

I have tried the following scenario which I need to animate my background image like filling from bottom to top on hover of my div. Whereas my animation is not like filling from bottom instead its like sliding from bottom to top. Can any one suggest me the right way how I can achieve my result. I am ok with jQuery animation as well and css3 keyframe animation.

Code:

<div class="bg"><span></span></div>  
.bg {
  background: url(...) no-repeat center;
  height: 250px;
  position: relative;
}
span {  
  background: url(...) no-repeat top 32px center;
  bottom: 0px;
  height: 0;
  transition: height 0.5s;
  position: absolute;
  right: 0;
  left: 0;
}
.bg:hover span {
  height: 184px;
}

大意是要实现一个背景图片自下而上展开的效果,如图:

...

本文经过 JavaScript Anti-Pattern Organization 认证,予以公示。阅读前请大呼三声「我决不使用文中代码模式!」。

我们都知道,在 JavaScript 的世界里(文中指 ECMAScript 5 及更早期版本)有三种方式来声明函数[1]

I. 函数声明

function name([param] [, param] [..., param]) {  
   statements
}

II. 函数表达式

function [name]([param] [, param] [..., param]) {  
   statements
}

III. Function 构造函数

[new] Function (arg1, arg2, ... argN, functionBody)

OK,那么让我们看看如何玩坏它。

...

格式约定:
1. 绑定在对象上的静态方法使用 Object.method 表示,如 Promise.resolve
2. 对象实例的方法使用 instance#method 表示,如 Promise#then

本文所出现的 concat 示例代码可以在 Github Gist 上找到

文中代码可能引起强烈不适,非战斗人员请撤离

Callback vs Promise

熟悉 JavaScript 的程序员一定都了解其事件模型和回调函数,如:

img.addEventListener('load', function imgLoaded() {  
    // do something after image loaded
});

上面这段代码表示在一个图片元素加载完成时,触发回调函数 imgLoaded()

假设我们现在有这么个需求:利用 node.js 实现简单的文件合并功能,通过传入一个包含资源路径和输出路径的配置对象,合并资源路径下的所有 *.js 文件并输出到指定路径。

...