TIL90. Adapter Pattern

14884 ワード
TIL デザインモード テキストリンク
BをA用Aに変えよう

旅行中に電圧の異なる場所で機械を充電するには、電圧を交換するアダプタが必要です.
プログラミングでは、クライアントで他のクラスのインタフェースを使用する場合、つまり、他のインタフェースに変換する必要がある場合はアダプタが必要です.このとき利用可能なのは어댑터 패턴です.

例


テキストコード
class Printer {
  constructor() {
    this.textArr = [];
  }
  
  pushText(text) {
    this.textArr.push(text);
  }
  
  print() {
    return this.textArr.join('');
  }
}

const instance = new Printer();
instance.pushText('Hello');
instance.pushText('World');

instance.print(); // 'HelloWorld'
このコードで各テキストに「#」を変更した場合、どうすればいいですか?
class HashTagPrinter {
  constructor() {
    this.textArr = [];
  }
  
  pushText(text) {
    this.textArr.push(text);
  }
  
  printWithHash() {
    return this.textArr.map(text => `#${text}`).join('');
  }
}

const instance = new HashTagPrinter();
instance.pushText('Hello');
instance.printWithHashTag(); // #Hello
上記の例と異なる場合、より複雑でより長いコードでは、これは低効率な方法になります.
->adapterモードで管理を試みます.

adapter pattern

class Adapter {
  
  constructor(printer) {
    this.printer = printer;
  }
  
  pushText(text) {
    this.printer.pushText(text);
  }
  
  print() {
    return this.printer.printWithHash();
  }
}

const instance = new Adapter(new HashTagPrinter());
instance.pushText(Hello);
instance.pushText(World);
// #Hello#World

実際の使用


サーバから受信したプロトコルバッファタイプをクライアントタイプに変換する必要がある場合があります.
最初は変更せず、クライアントタイプに直接変更しました.しかし,今後他のコンポーネントで使用されることが多くなると,コードを記述する必要があるため,これは良いコードではない.
したがって、Adapterモードを使用すると、使用しているすべてのコンポーネントを修復する必要がなく、Adapterモードを変更するだけで便利です.

タイプコード

// 서버 타입
type ServerType = {
  	typeCode: string;
  	identifier: string;
  	state: string;
};

//클라이언트 타입
type ClientType = {
	type: string;
  	id: string;
  	status: string;
};

完全なコード

// 변경 전
...생략
axios.get("url").then(({data}) => {
  setDataContainer(data.items.map((item: ServerType) => ({
    type: item.typeCode,
    id: item.identifier,
    status: item.state
  })),
 );
});

//변경 후
...생략
axios.get("url").then(({data}) => {
  setDataContainer(data.items.map(convert)
 );
});

const convert = (item: ServerType): ClientType => {
  return {
    type: item.type,
    id: item.identifier,
    status: item.state
  }
};
カフカの疑惑について
2 w Express-Routerオブジェクトの使用