成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

基于Decorator的組件擴(kuò)展實(shí)踐

魏明 / 2489人閱讀

摘要：在業(yè)務(wù)統(tǒng)一的情況下，僅僅修改組件用于配置的就可以滿(mǎn)足業(yè)務(wù)需求。避免了復(fù)雜的圖表配置，而將圖表進(jìn)行有效拆分，通過(guò)聲明式的標(biāo)簽進(jìn)行組合，從而使圖表更具擴(kuò)展性。而對(duì)于顆粒度最細(xì)的組件，我們希望它是純粹的，木偶式的組件。

在前端業(yè)務(wù)開(kāi)發(fā)中，組件化已經(jīng)成為我們的共識(shí)。沉淀和復(fù)用組件，是提高開(kāi)發(fā)效率的利器。但在組件復(fù)用的過(guò)程中，我們往往會(huì)遇到這樣的問(wèn)題，組件相似，卻在結(jié)構(gòu)或交互上有些許差別，需要對(duì)組件進(jìn)行改造方可滿(mǎn)足需求。這個(gè)問(wèn)題之前在 React實(shí)踐 - Component Generator 就有所提及。

之初，我們提出了組件配置式。在業(yè)務(wù)統(tǒng)一的情況下，僅僅修改組件用于配置的props就可以滿(mǎn)足業(yè)務(wù)需求。但隨著業(yè)務(wù)發(fā)生變化導(dǎo)致組件形態(tài)發(fā)生變化時(shí)，我們就必須不斷增加配置去應(yīng)對(duì)變化，便會(huì)出現(xiàn)配置泛濫，而在擴(kuò)展過(guò)程中又必須保證組件向下兼容，只增不減，使組件可維護(hù)性的降低。

最近的項(xiàng)目開(kāi)發(fā)中，@JasonHuang 提出了組件組合式開(kāi)發(fā)思想，有效地解決了配置式所存在的一些問(wèn)題。下面我將詳細(xì)闡述其思想與具體實(shí)現(xiàn)。

組件再分離

對(duì)于組件的 view 層，我們期望組件是沒(méi)有冗余的，組件與組件間 view 重疊的部分應(yīng)當(dāng)被抽離出來(lái)，形成顆粒度更細(xì)的組件，使組件組合產(chǎn)生更多的可能。

這種 view 細(xì)化的組合式思想早已在我們團(tuán)隊(duì)可視化庫(kù) Recharts 中有所體現(xiàn)。Recharts 避免了復(fù)雜的圖表配置，而將圖表進(jìn)行有效拆分，通過(guò)聲明式的標(biāo)簽進(jìn)行組合，從而使圖表更具擴(kuò)展性。

同樣，我們?cè)诮M件上也希望秉承這種思想，先來(lái)看一下在現(xiàn)有業(yè)務(wù)比較典型的三個(gè)公共組件:

這三個(gè)組件無(wú)論在 UI 還是邏輯上均存在一定共性。在配置式中，我們會(huì)將這三個(gè)組件通過(guò)一個(gè)組件的配置變換來(lái)實(shí)現(xiàn)，但無(wú)疑會(huì)提高單個(gè)組件內(nèi)部邏輯的復(fù)雜性。

再做一次分離！它們可由 SelectInput、SearchInput 與 List 三個(gè)顆粒度更細(xì)的組件來(lái)組合。而對(duì)于顆粒度最細(xì)的組件，我們希望它是純粹的，木偶式的組件。

例如 SelectInput 組件，組件狀態(tài)完全依賴(lài)傳入的 props，包括 selectedItem (顯示用戶(hù)所選項(xiàng))、isActive (當(dāng)前下拉狀態(tài))、onClickHeader (反饋下拉狀態(tài))以及placeholder (下拉框提示)。我們來(lái)看一下它的簡(jiǎn)要實(shí)現(xiàn):

class SelectInput extends Component {
  static displayName = "SelectInput";
  
  render() {
    const { selectedItem, isActive, onClickHeader, placeholder } = this.props;
    const { text } = selectedItem || {};
    return (
      

        
        
      

    );
  }
}

當(dāng)組件被再次分離后，我們可以根據(jù)業(yè)務(wù)中的組件形態(tài)對(duì)其進(jìn)行任意組合，形成統(tǒng)一層，擺脫在原有組件上擴(kuò)展的模式，有效提高組件的靈活性。

邏輯再抽象

那么有了 view 細(xì)化再重組的公共組件后，是不是就可以愉快地開(kāi)發(fā)了?

是的，但組件層面的抽象不應(yīng)該只停留在 view 層面，組件中的相同交互邏輯和業(yè)務(wù)邏輯也應(yīng)該進(jìn)行抽象。

ReactEurope 2016 小記 - 上 中提到復(fù)用高階函數(shù)的思想，編寫(xiě) Higher-Order Components (高階組件)來(lái)為基礎(chǔ)組件增加新的功能。

Higher-Order Components = Decorators + Components。在我們的組件中，也正是貫穿著這樣函數(shù)式的思想，來(lái)完成組件邏輯上的抽象，例如:

// 完成SearchInput與List的交互
const SearchDecorator = Wrapper => {
  class WrapperComponent extends Component {
    handleSearch(keyword) {
      this.setState({
        data: this.props.data,
        keyword,
      });
      this.props.onSearch(keyword);
    }

    render() {
      const { data, keyword } = this.state;
      return (
        
      );
    }
  }
  
  return WrapperComponent;
};

// 完成List數(shù)據(jù)請(qǐng)求
const AsyncSelectDecorator = Wrapper => {
  class WrapperComponent extends Component {
    componentDidMount() {
      const { url } = this.props;
      
      fetch(url)
      .then(response => response.json())
      .then(data => {
        this.setState({
          data,
        });
      });
    }

    render() {
      const { data } = this.state;
      return (
        
      );
    }
  }

  return WrapperComponent;
}

擁有 Decorator 之后，我們就能賦予組件能力了，例如合成 Search 組件:

@SearchDecorator
class Search extends Component {
  render() {
    return (
      
        
        
      
    );
  }
}

那么當(dāng)我們將邏輯抽象成為多個(gè) Decorator 時(shí)，又該如何去組合呢？你是否還記得 React Mixin 的前世今生 中提到的方法？沒(méi)錯(cuò)，就是compose！這里建議讀者 review 這篇文章，順便回顧一下Mixin與高階組件的不同點(diǎn)。

// SelectedItemDecorator為L(zhǎng)ist與SelectInput的交互，讀者可以自行嘗試實(shí)現(xiàn)
const FinalSelector = compose(AsyncSelectDecorator, SearchDecorator, SelectedItemDecorator)(Selector);

class SearchSelect extends Component {
  render() {
    return (
      
        
        
        
      
    );
  }
}
小結(jié)

在配置式組件內(nèi)部，組件與組件間以及組件與業(yè)務(wù)間是緊密關(guān)聯(lián)的，而對(duì)于開(kāi)發(fā)人員而言需要完成的僅僅是配置的工作。而組合式意圖打破這種關(guān)聯(lián)，尋求單元化，通過(guò)顆粒度更細(xì)的基礎(chǔ)組件與抽象組件共有交互與業(yè)務(wù)邏輯的 Decorator，使組件更靈活，更易擴(kuò)展，也使開(kāi)發(fā)者能夠完成對(duì)于基礎(chǔ)組件的自由支配。

雖然組合式確實(shí)能解決配置式所存在的一些問(wèn)題，但多層 Decorator 帶來(lái)的多層包裹，會(huì)對(duì)組件理解和調(diào)試造成一定困難，也"不能"使用外部公有的方法。同時(shí)組合式所基于的函數(shù)式編程的思想能否被整個(gè)團(tuán)隊(duì)所接受，也是我們需要考量的問(wèn)題。

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

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

相關(guān)文章

  • 基于Decorator的React高階組件的思路分析與實(shí)現(xiàn)

    摘要：在深入技術(shù)棧一書(shū)中，提到了基于的。書(shū)里對(duì)基于的沒(méi)有給出完整的實(shí)現(xiàn)，在這里實(shí)現(xiàn)并記錄一下實(shí)現(xiàn)的思路。在這里最小的組件就是。對(duì)比范式與父組件的范式，如果完全利用來(lái)實(shí)現(xiàn)的，將操作與分離，也未嘗不可，但卻不優(yōu)雅。 在深入react 技術(shù)棧一書(shū)中，提到了基于Decorator的HOC。而不是直接通過(guò)父組件來(lái)逐層傳遞props，因?yàn)楫?dāng)業(yè)務(wù)邏輯越來(lái)越復(fù)雜的時(shí)候，props的傳遞和維護(hù)也將變得困難且冗...

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

  • 裝飾模式（Decorator Pattern）

    摘要：通常有兩種方式可以實(shí)現(xiàn)給一個(gè)類(lèi)或?qū)ο笤黾有袨槔^承機(jī)制，使用繼承機(jī)制是給現(xiàn)有類(lèi)添加功能的一種有效途徑，通過(guò)繼承一個(gè)現(xiàn)有類(lèi)可以使得子類(lèi)在擁有自身方法的同時(shí)還擁有父類(lèi)的方法。 裝飾模式 (Decorator Pattern) 裝飾模式能夠?qū)崿F(xiàn)動(dòng)態(tài)的為對(duì)象添加功能，是從一個(gè)對(duì)象外部來(lái)給對(duì)象添加功能。通常有兩種方式可以實(shí)現(xiàn)給一個(gè)類(lèi)或?qū)ο笤黾有袨椋? 繼承機(jī)制，使用繼承機(jī)制是給現(xiàn)有類(lèi)添加功能的一種...

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

  • 設(shè)計(jì)模式之裝飾者模式

    摘要：相關(guān)設(shè)計(jì)模式裝飾者模式和代理模式裝飾者模式關(guān)注再一個(gè)對(duì)象上動(dòng)態(tài)添加方法代理模式關(guān)注再對(duì)代理對(duì)象的控制訪問(wèn)，可以對(duì)客戶(hù)隱藏被代理類(lèi)的信息裝飾著模式和適配器模式都叫包裝模式關(guān)于新職責(zé)適配器也可以在轉(zhuǎn)換時(shí)增加新的職責(zé)，但主要目的不在此。 0x01.定義與類(lèi)型 定義：裝飾模式指的是在不必改變?cè)?lèi)文件和使用繼承的情況下，動(dòng)態(tài)地?cái)U(kuò)展一個(gè)對(duì)象的功能。它是通過(guò)創(chuàng)建一個(gè)包裝對(duì)象，也就是裝飾來(lái)包裹真實(shí)的...

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

  • Vue with typescript

    摘要：想要使用語(yǔ)法的話(huà)，配合，這個(gè)插件，體驗(yàn)更佳，這個(gè)插件在語(yǔ)法中實(shí)現(xiàn)了。這種方式最接近的單文件組件的寫(xiě)法，如果一個(gè)完善項(xiàng)目從改成，用這種方法很快，只要加上和一些必要的變量類(lèi)型就好了，然后用包裹就好。不推薦混入用這種方式寫(xiě)，無(wú)法實(shí)現(xiàn)多繼承。 最近嘗試了一下 TypeScript，試著把一個(gè) Vue 項(xiàng)目改成了 TypeScript 的，感覺(jué)還不錯(cuò) 目前 Vue 和 TypeScript 的配...

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

  • 前端每周清單半年盤(pán)點(diǎn)之 Node.js 篇

    摘要：前端每周清單專(zhuān)注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。對(duì)該漏洞的綜合評(píng)級(jí)為高危。目前，相關(guān)利用方式已經(jīng)在互聯(lián)網(wǎng)上公開(kāi)，近期出現(xiàn)攻擊嘗試爆發(fā)的可能。 前端每周清單專(zhuān)注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開(kāi)發(fā)教程、工程實(shí)踐、深度閱讀、開(kāi)源項(xiàng)目、巔峰人生等欄目。歡...

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

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

0條評(píng)論

魏明

男|高級(jí)講師

TA的文章

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