Upcoming SlideShare
×

# Jscex: Write Sexy JavaScript (中文)

14,350 views
14,304 views

Published on

1 Comment
13 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• cool

Are you sure you want to  Yes  No
Views
Total views
14,350
On SlideShare
0
From Embeds
0
Number of Embeds
7,594
Actions
Shares
0
218
1
Likes
13
Embeds 0
No embeds

No notes for slide

### Jscex: Write Sexy JavaScript (中文)

1. 1. JscexWrite Sexy JavaScript - - 2011.5
2. 2. • / / Jeffrey Zhao /•• http://blog.zhaojie.me/• @• F#, JavaScript, Scala, C#, Python, .NET, Mono...• Java
3. 3. Jscex• JavaScript Computation EXpression• JavaScript• F# JavaScript • “ ” • JavaScript JavaScript
4. 4. Jscex• • Jscex JavaScript• • Jscex /• JavaScript / • ECMAScript 3
5. 5. 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); } } }}
6. 6. 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(); }}
7. 7. 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(); }}
8. 8. 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)); } }}));
9. 9. 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)); } }}));
10. 10. JavaScript•••
11. 11. • JavaScript • while / for / for...in / do • if / switch • try...catch...ﬁnally • return / break / continue / throw• • with • break continue • switch break•
12. 12. • JavaScript• “bind” \$await • • “ ” • “ ”
13. 13. • JavaScript•• • JIT
14. 14. ••• • •
15. 15. //var somethingAsync = eval(Jscex.compile("async", function (...) { // }));
16. 16. function () { var res = \$await(<async work>);}
17. 17. function () { var res = \$await(<async work>);} HTTP UI Web Service
18. 18. 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(); }); }); }) );})
19. 19. Expressvar app = express.createServer();app.get(/, function (req, res) { /** * * * 1. * 2. * * 3. res * * “ ” **/});app.listen(3000);
20. 20. app.getAsync(/, eval(Jscex.compile("async", function (req, res) { var keys = \$await(db.getKeysAsync(...)); var results = []; for (var i = 0; i < keys.length; i++) { var r = \$await(cache.getAsync(keys[i])); if (!r) { r = \$await(db.getAsync(keys[i])); } results.push(r); } res.send(generateList(results));})));
21. 21. I/O• I/O • Web ••• I/O •
22. 22. var getDataAsync = eval(Jscex.compile("async", function (key) { var res = \$await(cache.getAsync(key)); if (res) return res; return \$await(db.getAsync(key));}));app.getAsync(/, eval(Jscex.compile("async", function (req, res) { var keys = \$await(db.getKeysAsync(...)); // “ ” var tasks = keys.map(function (key) { return getDataAsync(key); }); // var results = \$await(Jscex.Async.parallel(tasks)); res.send(generateList(results));})));
24. 24. //var i = 1;conn.onAsync("data", eval(Jscex.compile("async", function () { var id = i++; \$await(step1); console.log("step 1 - request " + id); \$await(step2); console.log("step 2 - request " + id); /** * * step 1 - request 1 * step 1 - request 2 * step 2 - request 2 * step 2 - request 1 **/})));
25. 25. Erlangvar i = 0;var agent = Agent.start(eval(Jscex.compile("async", function (mailbox) { var id = i++; var msg = \$await(mailbox.receive()); \$await(step1); console.log("step 1 - request " + id); \$await(step2); console.log("step 2 - request " + id);})));conn.on("data", function (data) { // mailbox agent.send(data);});
26. 26. Jscex
27. 27. • • JIT • AOT• • • Python C# JavaScript 1.7 • …
28. 28. AOT// AOTAgent.start(eval(Jscex.compile("async", function (mailbox) { ...})));// AOT//// gzip 3kbAgent.start((function (mailbox) { var _b_ = Jscex.builders["async"]; return _b_.Start(this, ... );}));
29. 29. Jscex• • “ ”•
30. 30. //var fib = eval(Jscex.compile("seq", function () { var i = 0, j = 1; while (true) { \$yield(i); // the bind operation var t = i; i = j; j += t; }}));var iter = fib().skip(10).take(10);while (iter.moveNext()) { console.log(iter.current);}
31. 31. … Maybe Monadvar maybeFunc = function () { var maybeA = getA(); if (maybeA == Maybe.None) return Maybe.None; var maybeB = getB(); if (maybeB == Maybe.None) return Maybe.None; return maybeA.value + maybeB.value;}//var maybeFunc = eval(Jscex.compile("maybe", function () { var a = \$try(getA()); var b = \$try(getB()); return a + b;}));
32. 32. Jscex
33. 33. • “ ” “ ” • •• • Jscex /
34. 34. • • • “debugger”• • Start, Delay, Combine • Loop, Try • Normal, Return, Break, Continue, Throw • Bind
35. 35. Node.js
36. 36. • BSD• https://github.com/JeffreyZhao/jecex
37. 37. Q &A