資訊專欄INFORMATION COLUMN
摘要：以上面的例子為代表完整生命周期如下下一篇，應該會以為例，介紹一種基于來解決跨組件的數(shù)據(jù)通信的方式免費領(lǐng)取驗證碼內(nèi)容安全短信發(fā)送直播點播體驗包及云服務器等套餐更多網(wǎng)易技術(shù)產(chǎn)品運營經(jīng)驗分享請訪問網(wǎng)易云社區(qū)。文章來源網(wǎng)易云社區(qū)
本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。
背景
在組件化不斷深入的大環(huán)境下，無論使用哪種 MDV 框架都最終會遇到一個頭疼的問題，就是「跨組件通信」。
下圖是個簡單的例子
這里包含「事件通信」和「數(shù)據(jù)通信」兩個維度。
事件傳遞
為了將事件 click 從
數(shù)據(jù)傳遞
為了從
以上處理方式除了帶來性能上的損耗之外，更麻煩的就是造成了可維護性的急速下降。
顯而易見的事件通信解決方案
最直接的做法就是引入一個「中介者」，簡而言之就是一個全局的「跳板」，下例就是一個事件中介者
mediator.js
const Regular = require("regularjs");const emitter = new Regular;//每個Regular組件都是一個事件發(fā)射器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 引用，通過它實現(xiàn)了直接通信.
更麻煩的兄弟節(jié)點之間的通信當然也可以這樣來解決。
顯而易見的解決方案引出的另一個顯而易見的問題
上述中介者的引入的最大問題就是，所有相關(guān)組件都在 定義時 引入了對emitter的 全局耦合， 這個將導致組件無法在多工程間被復用。
一種合理的解決方案就是將對emitter的耦合, 延遲到實例化階段。
在Regular之前的版本里，很多朋友會通過this.$parent或this.$outer等可控性很差的方式來實現(xiàn)，在v0.6有了一種更好的方式。
modifyBodyComponent 新生命周期
在 Regular 的 v0.6 引入了一個新的生命周期叫 modifyBodyComponent ，它用來劫持到組件包裹的所有內(nèi)部組件的初始化周期。
我們用一個簡單例子來實現(xiàn)下emitter的動態(tài)注入
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) 動態(tài)傳入了一個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來解決跨組件的數(shù)據(jù)通信的方式
免費領(lǐng)取驗證碼、內(nèi)容安全、短信發(fā)送、直播點播體驗包及云服務器等套餐
更多網(wǎng)易技術(shù)、產(chǎn)品、運營經(jīng)驗分享請訪問網(wǎng)易云社區(qū)。
文章來源： 網(wǎng)易云社區(qū)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/25335.html
摘要：不要小看這個優(yōu)化，由于內(nèi)部監(jiān)聽器中的比例很高超過所以在的情況下，可以帶來比較大的提升。但是它的時間復雜度是，在大列表下會帶來顯著的性能開銷甚至完全超過更新的開銷。更多網(wǎng)易技術(shù)產(chǎn)品運營經(jīng)驗分享請訪問網(wǎng)易云社區(qū)。文章來源網(wǎng)易云社區(qū) 本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。 本文旨在用 20% 的精力解決使用Regular過程中 80% 的性能問題. 這里大部分是關(guān)于臟檢查的性能優(yōu)化，不了解的可...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 2519·2021-10-09 09:44
閱讀 3908·2021-09-22 15:43
閱讀 2998·2021-09-02 09:47
閱讀 2659·2021-08-12 13:29
閱讀 3942·2019-08-30 15:43
閱讀 1747·2019-08-30 13:06
閱讀 2250·2019-08-29 16:07
閱讀 2816·2019-08-29 15:23
