2018年8月

ES7(ECMAScript 2016)推出了Async函数(async/await),实现了以顺序、同步代码的编写方式来控制异步流程,彻底解决了困扰JavaScript开发者的“回调地狱”问题。比如,之前需要嵌套回调的异步逻辑:

const result = [];
// pseudo-code, ajax stand for an asynchronous request
ajax('url1', function(err, data){
    if(err) {...}
    result.push(data)
    ajax('url2', function(err, data){
        if(err) {...}
        result.push(data)
    })
})
console.log(result)

现在可以写成如下同步代码的样式了:

async function example() {
  const r1 = await new Promise(resolve =>
    setTimeout(resolve, 500, 'slowest')
  )
  const r2 = await new Promise(resolve =>
    setTimeout(resolve, 200, 'slow')
  )
  return [r1, r2]
}

example().then(result => console.log(result))
// ['slowest', 'slow']

Async函数需要在function前面添加async关键字,同时内部以await关键字来“阻塞”异步操作,直到异步操作返回结果,然后再继续执行。在没有Async函数以前,我们无法想象下面的异步代码可以直接拿到结果:

const r1 = ajax('url')
console.log(r1)
// undefined

这当然是不可能的,异步函数的结果只能在回调里拿到。可以说,Async函数是JavaScript程序员在探索如何高效异步编程过程中踩“坑”之后的努力“自救”获得的成果——不是“糖果”。然而,读者小哥哥小姐姐可能有所不知,Async函数实际上是一个语法糖(果然是“糖果”吗?),它的背后是ES6(ECMAScript 2015)中推出的Promise、Iterator和Generator,我们简称“PIG”。本文就带各位好好品尝品尝这块语法糖,感受一个PIG是如何成就Async函数的。

- 阅读剩余部分 -

计算机科学领域有几个概念,乍一听很相似,但实际上差别非常大,它们是:迭代、遍历、枚举、递归、循环。

这些概念,对于写码为生的人而言,大部分都应该不陌生。但如果让谁确切地说出它们的含义,恐怕还真没有几个能够全都说对的。时间关系,本文就简单地对这些概念做一番梳理,供大家参考。

1. 迭代(iteration)

迭代,是一个重复的过程,目的是为了输出一系列值(可能是无穷序列)。每次重复的过程也叫一次“迭代”,一次迭代的结果,可以作为下一次迭代的起点。

2. 遍历(traversal)

遍历,一般是指对树形数据结构的操作,比如树遍历(也叫树搜索),就是对树形数据结构每个节点进行访问(为了检查和/或更新),且每个节点只访问一次。这种遍历是按照访问节点的顺序分类的,比如深度优先或宽度优先。

- 阅读剩余部分 -

Flexbox已经得到主流浏览器较新版本的广泛支持。对于某些需要兼容的旧版本浏览器,只要调整一下语法或提供商前缀,基本上也没问题。

两套属性

Flexbox有两套属性,一套针对可伸缩容器(flexible container),一套针对容器的直接子元素,或可伸缩项(flexible item)。

Flex容器,即应用display:flex;display: inline-flex规则的元素,可以接受如下属性:

  • flex-direction:指定主轴方向是水平还是垂直
  • flex-wrap:指定可伸缩项是否折行
  • flex-flow:以上两个属性的简写形式
  • justify-content:指定可伸缩项在主轴方向上的对齐方式
  • align-items:指定可伸缩项在辅轴方向上的对齐方式
  • align-content:指定多行可伸缩项在辅轴方向上的对齐方式

容器的直接子元素或者可伸缩项,可以接受如下属性:

  • flex-grow:指定当前项如何扩展
  • flex-shrink:指定当前项如何收缩
  • flex-basis:指定分配剩余空间之前当前项的初始大小
  • flex:以上三个属性的简写形式
  • order:指定当前项在容器中出现的次序

针对容器的属性非常容易理解,而针对可伸缩项的属性则不好理解。更确切地说,是flex-growflex-shrinkflex-basis属性不好理解。只有理解了这三个属性,你才能说自己真正理解了Flexbox。

- 阅读剩余部分 -