学习canvas已经有一阵子了,忙完了计组课设,考完了数据挖掘,终于有时间来做一点小Demo来巩固自己所学的知识了。就像上面介绍的那样,这是一个使用Canvas进行图片处理的Demo,其可以选择本地图片,改变其R G B 以及透明度,然后可以选择保存到本地。并且为了重温很久没碰的React,前端使用了React,使用Redux进行数据的管理(虽然简单到没必要使用),并且使用了css modules 以便直接在组件中使用css。当然这一切都是在使用webpack进行编译打包的情况下。
var a = 1; function *foo(){ a++; yield; console.log(a); } functionbar(){ a++; } var iter = foo(); iter.next(); bar(); iter.next(); // 3
分析一下: 首先我们创建了一个生成器foo(注意*),该函数里面多了一个yield,有过python经验的大概知道这是干什么的。然后创建了一个函数bar;再来看执行,这里var iter = foo()并没有执行生成器foo,而是构建了一个迭代器,然后使用next方法启动了迭代器foo,并且在碰到yield停止执行,此时已经执行了x++,然后执行函数bar,执行完后,x经过两轮自增,此时x的值为3;最后我们调用next方法,从上一次中断处继续执行,并且没有碰到yield表达式,一直执行到函数结束,打印变量x的值为3。
function *foo(a, b){ a++; yield a; return a + b; } var it = foo(1,2); var mid = it.next(); console.log(mid.value); // 2 var res = it.next(); console.log(res.next); // 4
function *foo(a){ var b = a + (yield'ok return!'); return b; } var it = foo(1); var res = it.next(); console.log(res.value); // ok return! res = it.next(2); console.log(res.value); // 3
function *gen(a){ var b = a + (yield) return b } var it1 = gen(1); var it2 = gen(2); it1.next(); var res = it1.next(3).value; it2.next(); console.log(it2.next(res).value); // 6