組件間通信技術(shù)如何賦能輪播圖和文本

圖片

上圖畫布中有兩個組件: 輪播圖 和 文本組件. 我們可以在圖中看到當(dāng)輪播圖組件內(nèi)容切換時,  文本組件內(nèi)容也會對應(yīng)的切換. 熟悉前端開發(fā)的小伙伴也許會覺得這樣的功能很好實現(xiàn), 我們可以用諸如 react, vue 這樣的框架來輕松實現(xiàn)數(shù)據(jù)狀態(tài)的共享, 但是通過傳統(tǒng)的組件開發(fā)方式來實現(xiàn)這樣的功能, 存在太多的局限性, 比如:

1. 輪播圖組件的圖片和文本的位置相對比較固定, 不夠靈活

我們一般的輪播圖組件長這樣:

圖片

一般輪播圖文案會放在圖片中間或者底部, 如果產(chǎn)品經(jīng)理或者設(shè)計師小朋友想調(diào)整文本的位置, 比如以下幾種:

左圖右文(或右圖左文)排版:

圖片

輪播文本出現(xiàn)在左上方:

圖片

上圖下文的輪播圖排版:

圖片

面對這些花里胡哨的排版設(shè)計, 傳統(tǒng)做法只能通過程序員不斷修改或者擴(kuò)展代碼,才能實現(xiàn)這些的需求.

2. 上線成本高, 不夠敏捷

這里的“成本”并不是組件的修改成本高, 因為改變位置對程序員來說都是小意思, 這里的成本指的是時間成本. 因為網(wǎng)站上線會涉及一系列的準(zhǔn)備工作, 比如代碼修改, 代碼提交, 代碼測試, 最終再把網(wǎng)站上線.

圖片

同時花大部分時間做一些低價值的任務(wù), 對程序員自身成長也不友好, 所以我們需要思考更優(yōu)雅的方式.

3. 樣式設(shè)計的局限性較大

比如我們要實現(xiàn)帶背景的輪播圖文案, 如果按照老路子開發(fā), 程序員又得嘩嘩寫代碼了.

輪播圖這類對外展示信息的需求, 雖然大多不是企業(yè)的核心需求, 但是某些時候卻對企業(yè)的形象和企業(yè)價值傳遞至關(guān)重要, 所以我們必須要及時響應(yīng)需求的變化, 第一時間維護(hù)公司的形象.

怎么去做呢? 我的答案是: 讓產(chǎn)品經(jīng)理和設(shè)計師們自己去維護(hù)輪播圖組件.

解決方案演示

1. 解決輪播圖組件圖片和文本的位置相對比較固定, 不夠靈活的問題

圖片

圖片

2. 解決輪播文本樣式的局限性

圖片

輪播文案動畫效果:

圖片

輪播和文案分離的課件式交互:

圖片

當(dāng)然還有很多玩法等待大家開啟, 如果我們把這個功能嫁接給產(chǎn)品或者業(yè)務(wù)人員, 那么將極大的解放程序員的雙手, 也能極大的提高公司需求變更的響應(yīng)速度.

接下來我就來分享一下如何實現(xiàn)輪播圖和文本的跨越式通信.

技術(shù)實現(xiàn)方案

之前和大家分享了兩期跨組件通信的技術(shù)方案, 我們繼續(xù)沿用之前的方案, 來實現(xiàn)輪播圖和文本的通信.

1. 首先在輪播圖組件中創(chuàng)建并觸發(fā)自定義事件:

//  觸發(fā)函數(shù)
const handleTrigger = (value: string) => {
    if(targetId) {
      document.dispatchEvent(new CustomEvent(`source_text_${targetId}`, { detail: value }))
    }
  }
  
// 當(dāng)輪播圖onchange時傳遞數(shù)據(jù)并觸發(fā)
<Carousel
    className={cid}
    notallow={index => {
      // some code ...
      // 一觸即發(fā)
      handleTrigger(_data.length ? _data[index]?.title : imgList[index]?.title);
    }}
    directinotallow={direction}
    swipeable={swipeable}
    autoPlay={autoPlay}
    loop
    >
    {contentRender()}
</Carousel>

2. 在文本組件中監(jiān)聽事件并響應(yīng)數(shù)據(jù)回傳

useEffect(() => {
    const eventName = `source_text_${id}`;
    function handleDataChange(event: any) {
      setData(event.detail);
    }

    document.addEventListener(eventName, handleDataChange)

    return () => document.removeEventListener(eventName, handleDataChange)
  }, [])

沒錯, 就這么點代碼, 就實現(xiàn)了輪播圖組件和文本組件的通信, 大家學(xué)會了嗎?

當(dāng)然底層上還是依賴Dooring零代碼提供的便捷搭建能力和擴(kuò)展能力, 讓組件間通信能煥發(fā)出更大的價值.  如果大家想體驗這一功能, 也歡迎線上使用, 同時也歡迎將這一方案用在自己公司的產(chǎn)品上, 更大的提高公司產(chǎn)研效率.

再展開想象, 這種方案不止于輪播圖, 比如我之前分享的搜索和列表組件, 對于業(yè)務(wù)層, 應(yīng)用這一方案可以發(fā)揮更大的價值.