Skip to content 
TooBug学习ES6生成器（Generator）
2013年12月29日
这几天，TJ大神的koa框架突然在国内火起来了，随之而来的，则是其使用的ES6生成器（Generator）引起了广大码农的强烈兴趣，各种文章也如雨后春笋般拔地而起，比如这篇、这篇、还有这篇。这个神奇的生成器被视为解决JS“回调恶魔金字塔”的利器。在动手实践之后，发现介绍ES6生成器的文章仍然有些疏漏，因此有了这篇文章，权当是对各位大大们的补充好了。
背景
在JS的使用场景中，异步操作的处理是一个不可回避的问题，如果不做任何抽象、组织，只是“跟着感觉走”，那么面对“按顺序发起3个ajax请求”的需求，很容易就能写出如下代码（假设已引入jQuery）：
javascript
// 第1个ajax请求
$.ajax({
url:'http://echo.113.im',
dateType:'json',
type:'get',
data:{
data:JSON.stringify({status:1,data:'hello world'}),
type:'json',
timeout:1000
},
success:function(data){
if(data.status === 1){
// 第2个ajax请求
$.ajax({
......此处省略500字
success:function(data){
if(data.status === 1){
// 第3个ajax请求
$.ajax({
......此处省略500字
success:function(data){
if(data.status === 1){
}
}
});
}
}
});
}
}
});// 第1个ajax请求
$.ajax({
url:'http://echo.113.im',
dateType:'json',
type:'get',
data:{
data:JSON.stringify({status:1,data:'hello world'}),
type:'json',
timeout:1000
},
success:function(data){
if(data.status === 1){
// 第2个ajax请求
$.ajax({
......此处省略500字
success:function(data){
if(data.status === 1){
// 第3个ajax请求
$.ajax({
......此处省略500字
success:function(data){
if(data.status === 1){
}
}
});
}
}
});
}
}
});当顺序执行的异步操作越来越多的时候，回调层级也就越多，这也就是传说中的“回调恶魔金字塔”。
《迟到的间隔年》
2013年12月2日
【科普文】有关文件格式
2013年11月26日
关于国外开发者的感受
2013年11月11日
印象西湖
2013年11月1日
【电影】孙子从美国来
2013年10月30日
遇见未知的自己
2013年10月29日
如何设计一个前端模板引擎
2013年8月25日
前端模板引擎现在已经被广泛应用于前端开发了，几乎每个项目都会使用。微博上甚至出现了“不写个模板引擎就没办法在前端界混了”的言论。当然，这是玩笑话，却也能在一定程度上反映前端模板的普及程度。如果你还没有了解过前端模板引擎，赶紧去补补课吧。
本文其实算不上是一篇讲模板引擎设计的文章，写这篇文章的动力来自于自己使用过一些模板引擎（jQuery Tmpl、jade、ejs、artTemplate以及ThinkPHP自带后端模板引擎）之后的心得，所以可能不会涉及到模板引擎设计的方方面面，更多地是讲模板引擎之间的一些有差异的细节以及我的思考和取舍。
来历
javascript
var tempHtml = '<table>' +
' <tr>' +
' <th>Hello</th>' +
' <th>World</th>' +
' <th>!</th>' +
' </tr>' +
' <tr>' +
' <td>' + myData.col1 + '</td>' +
' <td>' + myData.col2 +'</td>' +
' <td>' + (myData.col3 === 'yes'?'!':'?') + '</td>' +
' </tr>' +
' </table>';
document.querySelector('#myDiv').innerHTML = tempHtml;var tempHtml = '<table>' +
' <tr>' +
' <th>Hello</th>' +
' <th>World</th>' +
' <th>!</th>' +
' </tr>' +
' <tr>' +
' <td>' + myData.col1 + '</td>' +
' <td>' + myData.col2 +'</td>' +
' <td>' + (myData.col3 === 'yes'?'!':'?') + '</td>' +
' </tr>' +
' </table>';
document.querySelector('#myDiv').innerHTML = tempHtml;相信上面的代码对哪怕做过一点点涉及界面开发的都应该很熟悉吧。当我们想把一段结构和一段数据组合起来，再放到页面上时，就会常常面临这样一段复杂的代码。
这段代码相信不用我说你也会觉得它实在有点复杂：要处理结构中字符串本身的拼接，还要注意结构与数据的拼接，处理数据拼接时还要注意运算优先级（尤其在使用?:三元运算符时），还要为了可读性考虑纠结的缩进……
当然，最麻烦的还不是这里，当我们想要对一个数据循环遍历并输出时，居然还要自己去写循环，再一圈一圈地把这些结构拼起来，最后再拼上首尾的结构。而当数据为空时，又要自己去写一个“暂无数据”之类的占位符……
很小的一本书——《还钱的故事》
2013年7月9日
流氓的比喻
2013年6月8日
致青春
2013年5月2日
雅安，加油！
2013年4月22日