FrankKai

## vue组件间通信 组件间通信实在是一个老生常谈的话题，因为真的是每天都会遇到。 - 父子组件通信 - props v-bind(缩写为:) 父->子 - props, watch 父->子 - $emit v-on(缩写为@) 子->父 - v-bind:foo.sync 父子 - $parent,$refs 实例式伪通信 - 跨组件通信 - 共用事件对象式通信 event bus -...

## 多Window / Tab / Page 通信 这是一个非常常见的场景，当你打开了一个页面需要与另一个页面做数据传递时，组件间通信那一套是行不通的。 因为每个window/page/tab都是单独的一个vue实例，单独的vuex实例，即使是nodejs的e、EventEmitter，也是一个单独的emitter实例。 这要怎么办呢？其实浏览器为我们提供了多种方式去做这件事。 - window.open与window.opener （基于当前window生成子window，实现父->子window的通信） - localStorage与window.onstorage （监听onstorage的event对象key的变化，实现tab间通信） - BroadCast Channel （创建一个单独通信通道，tab在这个通道内进行通信） - Shared worker （开启一个共享的工作线程，tab在这个共享线程内进行通信） ### window.open与window.opener （基于当前window生成子window，实现父->子window的通信 假设下面这样一个场景：点击图片打开一个新的window，1秒后替换成别的图片。  ```html...

## Web worker通信 ### Main thread与Web worker间通信  手上项目的热力图计算曾经尝试过将计算逻辑转移到worker子线程计算，但是由于种种原因没有成功，但是积累了这方面的经验。 ### worker线程 ```js // src/workers/test.worker.js onmessage = function(evt) { // 工作线程收到主线程的消息 console.log("worker thread :", evt); // {data:{msg:”Hello worker thread.“}} // 工作线程向主线程发送消息...

### 总结 在这边博文中我们学习到了DOM通信，vue组件间通信，多Window通信 / Tab间通信，Web worker通信等等前端通信的知识点。 但是要知道，这些仅仅是实际开发中的可选项集合，具体使用什么样的技术，还是要结合具体的应用场景。 而且在前端日新月异的更新换代中，会有老的技术消失，会有新的技术出现。一定要保持stay hungry的态度。

参考资料： - https://cn.vuejs.org/v2/guide/ - https://vuex.vuejs.org/zh/guide/ - https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API - https://github.com/mdn/simple-shared-worker - https://github.com/FrankKai/FrankKai.github.io/issues/178 - https://github.com/FrankKai/FrankKai.github.io/issues/193 - https://github.com/FrankKai/FrankKai.github.io/issues/181

### 初识`process.nextTick()` #### 语法（callback和可选args） ```js process.nextTick(callback[, ...args]) ``` - callback 回调函数 - args 调用callback时额外传的参数 #### `process.nextTick()`知识点 - `process.nextTick()`会将callback添加到”next tick queue“ - ”next tick queue“会在当前JavaScript stack执行完成后，下一次event loop开始执行前按照FIFO出队 - 如果递归调用`process.nextTick()`可能会导致一个无限循环，需要去适时终止递归。 - `process.nextTick()`可用于控制代码执行顺序。保证方法在对象完成constructor后但是在I/O发生前调用。...

### 如何理解process.nextTick() 你也许会发现`process.nextTick()`不会在代码中出现，即使它是异步API的一部分。这是为什么呢？因为`process.nextTick()`不是event loop的技术部分。取而代之的是，`nextTickQueue`会在当前的操作完成后执行，不考虑event loop的当前阶段。在这里，`operation`的定义是指从底层的C/C++处理程序到处理需要执行的JavaScript的转换。 回过头来看我们的程序，任何阶段你调用`process.nextTick()`，所有传递进`process.nextTick()`的callback会在event loop继续前完成解析。这会造成一些糟糕的情况，**通过建立一个递归的process.nextTick()调用，它允许你“starve”你的I/O。**，这样可以使得event loop不到达poll阶段。 ### 为什么说process.nextTick()是更加强大的异步专家？ #### process.nextTick()比setTimeout()更精准的延迟调用 为什么说“process.nextTick()比setTimeout()更精准的延迟调用”呢？ 不要着急，带着疑问去看下文即可。看懂就能找到答案。 为什么Node.js要设计这种递归的`process.nextTick()`呢 ？这是因为Node.js的设计哲学的一部分是**API必须是async的，即使它没有必要。** 看下下面的例子： ```js function apiCall(arg, callback) { if(typeof arg !== 'string'){ return process.nextTick(callback, new TypeError('argument...

### 为什么要用process.nextTick()？ - 允许用户处理error，清除不需要的资源，或者在事件循环前再次尝试请求 - 有时确保callback在call stack unwound（解除）后，event loop继续循环前 调用 #### 允许用户处理error，清除不需要的资源，或者在事件循环前再次尝试请求 这里有一个匹配用户期望的例子。 ```js const server = net.createServer(); server.on('connection', (conn) => { }); server.listen(8080); server.on('listening', () => { }); ```...

### 回顾一下 回过头来看下mqtt.js用于接收消息的message event源码中的process.nextTick() >process.nextTick()确保work函数准确在这一次call stack清空后，下一次event loop开始前调用。 ```js writable._write = function (buf, enc, done) { completeParse = done parser.parse(buf) work() // 开始nextTick } function work () { var packet =...

参考链接： - https://nodejs.org/uk/docs/guides/event-loop-timers-and-nexttick/ - https://nodejs.org/dist/latest-v13.x/docs/api/process.html#process_process_nexttick_callback_args - https://github.com/mqttjs/MQTT.js/blob/master/lib/client.js - https://github.com/FrankKai/FrankKai.github.io/issues/204