Quasar CLI with Webpack - @quasar/app-webpack
BEX 通信
允许 Quasar 应用与 BEX 的不同部分之间的通信至关重要,Quasar 使用一个 bridge
来实现这一点。
BEX 中有 4 个需要通信层的区域:
- Quasar 应用本身 - 适用于所有类型的 BEX,即弹出菜单、选项页、开发工具或网页。
- 后台脚本
- 内容脚本
- 运行 BEX 的网页。
通信规则
Quasar 的通信桥梁有一个基本的规则需要了解。
不是所有的 BEX 类型都有内容脚本 - 只有在网页上下文中运行的 BEX 才会有内容脚本。这意味着,如果您在内容脚本上为事件添加侦听器,并试图从作为开发者工具、右键菜单选项页或弹出式菜单中运行的 Quasar BEX 触发事件,则无法工作。
如需开发者工具、右键菜单选项页或弹出式菜单中运行的 BEX 与网页通信,需要后台脚本作为代理。步骤如下:
- 在后台脚本上添加侦听器,该侦听器又会发出另一个事件
- 在运行在网页上下文中的 Quasar 应用中监听后台脚本发出的事件。
- 在开发者工具、右键菜单选项页或弹出式菜单的页面中触发后台脚本的事件。
一旦你理解了这个概念,BEX 如何与每个部件交流就没有限制了。
通信桥梁(Bridge)
该桥是一个基于 Promise 的事件系统,在 BEX 的所有部分之间共享,允许您在 Quasar 应用程序中监听事件,从其他部分发出事件,反之亦然。这就是 Quasar BEX 模式的强大之处。
在 Quasar 应用中,可以通过 $q.bex
访问该桥梁,在其他区域,bridge
通过各自的钩子函数的参数提供。
来看看他是如何工作的。
触发一个事件并等待响应
const { data } = await bridge.send('some.event', { someKey: 'aValue' })
console.log('Some response from the other side', data)
监听一个事件并发出响应
bridge.on('some.event', ({ data, respond }) => {
console.log('Event receieved, responding...')
respond(data.someKey + ' hey!')
})
WARNING
如果您删除了 respond()
,那么这个 promise 在 .send()
后将不会被释放(resolve)。
Quasar Bridge 在幕后进行了一些工作,以将基于正常事件的通信转换为 Promise,因此,为了使 Promise 能够释放(resolve),我们需要调用 respond
方法。
清除监听器
bridge.off('some.event', this.someFunction)
TIP
由于浏览器插件限制了数据传输的大小最大为 60mb,该桥还做了一些工作来拆分大数据,这些数据太大,无法一次性传输。为了实现这一点,有效载荷必须是一个数组。