国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Regular進(jìn)階： 跨組件通信

keithyau / 1526人閱讀

摘要：以上面的例子為代表完整生命周期如下下一篇，應(yīng)該會(huì)以為例，介紹一種基于來(lái)解決跨組件的數(shù)據(jù)通信的方式免費(fèi)領(lǐng)取驗(yàn)證碼內(nèi)容安全短信發(fā)送直播點(diǎn)播體驗(yàn)包及云服務(wù)器等套餐更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)。文章來(lái)源網(wǎng)易云社區(qū)

本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。

背景
在組件化不斷深入的大環(huán)境下，無(wú)論使用哪種 MDV 框架都最終會(huì)遇到一個(gè)頭疼的問(wèn)題，就是「跨組件通信」。

下圖是個(gè)簡(jiǎn)單的例子

這里包含「事件通信」和「數(shù)據(jù)通信」兩個(gè)維度。

事件傳遞

為了將事件 click 從 傳遞到最外層組件，需要依次通過(guò) 和 等可能本不關(guān)心這個(gè)事件的組件（即使例子里已經(jīng)使用了proxy的簡(jiǎn)化語(yǔ)法）

數(shù)據(jù)傳遞

為了從 傳遞 title 這個(gè) prop 到 , 需要層層跨越 、 這些本不需要關(guān)心 title屬性 的組件。

以上處理方式除了帶來(lái)性能上的損耗之外，更麻煩的就是造成了可維護(hù)性的急速下降。

顯而易見(jiàn)的事件通信解決方案
最直接的做法就是引入一個(gè)「中介者」，簡(jiǎn)而言之就是一個(gè)全局的「跳板」，下例就是一個(gè)事件中介者

mediator.js

const Regular = require("regularjs");const emitter = new Regular;//每個(gè)Regular組件都是一個(gè)事件發(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 =>{            // 通過(guò)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 作為一個(gè)全局單例直接被 LeafNode 和 Top 引用，通過(guò)它實(shí)現(xiàn)了直接通信.

更麻煩的兄弟節(jié)點(diǎn)之間的通信當(dāng)然也可以這樣來(lái)解決。

顯而易見(jiàn)的解決方案引出的另一個(gè)顯而易見(jiàn)的問(wèn)題
上述中介者的引入的最大問(wèn)題就是，所有相關(guān)組件都在 定義時(shí) 引入了對(duì)emitter的 全局耦合， 這個(gè)將導(dǎo)致組件無(wú)法在多工程間被復(fù)用。

一種合理的解決方案就是將對(duì)emitter的耦合, 延遲到實(shí)例化階段。

在Regular之前的版本里，很多朋友會(huì)通過(guò)this.$parent或this.$outer等可控性很差的方式來(lái)實(shí)現(xiàn)，在v0.6有了一種更好的方式。

modifyBodyComponent 新生命周期
在 Regular 的 v0.6 引入了一個(gè)新的生命周期叫 modifyBodyComponent ，它用來(lái)劫持到組件包裹的所有內(nèi)部組件的初始化周期。

我們用一個(gè)簡(jiǎn)單例子來(lái)實(shí)現(xiàn)下emitter的動(dòng)態(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 =>{            // 通過(guò)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
}

})
這樣所有的組件聲明都取消了對(duì)全局 emitter 的直接依賴，而是在入口(main.js) 動(dòng)態(tài)傳入了一個(gè)emitter。

生命周期
需要注意的是modifyBodyComponent 會(huì)在 component本身compile之后運(yùn)行, 但在init之前運(yùn)行。以上面的例子為代表, 完整生命周期如下.

Broadcastor.config -> Broadcastor.compile

- Top.config -> Top.compile
    - LeafNode.config -> LeafNode.compile
        - Broadcastor.modifyBodyComponent(LeafNode)
    - LeafNode.init
    - Broadcastor.modifyBodyComponent(Top)
- Top.init

Broadcastor.init

下一篇，應(yīng)該會(huì)以redux(rgl-redux)為例，介紹一種基于modifyBodyComponent來(lái)解決跨組件的數(shù)據(jù)通信的方式

免費(fèi)領(lǐng)取驗(yàn)證碼、內(nèi)容安全、短信發(fā)送、直播點(diǎn)播體驗(yàn)包及云服務(wù)器等套餐

更多網(wǎng)易技術(shù)、產(chǎn)品、運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)。

文章來(lái)源： 網(wǎng)易云社區(qū)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/25335.html

相關(guān)文章

  • Regular進(jìn)階: 幾點(diǎn)性能優(yōu)化的建議

    摘要：不要小看這個(gè)優(yōu)化，由于內(nèi)部監(jiān)聽(tīng)器中的比例很高超過(guò)所以在的情況下，可以帶來(lái)比較大的提升。但是它的時(shí)間復(fù)雜度是，在大列表下會(huì)帶來(lái)顯著的性能開(kāi)銷甚至完全超過(guò)更新的開(kāi)銷。更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)。文章來(lái)源網(wǎng)易云社區(qū) 本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。 本文旨在用 20% 的精力解決使用Regular過(guò)程中 80% 的性能問(wèn)題. 這里大部分是關(guān)于臟檢查的性能優(yōu)化，不了解的可...

    idealcn 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見(jiàn)，通過(guò)機(jī)制傳遞即可。我們應(yīng)該聽(tīng)說(shuō)過(guò)高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過(guò)程中總結(jié)出來(lái)的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書(shū)以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

    neuSnail 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<