[译] 快速介绍JavaScript中的CSP

开发 前端
CSP 是什么? 一般来说, 它是写并行代码的一套方案。在 Go 语言里自带该功能, Clojure 通过基于 Macro 的 core.async 来实现,现在 JavaScript 通过 Generator 也能做支持了, 或者说 ES6 的功能。 为什么我要关心 CSP? 因为它强大啊, 而且高效, 而且简单.

[[171484]]

Communicating Sequential Processes 的 7 个示例

CSP 是什么? 一般来说, 它是写并行代码的一套方案.

在 Go 语言里自带该功能, Clojure 通过基于 Macro 的 core.async 来实现,

现在 JavaScript 通过 Generator 也能做支持了, 或者说 ES6 的功能.

为什么我要关心 CSP? 因为它强大啊, 而且高效, 而且简单. 都这样了你还想要什么? :)

好吧, 说细节. 怎样使用呢?我们用 js-csp, 而且需要 generator 支持, ES6 才有.

也就说 Node 4 或者更高的版本才行, 或者浏览器代码用 Babel 编译一下,

当然能其他的编译工具可能也行, 但你要确认下是支持 Generator 的.

注: 文章写得早, 现在翻译文章, Chrome 应该是支持 Generator 的.

扯多了, 来看例子吧!

例 1: 进程

***个要学的概念是"进程". 进程可以执行代码, 简单说就是这样的了. :)

注: 当然不是操作系统原始的进程了, js 里模拟的.

这是启动进程的语法: generator 函数作为参数, 传给 go 函数执行.

  1. import {go} from 'js-csp'
  2.  
  3. go(function* () { 
  4.   console.log('something!'); 
  5. }); 
  6.  
  7. // terminal output
  8. // 
  9. // => something!  

例 2: 进程可以暂停

使用 yield 关键字可以暂停一个进程, 把当前进程的占用释放:

  1. import {go, timeout} from 'js-csp'
  2.  
  3. go(function* () { 
  4.   yield timeout(1000); 
  5.   console.log('something else after 1 second!'); 
  6. }); 
  7.  
  8. console.log('something!'); 
  9.  
  10. // terminal output
  11. // 
  12. // => something! 
  13. // => something else after 1 second 

例 3: 进程等待来自管道的数据

第二个要学的概念是管道, 也是***一个了. 管道就像是队列.

一旦进程对管道调用 take, 进程就会暂停, 直到别人往管道放进数据.

  1. import {go, chan, take, putAsync} from 'js-csp'
  2.  
  3. let ch = chan(); 
  4.  
  5. go(function* () { 
  6.   const received = yield take(ch); 
  7.   console.log('RECEIVED:', received); 
  8. }); 
  9.  
  10. const text = 'something'
  11. console.log('SENDING:', text); 
  12.  
  13. // use putAsync to put a value in a 
  14. // channel from outside a process 
  15. putAsync(ch, text); 
  16.  
  17. // terminal output
  18. // 
  19. // => SENDING: something 
  20. // => RECEIVED: something  

例 4: 进程通过管道来通信

管道的另一边, 往管道里 put 数据的那些进程也会暂停, 直到这边进程调用 take.

下面的例子就复杂一点了, 试着跟随一下主线, 印证一下终端输出的内容:

  1. import {go, chan, take, put} from 'js-csp'
  2.  
  3. let chA = chan(); 
  4. let chB = chan(); 
  5.  
  6. // Process A 
  7. go(function* () { 
  8.   const receivedFirst = yield take(chA); 
  9.   console.log('A > RECEIVED:', receivedFirst); 
  10.  
  11.   const sending = 'cat'
  12.   console.log('A > SENDING:', sending); 
  13.   yield put(chB, sending); 
  14.  
  15.   const receivedSecond = yield take(chA); 
  16.   console.log('A > RECEIVED:', receivedSecond); 
  17. }); 
  18.  
  19. // Process B 
  20. go(function* () { 
  21.   const sendingFirst = 'dog'
  22.   console.log('B > SENDING:', sendingFirst); 
  23.   yield put(chA, sendingFirst); 
  24.  
  25.   const received = yield take(chB); 
  26.   console.log('B > RECEIVED:', received); 
  27.  
  28.   const sendingSecond = 'another dog'
  29.   console.log('B > SENDING:', sendingSecond); 
  30.   yield put(chA, sendingSecond); 
  31. }); 
  32.  
  33. // terminal output
  34. // 
  35. // => B > SENDING: dog 
  36. // => A > RECEIVED: dog 
  37. // => A > SENDING: cat 
  38. // => B > RECEIVED: cat 
  39. // => B > SENDING: another dog 
  40. // => A > RECEIVED: another dog  

例5: 管道也是队列

由于管道是队列, 当进程从管道取走数据, 其他进程就拿不到了.所以推数据的是一个进程, 取数据的也是一个进程.

下面这个例子可以看到第二个进程永远不会打印 B > RECEIVED: dog,

因为***个进程已经把数据取走了.

  1. import {go, chan, take, put} from 'js-csp'
  2.  
  3. let ch = chan(); 
  4.  
  5. go(function* () { 
  6.   const text = yield take(ch); 
  7.   console.log('A > RECEIVED:', text); 
  8. }); 
  9.  
  10. go(function* () { 
  11.   const text = yield take(ch); 
  12.   console.log('B > RECEIVED:', text); 
  13. }); 
  14.  
  15. go(function* () { 
  16.   const text = 'dog' 
  17.   console.log('C > SENDING:', text); 
  18.   yield put(ch, text); 
  19. }); 
  20.  
  21. // terminal output
  22. // 
  23. // => C > SENDING: dog 
  24. // => A > RECEIVED: dog  

例 6: 带缓冲的管道不会在 put 操作时阻塞

管道可以带缓冲, 也就是, 一定数量之内的数据, 执行 put 操作可以避开阻塞.

这个例子里, 即便没有其他进程调用 take, 前两个写操作也不会阻塞进程.

不过管道的缓存数量是 2, 所以第三个数据就阻塞进程了, 直到其他进程取走数据.

  1. import {go, chan, put, buffers} from 'js-csp'
  2.  
  3. let ch = chan(buffers.fixed(2)); 
  4.  
  5. go(function* () { 
  6.   yield put(ch, 'value A'); 
  7.   yield put(ch, 'value B'); 
  8.   console.log('I should print!'); 
  9.   yield put(ch, 'value C'); 
  10.   console.log('I should not print!'); 
  11. }); 
  12.  
  13. // terminal output
  14. // 
  15. // => I should print!  

例 7: Dropping And Sliding Buffers

固定大小的缓冲在 N 个数据之后会阻塞, 初次之外, 还有对缓冲的 dropping 和 sliding 控制.

缓冲的 dropping 以为着管道可以持有 N 个数据.再增加额外的数据放进管道, 管道就会将其丢弃.

缓冲的 sliding 也可以持有 N 个数据. 不过相对于直接丢弃新数据,sliding 缓冲原先的***个推的数据会被丢弃, buffer 里会留下新的这个数据.

下面这个例子, value B 和 value C 在 dropping 缓冲里被丢弃, 因为已经有 value A 了.

第二个进程里, 当 value B 被放进管道, value A 就被丢弃了.

然后 value C 放进管道, value B 就被丢弃.

根据它们的工作原理, dropping 和 sliding 的缓冲永远不会阻塞!

  1. let droppingCh = chan(buffers.dropping(1)); 
  2. let slidingCh  = chan(buffers.sliding(1)); 
  3.  
  4. go(function* () { 
  5.   yield put(droppingCh, 'value A'); 
  6.   yield put(droppingCh, 'value B'); 
  7.   yield put(droppingCh, 'value C'); 
  8.   console.log('DROPPING:', yield take(droppingCh)); 
  9. }); 
  10.  
  11. go(function* () { 
  12.   yield put(slidingCh, 'value A'); 
  13.   yield put(slidingCh, 'value B'); 
  14.   yield put(slidingCh, 'value C'); 
  15.   console.log('SLIDING:', yield take(slidingCh)); 
  16. }); 
  17.  
  18. // terminal output
  19. // 
  20. // => DROPPING: value A 
  21. // => SLIDING: value C  

结论

CSP 用了一段时间之后, 用回调或者 Promise 写代码就像是侏罗纪的技术.

我希望 ES6 的 Generator 能帮助 CSP 成为 JavaScript 的一个标准,

就像是 Go 已经是的那样, 以及 Clojure 里正在成为的那样.

下一步

另外有两个模型也还有意思, 大概可以认为是比 CSP 层级更高一点的:

函数式也是响应式编程(Rx)跟 Actors, 分别在 Rx 和 Erlang 里用到.

我当然后面也会写博客来挖掘一下.

我同时相信 CSP 对于前端框架来说非常棒.

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2011-06-21 14:25:44

JavaScriptcookie

2009-06-17 16:01:28

2021-09-02 15:24:25

Prisma JavaScript 类型安全

2020-07-12 15:34:48

JavaScript开发技术

2023-04-26 15:19:36

JavaScripMap数组

2021-11-22 22:14:46

JavaScript开发模块

2011-05-25 11:25:23

快速排序Javascript

2020-12-29 08:09:25

JavaScript内存管理

2017-04-10 10:35:02

JavaScript框架

2012-08-03 10:30:22

JavaScript

2022-02-25 23:46:54

JavaScript网站开发

2016-10-12 11:08:16

JavaScriptarguments数组

2014-01-03 09:13:39

JavaScriptthis

2013-05-08 10:36:07

JavaScriptJS详解JavaScrip

2017-01-23 09:10:06

2017-07-18 15:26:20

微服务化DevOps容器化

2009-07-14 01:00:43

WebWorkActionConte

2011-01-21 17:28:37

Zimbra

2020-04-29 15:30:22

CSP网页前端

2009-06-11 14:25:17

EJBJava
点赞
收藏

51CTO技术栈公众号