wind.js助力异步编程

16 篇文章 0 订阅

出处:http://blog.fens.me/nodejs-async-windjs/

之前用的是step。看到这个,真是眼前一亮,忍不住转载了。

1. Wind.js介绍

Wind.js是很有特点的一个JavaScript异步编程类库(其前身为Jscex), Wind.js的唯一目的便是“改善编程体验”,改善的“程度”以及改善的“方式”便是Wind.js与其他异步流程控制方案最大的区别。Wind.js的设计思路便是将这种抽象构建为JavaScript本身。通过$await函数标识对代码进行自动重写,JIT编译(Just in Time),从而避免人工的预编译。

我们可以在github上面找到这个项目:https://github.com/JeffreyZhao/wind

2. Wind.js安装

我的系统环境

  • win7: 64bit
  • npm: 1.2.19
  • node: v0.10.5

Wind.js安装

~ mkdir node-windjs
~ cd node-windjs

npm install wind
npm http GET https://registry.npmjs.org/wind
npm http 200 https://registry.npmjs.org/wind
npm http GET https://registry.npmjs.org/wind/-/wind-0.7.3.tgz
npm http 200 https://registry.npmjs.org/wind/-/wind-0.7.3.tgz
npm WARN package.json wind@0.7.3 No readme data!
wind@0.7.3 node_modules\wind

3. 场景一:独立事件,并行

接下来我们要做的事情,会非常有意思。

定义3个函数A(),B(),C()
A():耗时3秒完成
B():耗时5秒完成
C():瞬时时完

A(),B(),C()为3个独立事件,并行运行
stage1

var A = function(){
    setTimeout(function(){
        console.log("Finish A");
    },3000);
    console.log("Start A");
}

var B = function(){
    setTimeout(function(){
        console.log("Finish B");
    },5000);
    console.log("Start B");
}

var C = function(){
    console.log("Start C");
    console.log("Finish C");
}

A();
B();
C();

//结果 
Start A
Start B
Start C
Finish C
Finish A
Finish B

程序执行没有任何问题,按照执行时间,打印出了Finish的顺序:C,A,B

直接使用Javascript代码,可以很好地完成功能。

4. 场景二:依赖事件,串行

A(),B(),C()串行
stage2

1). callback嵌套方式

var A = function(){
    setTimeout(function(){
        console.log("Finish A");
        B();
    },3000);
    console.log("Start A");
}

var B = function(){
    setTimeout(function(){
        console.log("Finish B");
        C();
    },5000);
    console.log("Start B");
}

var C = function(){
    console.log("Start C");
    console.log("Finish C");
}

A();

// 结果
Start A
Finish A
Start B
Finish B
Start C
Finish C

虽然,我们实现A,B,C串行的结果,但是代码看起来就有些不好看了。B()的调入被嵌入到了A()函数中,C()的调用也被嵌入到的B()的函数中。如果我们的调用流程再长些,回调嵌套就会成为挥之不去的噩梦啊!!

2). Wind.js方式

var Wind = require("wind");
var Task =  Wind.Async.Task;

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 task = eval(Wind.compile("async", function () {
    $await(A());
    $await(B());
    $await(C());
}));
task().start();

//结果 
Start A
Finish A
Start B
Finish B
Start C
Finish C

结果就是我们想要的,我们是按照$await(A()),$await(B()),$await(C())的顺序定义的,而且顺序执行的。比起callback嵌套方式的,大有改观,更便于以后的代码维护。

5. 场景三:组合事件,并行+串行

先A(),B()并行,都完成后再运行C()
stage3

1). callback嵌套方式
同时,引入一个全局变量stat,判断A,B的完成情况。

var A = function(){
    setTimeout(function(){
        console.log("Finish A");
        if(++stat == 2) C();
    },3000);
    console.log("Start A");
}

var B = function(){
    setTimeout(function(){
        console.log("Finish B");
        if(++stat == 2) C();
    },5000);
    console.log("Start B");
}

var C = function(){
    console.log("Start C");
    console.log("Finish C");
}

var stat=0;
A();
B();

//结果
Start A
Start B
Finish A
Finish B
Start C
Finish C

虽然实现功能,但代码已经混乱了。我相信大部分人都不愿意去维护这样的代码的。

2). Wind.js方式

var Wind = require("wind");
var Task =  Wind.Async.Task;

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 task = eval(Wind.compile("async", function () {
    $await(Task.whenAll(A(),B()));
    $await(C());
}));
task().start();

//结果
Start A
Start B
Finish A
Finish B
Start C
Finish C

wind.js又一次拯救我们的代码,这样的代码有章有法,看起来才舒服。

wind.js帮助我们很好地规范了异步编程,用过了,你还舍得放弃吗?




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ArcGIS API for JavaScript 4.x 中包含了一个名为 Wind.js 的模块,用于绘制风场效果。Wind.js 是一个由 Vladimir Agafonkin 开发的 JavaScript 库,用于在 Web 上渲染大规模天气数据。 使用 Wind.js 可以轻松地绘制出具有流动感的风场效果,可以在地图上显示风向和风速等信息。在 ArcGIS API for JavaScript 4.x 中,可以通过导入 Wind.js 模块并使用该模块提供的方法来实现风场效果的绘制。 以下是一个使用 ArcGIS API for JavaScript 4.x 和 Wind.js 绘制风场效果的示例代码: ```javascript require([ "esri/Map", "esri/views/SceneView", "esri/layers/GraphicsLayer", "esri/Graphic", "dojo/domReady!" ], function(Map, SceneView, GraphicsLayer, Graphic) { // 创建地图 var map = new Map({ basemap: "streets", ground: "world-elevation" }); // 创建场景视图 var view = new SceneView({ container: "viewDiv", map: map, camera: { position: [-118.244, 34.052, 25000], tilt: 70 } }); // 创建图形图层 var graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); // 导入 Wind.js 模块 require([ "widgets/Wind-js/wind-js" ], function(wind) { // 加载风场数据 var url = "data/wind-global.json"; fetch(url).then(function(response) { return response.json(); }).then(function(data) { // 创建 Wind.js 实例 var windLayer = new wind.WindGL({ map: map, data: data, colorScale: [ [65, 105, 225, 0.5], [255, 255, 255, 1.0], [255, 255, 0, 1.0], [255, 0, 0, 1.0], [128, 0, 128, 1.0], [0, 0, 255, 1.0], [0, 255, 255, 1.0], [0, 255, 0, 1.0], [255, 255, 255, 1.0] ] }); // 将风场效果添加到图形图层中 graphicsLayer.add(new Graphic({ geometry: windLayer.getGeometry(), symbol: windLayer.getSymbol() })); }); }); }); ``` 在这个示例代码中,我们首先创建了一个地图和一个场景视图,并将其显示在页面上。然后我们创建了一个图形图层,用于显示风场效果。接着,我们通过导入 Wind.js 模块和加载风场数据来创建了一个 Wind.js 实例,并将其添加到图形图层中。最后,我们将图形图层添加到地图中,完成了风场效果的绘制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值