Windjs应用

　　一个异步的js类库，应用价值不大，所以代码也没在维护了。在做h5特效或者游戏动画方面有点用处。

　　$await是Windjs的核心api。具体可以check 浅谈Jscex的$await语义及异步任务模型

　　具体使用demo：

var A = eval(Wind.compile("async", function () {
  console.log("Start A");
  $await(Wind.Async.sleep(3000));
  console.log("Finish A");
}));

var B = eval(Wind.compile("async", function () {
    console.log("Start B");
    $await(Wind.Async.sleep(5000));
    console.log("Finish B");
}));

var C = eval(Wind.compile("async", function () {
    console.log("Start C");
    console.log("Finish C");
}));

var run = eval(Wind.compile('async', function() {
  $await(A());
  $await(B());
  $await(C());
}));

run().start();

　　简单地说就是将线程挂起了。我们可以试着用Windjs画一个圆，在大部分平台上编写这样的程序并没有太大困难，只要在绘制出图形之后短暂地阻塞线程就行了。可惜，在JavaScript中我们只能“一蹴而就”，要暂停的话，只能使用setTimeout进行回调了。不过，这也正是Windjs的用武之地，用Windjs编写的代码需要“暂停”，只需要简单地调用sleep异步方法，一切都很直接。js里$await方法一定要封装在eval中。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script src="http://files.cnblogs.com/files/zichi/wind-all-0.7.3.js"></script>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = 250;
var y = 250;
var r = 100;
var frontX = x - r;
var frontY = y;

var drawAsync = eval(Wind.compile('async', function() {
for(var i = x - r; i <= x + r; i++) {
var tempY = Math.sqrt(r * r - (x - i) * (x - i));
ctx.beginPath();
ctx.lineWidth = 5;
ctx.moveTo(frontX, frontY);
ctx.lineTo(i, y+ tempY);
$await(Wind.Async.sleep(10));
ctx.stroke();
frontX = i;
frontY = y + tempY;
}

for(var i = x + r; i >= x - r; i--) {
var tempY = Math.sqrt(r * r - (x - i) * (x - i));
ctx.beginPath();
ctx.lineWidth = 5;

ctx.moveTo(frontX, frontY);
ctx.lineTo(i, y - tempY);
$await(Wind.Async.sleep(10));
ctx.stroke();
frontX = i;
frontY = y - tempY;
}
}));
drawAsync().start();
};
</script>
</head>
<body>
<canvas id='canvas' width=500 height=500 >
</canvas>
</body>
</html>

相关文章