![冒泡排序
var compare = function (x, y) {
return x - y;
}
var swap = function (a, i, j) {
var t = a[x]; a[x] = a[y]; a[y] = t;
}
var bubbleSort = function (array) {
for (var x = 0; x < array.length; x++) {
for (var y = 0; y < array.length - x; y++) {
if (compare(array[y], array[y + 1]) > 0) {
swap(array, y, y + 1);
}
}
}
}](https://image.slidesharecdn.com/slide-120630074659-phpapp01/85/Jscex-12-320.jpg)
![做成动画
var compare = function (x, y, callback) { var innerLoop = function (array, x, y, callback) {
setTimeout(10, function () { if (y < array.length - x) {
callback(x - y); compare(array[y], array[y + 1], function (r) {
}); if (r > 0) {
} swap(array, y, y + 1, function () {
innerLoop(array, x, y + 1, callback);
var swap = function (a, i, j, callback) { });
var t = a[x]; a[x] = a[y]; a[y] = t; } else {
repaint(a); innerLoop(array, x, y + 1, callback);
}
setTimeout(20, callback); });
} } else {
callback();
var outerLoop = function (array, x, callback) { }
if (x < array) { }
innerLoop(array, x, 0, function () {
outerLoop(array, x + 1, callback); outerLoop(array, 0, function () {
}); console.log("done!");
} else { });
callback();
}
}](https://image.slidesharecdn.com/slide-120630074659-phpapp01/85/Jscex-13-320.jpg)
![做成动画
！
var compare = function (x, y, callback) { var innerLoop = function (array, x, y, callback) {
setTimeout(10, function () { if (y < array.length - x) {
啊
callback(x - y); compare(array[y], array[y + 1], function (r) {
么
}); if (r > 0) {
} swap(array, y, y + 1, function () {
什
innerLoop(array, x, y + 1, callback);
var swap = function (a, i, j, callback) { });
是
var t = a[x]; a[x] = a[y]; a[y] = t; } else {
D
repaint(a); innerLoop(array, x, y + 1, callback);
}
M
setTimeout(20, callback); });
} } else {
T
callback();
var outerLoop = function (array, x, callback) { }
这
if (x < array) { }
innerLoop(array, x, 0, function () {
outerLoop(array, x + 1, callback); outerLoop(array, 0, function () {
}); console.log("done!");
} else { });
callback();
}
}](https://image.slidesharecdn.com/slide-120630074659-phpapp01/85/Jscex-14-320.jpg)
![冒泡排序动画
var compareAsync = eval(Jscex.compile("async", function (x, y) {
$await(Jscex.Async.sleep(10)); // each "compare" takes 10 ms.
return x - y;
}));
var swapAsync = eval(Jscex.compile("async", function (a, x, y) {
var t = a[x]; a[x] = a[y]; a[y] = t; // swap
repaint(a); // repaint after each swap
$await(Jscex.Async.sleep(20)); // each "swap" takes 20 ms.
}));
var bubbleSortAsync = eval(Jscex.compile("async", function (array) {
for (var x = 0; x < array.length; x++) {
for (var y = 0; y < array.length - x; y++) {
var r = $await(compareAsync(array[y], array[y + 1]));
if (r > 0) $await(swapAsync(array, y, y + 1));
}
}
}));](https://image.slidesharecdn.com/slide-120630074659-phpapp01/85/Jscex-15-320.jpg)
![冒泡排序动画
var compareAsync = eval(Jscex.compile("async", function (x, y) {
$await(Jscex.Async.sleep(10)); // each "compare" takes 10 ms.
return x - y;
}));
var swapAsync = eval(Jscex.compile("async", function (a, x, y) {
var t = a[x]; a[x] = a[y]; a[y] = t; // swap
repaint(a); // repaint after each swap
$await(Jscex.Async.sleep(20)); // each "swap" takes 20 ms.
}));
var bubbleSortAsync = eval(Jscex.compile("async", function (array) {
for (var x = 0; x < array.length; x++) {
for (var y = 0; y < array.length - x; y++) {
var r = $await(compareAsync(array[y], array[y + 1]));
if (r > 0) $await(swapAsync(array, y, y + 1));
}
}
}));](https://image.slidesharecdn.com/slide-120630074659-phpapp01/85/Jscex-16-320.jpg)
![function () {
var img = $await(readAsync("http://..."));
console.log("loaded!");
$await(writeAsync("./files/..."));
console.log("saved!");
}
=
(function () {
var _b_ = Jscex.builders["async"];
return _b_.Start(this,
_b_.Delay(function () {
_b_.Bind(readAsync(...), function (img) {
console.log("loaded!");
return _b_.Bind(writeAsync(...), function () {
console.log("saved!");
return _b_.Normal();
});
});
})
);
})](https://image.slidesharecdn.com/slide-120630074659-phpapp01/85/Jscex-22-320.jpg)
![Show Me the Code
exports.getUserActivity = function (uid, me_uid, count, page, cb) {
var query = models.Activity.find(...).where(...).desc(...);
query.exec(function (err, activities) {
if (err) return cb(err);
for (var i = 0; i < activities.length; i++) {
var activity = activities[i];
var board_id = activity.data.board.board_id;
db.ActivityData.getBoard(board_id, function (err, board) {
// how to execute async operations in a loop?
});
}
});
};](https://image.slidesharecdn.com/slide-120630074659-phpapp01/85/Jscex-37-320.jpg)
![Jscex化
exports.getUserActivityAsync = eval(..., function (...) {
var query = models.Activity.find(...).where(...).desc(...);
var activities = $await(query.execAsync());
for (var i = 0; i < activities.length; i++) {
var activity = activities[i];
var board_id = activity.data.board.board_id;
var board = $await(db.ActivityData.getBoardAsync(board_id));
...
}
}));](https://image.slidesharecdn.com/slide-120630074659-phpapp01/85/Jscex-38-320.jpg)
Jscex：案例、经验、阻碍、展望
- 1. Jscex 案例、经验、阻碍、展望 赵劼 - 2012.6
- 2. 关于我 • 赵劼 / 老赵 / Jeffrey Zhao / 赵姐夫 • 日写代码三百行，不辞长作程序员 • 博客：http://blog.zhaojie.me/ • 微博：@老赵 • F#, JavaScript, Scala, C#, Python, .NET, Mono... • 痛恨Java语言
- 3. 内容提纲 • 简介 • 案例 • 经验 • 阻碍 • 展望
- 4. 简介
- 5. 关注人数 • Node.js流程控制模块（80多个） • Async：2500+ • Step：900+ • Jscex：600+ • Fiber：500+ • …
- 6. 唐凤大侠好评
- 9. Jscex是什么？ • JavaScript Computation EXpression • JavaScript语言扩展，用于改善某些常 见场景下的编程（如异步编程） • F#计算表达式特性的JavaScript移植 • 受“计算表达式”特性启发 • 为JavaScript设计，基于JavaScript实现
- 10. Jscex不是什么？ • 另⼀一种语言： • Jscex是百分百的JavaScript • 框架 • Jscex是类库，能够与几乎任何类库/框架⼀一起使用 • JavaScript引擎/运行时 • 在任何ECMAScript 3上执行
- 11. 浅尝辄止
- 12. 冒泡排序 var compare = function (x, y) { return x - y; } var swap = function (a, i, j) { var t = a[x]; a[x] = a[y]; a[y] = t; } var bubbleSort = function (array) { for (var x = 0; x < array.length; x++) { for (var y = 0; y < array.length - x; y++) { if (compare(array[y], array[y + 1]) > 0) { swap(array, y, y + 1); } } } }
- 13. 做成动画 var compare = function (x, y, callback) { var innerLoop = function (array, x, y, callback) { setTimeout(10, function () { if (y < array.length - x) { callback(x - y); compare(array[y], array[y + 1], function (r) { }); if (r > 0) { } swap(array, y, y + 1, function () { innerLoop(array, x, y + 1, callback); var swap = function (a, i, j, callback) { }); var t = a[x]; a[x] = a[y]; a[y] = t; } else { repaint(a); innerLoop(array, x, y + 1, callback); } setTimeout(20, callback); }); } } else { callback(); var outerLoop = function (array, x, callback) { } if (x < array) { } innerLoop(array, x, 0, function () { outerLoop(array, x + 1, callback); outerLoop(array, 0, function () { }); console.log("done!"); } else { }); callback(); } }
- 14. 做成动画 ！ var compare = function (x, y, callback) { var innerLoop = function (array, x, y, callback) { setTimeout(10, function () { if (y < array.length - x) { 啊 callback(x - y); compare(array[y], array[y + 1], function (r) { 么 }); if (r > 0) { } swap(array, y, y + 1, function () { 什 innerLoop(array, x, y + 1, callback); var swap = function (a, i, j, callback) { }); 是 var t = a[x]; a[x] = a[y]; a[y] = t; } else { D repaint(a); innerLoop(array, x, y + 1, callback); } M setTimeout(20, callback); }); } } else { T callback(); var outerLoop = function (array, x, callback) { } 这 if (x < array) { } innerLoop(array, x, 0, function () { outerLoop(array, x + 1, callback); outerLoop(array, 0, function () { }); console.log("done!"); } else { }); callback(); } }
- 15. 冒泡排序动画 var compareAsync = eval(Jscex.compile("async", function (x, y) { $await(Jscex.Async.sleep(10)); // each "compare" takes 10 ms. return x - y; })); var swapAsync = eval(Jscex.compile("async", function (a, x, y) { var t = a[x]; a[x] = a[y]; a[y] = t; // swap repaint(a); // repaint after each swap $await(Jscex.Async.sleep(20)); // each "swap" takes 20 ms. })); var bubbleSortAsync = eval(Jscex.compile("async", function (array) { for (var x = 0; x < array.length; x++) { for (var y = 0; y < array.length - x; y++) { var r = $await(compareAsync(array[y], array[y + 1])); if (r > 0) $await(swapAsync(array, y, y + 1)); } } }));
- 16. 冒泡排序动画 var compareAsync = eval(Jscex.compile("async", function (x, y) { $await(Jscex.Async.sleep(10)); // each "compare" takes 10 ms. return x - y; })); var swapAsync = eval(Jscex.compile("async", function (a, x, y) { var t = a[x]; a[x] = a[y]; a[y] = t; // swap repaint(a); // repaint after each swap $await(Jscex.Async.sleep(20)); // each "swap" takes 20 ms. })); var bubbleSortAsync = eval(Jscex.compile("async", function (array) { for (var x = 0; x < array.length; x++) { for (var y = 0; y < array.length - x; y++) { var r = $await(compareAsync(array[y], array[y + 1])); if (r > 0) $await(swapAsync(array, y, y + 1)); } } }));
- 17. 异步编程十分困难
- 18. 破坏代码局部性 • 程序员习惯线性地表达算法 • 异步代码将逻辑拆分地支离破碎 • 难以 • 异步操作之间的协作及组合 • 处理异常及取消
- 19. 异步函数 // 使用异步构造器执行编译后的代码 var somethingAsync = eval(Jscex.compile("async", function (...) { // 实现 } ));
- 20. 响应 function () { var res = $await(<async work>); }
- 21. 响应 function () { var res = $await(<async work>); } HTTP请求 UI事件 时钟回调 查询响应 Web Service响应 代理消息
- 22. function () { var img = $await(readAsync("http://...")); console.log("loaded!"); $await(writeAsync("./files/...")); console.log("saved!"); } = (function () { var _b_ = Jscex.builders["async"]; return _b_.Start(this, _b_.Delay(function () { _b_.Bind(readAsync(...), function (img) { console.log("loaded!"); return _b_.Bind(writeAsync(...), function () { console.log("saved!"); return _b_.Normal(); }); }); }) ); })
- 23. I/O并行 • 许多程序是I/O密集型应用 • 使用Web服务 • 使用磁盘上的数据 • 网络和磁盘速度发展很慢 • I/O资源天然可以并行 • 提高性能的关键方式
- 24. 首要设计原则
- 25. Jscex即JavaScript • 语言特性 • 语言语义 • 编程体验
- 26. 语言特性 • 支持几乎所有JavaScript语言功能 • 循环：while / for / for...in / do • 判断：if / switch • 错误处理：try...catch...finally • 其他：return / break / continue / throw • 嵌套函数 • 不支持的语言特性 • with块 • 带标签的break和continue • switch内带条件的break
- 27. 语言语义 • 保持完整的JavaScript语义 • 独立的“bind”操作（例如$await） • 语言里的唯⼀一扩展 • 表现形式为“方法调用” • 清楚表明“特殊”的操作
- 28. 编程体验 • 如JavaScript⼀一般编写、执行、调试 • 修改后立即生效 • 没有额外的编译步骤 • 代码执行过程中由JIT编译器生成代码
- 29. 案例
- 30. 有JS的地方就有Jscex • 浏览器 • Node.js • PhoneGap • Windows 8 Metro • ……
- 31. 工作台
- 36. “工作台”简介 • 为敏捷团队和个人打造的任务协同和事 物管理的生产力工具 • 前后端均使用JavaScript • Node.js，Socket.io，Mongoose，…… • 挑战：完全异步编程在某些同步需求下 变得非常难于实现
- 37. Show Me the Code exports.getUserActivity = function (uid, me_uid, count, page, cb) { var query = models.Activity.find(...).where(...).desc(...); query.exec(function (err, activities) { if (err) return cb(err); for (var i = 0; i < activities.length; i++) { var activity = activities[i]; var board_id = activity.data.board.board_id; db.ActivityData.getBoard(board_id, function (err, board) { // how to execute async operations in a loop? }); } }); };
- 38. Jscex化 exports.getUserActivityAsync = eval(..., function (...) { var query = models.Activity.find(...).where(...).desc(...); var activities = $await(query.execAsync()); for (var i = 0; i < activities.length; i++) { var activity = activities[i]; var board_id = activity.data.board.board_id; var board = $await(db.ActivityData.getBoardAsync(board_id)); ... } }));
- 39. 并行化 exports.getUserActivityAsync = eval(..., function (...) { var query = models.Activity.find(...).where(...).desc(...); var activities = $await(query.execAsync()); var boardsTasks = _.map(activities, function (a) { var board_id = a.data.board.board_id; // no $await! return db.ActivityData.getBoardAsync(board_id); }); // execute in parallel var boards = $await(Task.whenAll(boardsTasks)); }));
- 40. 剂量率监测报警系统
- 43. 检测声光报警系统 • 使用移动终端监测 RS131 剂量率检测设 备，方便用户随时查看设备检测值 • 使用Cordova制作的iPhone软件（企业内 部署） • 场景 • 闪光灯会循环⼀一明⼀一暗，并循环播放报警声音 • 弹出⼀一个警告对话框提醒用户当前报警值，用户点 击后即停止
- 44. var isAlerting = false; function startAlert() { isAlerting = true; //全局报警开 setTimeout(flashOn, 500); } function stopAlert() { isAlerting = false; } function flashOn() { if (isAlerting) { window.plugins.torch.turnOn(); //开启闪光灯 setTimeout(flashOff, 500); } } function flashOff() { window.plugins.torch.turnOff(); //关闭闪光灯 if (isAlerting) { setTimeout(flashOn, 500); } }
- 46. var showAlert = eval(..., function () { // 取消功能 var ct = new CancellationToken(); showFlash(ct).start(); // 启动showFlash任务，但不等待 // 等待用户点击确认按钮 $await(Async.onEvent(btnOK, "click")); ct.cancel(); // 取消showFlash任务 })); var showFlash = eval(..., function (ct) { try { while (true) { window.plugins.torch.turnOn(); $await(Async.sleep(500, ct)); // 等待500毫秒 window.plugins.torch.turnOff(); $await(Async.sleep(500, ct)); // 等待500毫秒 } } catch (cex) { window.plugins.torch.turnOff(); } }));
- 47. Oracle旧系统改造
- 48. 系统改造 • 旧方案 • 使用⼀一个几乎透明的中间件连通客户端和Oracle • 几乎所有业务和计算都使用Oracle存储过程实现 • 新方案 • 使用Node.js承担业务逻辑和计算职责 • 使用redis作为缓存
- 49. 挑战与应对 • 挑战 • 将Oracle编写的业务逻辑移植到Node.js代码 • 在异步环境中编写复杂业务逻辑 • 应对 • 将Oracle存储过程自动转化为JS代码 • 稍作修改，配合Jscex即可使用
- 51. 阻碍
- 52. 思维的怪诞
- 53. 人类学会了行走
- 54. 冰天雪地
- 55. 雪橇？ 趴着走是趋势，要迎合 NO. 趴着走是文化，要遵循
- 56. ……
- 57. 异步编程 • 异步是⼀一种性质，不是⼀一种编程模型 • 异步有多种编程模型，不同场景适合不 同模型 • 迎合语言限制并无不可，但因此开始享 受是可悲的
- 58. 固有的错误思维 • eval is (always) evil • API太丑，eval为什么不封装？ • 看不懂，不用 • 编译很重很慢，不适合前端 • 生成的代码看不懂，难以调试 • ……
- 59. 经验
- 60. 用户是需要教育的 • 用户并不知道自己想要什么 • 先进的理念会遇到很大阻碍 • 从容易接受的群众下手，威逼利诱，不 择手段
- 61. 开源软件推广 • 做⼀一个开源软件很容易，推广⼀一个开源 软件很难 • 技术外的东西十分重要，会耗费大量精 力（文档，网站，社区，…） • ⼀一定要争取共同开发者 • 坚持，坚持，再坚持
- 62. 接受无奈 • 授权 • 公司文化 • 屌丝身份 • 高帅富：Sea.js
- 63. 展望
- 64. 专业化 • 更多的单元测试 • 目前测试覆盖率低于30% • 下⼀一版本尽可能做到80% • 更好的调试及错误定位支持 • Source Map • 调试工具
- 65. 现代化 • 基于更成熟的解析器（Esprima） • ECMAScript 5支持 • 更丰富的基础类库 • 更多第三方组件的支持
- 66. 社区化 • 更多的社区参与度 • 吸引贡献者 • 代码 • 示例 • 文档
- 67. 国际化 • 英文资源（网站，文档，…） • 英文媒体 • 英文社区 • Node.js • HTML 5 • Windows 8
- 68. 立即使用 • 基于BSD协议发布 • 站点 • 主站：http://jscex.info/ • 源码：https://github.com/JeffreyZhao/jscex
- 69. Q &A
- 70. 谢谢