摘要：以上面的例子为代表完整生命周期如下下一篇，应该会以为例，介绍一种基于来解决跨组件的数据通信的方式免费领取验证码内容安全短信发送直播点播体验包及云服务器等套餐更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区
本文由作者郑海波授权网易云社区发布。
背景
在组件化不断深入的大环境下，无论使用哪种 MDV 框架都最终会遇到一个头疼的问题，就是「跨组件通信」。
下图是个简单的例子
这里包含「事件通信」和「数据通信」两个维度。
事件传递
为了将事件 click 从
数据传递
为了从
以上处理方式除了带来性能上的损耗之外，更麻烦的就是造成了可维护性的急速下降。
显而易见的事件通信解决方案
最直接的做法就是引入一个「中介者」，简而言之就是一个全局的「跳板」，下例就是一个事件中介者
mediator.js
const Regular = require("regularjs");const emitter = new Regular;//每个Regular组件都是一个事件发射器module.exports = {
broadcast: emiter.$emit.bind(emiter), subscribe: emiter.$on.bind(emiter)
}
Top.js
const { broadcast, subscribe } = require("./mediator")const Regular = require("regularjs");const Top = Regular.extend({
name: "Top",
init(){
subscribe("check", ev =>{ // 通过emitter广播事件
})
}
})
LeafNode.js
const { broadcast, subscribe } = require("path/to/mediator")const Regular = require("regularjs");const LeafNode = Regular.extend({
template: ``,
name: "LeafNode",
onClick(){
broadcast( "check", { type: "leafnode" } )
}
})
mediator 作为一个全局单例直接被 LeafNode 和 Top 引用，通过它实现了直接通信.
更麻烦的兄弟节点之间的通信当然也可以这样来解决。
显而易见的解决方案引出的另一个显而易见的问题
上述中介者的引入的最大问题就是，所有相关组件都在 定义时 引入了对emitter的 全局耦合， 这个将导致组件无法在多工程间被复用。
一种合理的解决方案就是将对emitter的耦合, 延迟到实例化阶段。
在Regular之前的版本里，很多朋友会通过this.$parent或this.$outer等可控性很差的方式来实现，在v0.6有了一种更好的方式。
modifyBodyComponent 新生命周期
在 Regular 的 v0.6 引入了一个新的生命周期叫 modifyBodyComponent ，它用来劫持到组件包裹的所有内部组件的初始化周期。
我们用一个简单例子来实现下emitter的动态注入
Broadcastor.js
const Regular = require("regularjs");const Broadcastor = Regular.extend({
name: "Broadcastor",
config( data ){ const emitter = data.emitter; this._broadcast = emitter.$emit.bind(emitter), this._subscribe = emitter.$on.bind(emitter)
},
modifyBodyComponent( component, next ){
component.$broadcast = this._broadcast;
component.$subscribe = this._subscribe;
next(component) // 交给外层的包装器
}
})
Top.js
// const { broadcast, subscribe } = require("./mediator")const Regular = require("regularjs");const Top = Regular.extend({
name: "Top",
template: "略...",
init(){ this.$subscribe("check", ev =>{ // 通过emitter广播事件
})
}
})
LeafNode.js
// const { broadcast, subscribe } = require("path/to/mediator")const Regular = require("regularjs");const LeafNode = Regular.extend({
template: ``,
name: "LeafNode",
onClick(){
this.$broadcast( "check", { type: "leafnode" } )
}
})
main.js (入口)
new Regular({
template:`
`,
data: {
emitter: new Regular
}
})
这样所有的组件声明都取消了对全局 emitter 的直接依赖，而是在入口(main.js) 动态传入了一个emitter。
生命周期
需要注意的是modifyBodyComponent 会在 component本身compile之后运行, 但在init之前运行。以上面的例子为代表, 完整生命周期如下.
Broadcastor.config -> Broadcastor.compile
- Top.config -> Top.compile
- LeafNode.config -> LeafNode.compile
- Broadcastor.modifyBodyComponent(LeafNode)
- LeafNode.init
- Broadcastor.modifyBodyComponent(Top)
- Top.init
Broadcastor.init
下一篇，应该会以redux(rgl-redux)为例，介绍一种基于modifyBodyComponent来解决跨组件的数据通信的方式
免费领取验证码、内容安全、短信发送、直播点播体验包及云服务器等套餐
更多网易技术、产品、运营经验分享请访问网易云社区。
文章来源： 网易云社区
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/25335.html
摘要：不要小看这个优化，由于内部监听器中的比例很高超过所以在的情况下，可以带来比较大的提升。但是它的时间复杂度是，在大列表下会带来显著的性能开销甚至完全超过更新的开销。更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区 本文由作者郑海波授权网易云社区发布。 本文旨在用 20% 的精力解决使用Regular过程中 80% 的性能问题. 这里大部分是关于脏检查的性能优化，不了解的可...
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
阅读 2228·2021-10-09 09:44
阅读 3419·2021-09-22 15:43
阅读 2761·2021-09-02 09:47
阅读 2309·2021-08-12 13:29
阅读 3707·2019-08-30 15:43
阅读 1588·2019-08-30 13:06
阅读 2079·2019-08-29 16:07
阅读 2629·2019-08-29 15:23
