ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScript を使用してテンプレート メソッド パターンを実装する方法
テンプレート メソッド パターンは動作設計パターンであり、アルゴリズムのスケルトンを 1 つの操作で定義し、一部のステップをサブクラスに延期することを指します。テンプレート メソッドを使用すると、サブクラスでアルゴリズムの構造を変更せずにアルゴリズムの特定のステップを再定義できます。この記事では、JavaScript を使用してテンプレート メソッド パターンを実装する方法について説明します。
実装メソッド
JavaScript で、テンプレート メソッド パターンを実装するには、次の手順に従う必要があります。
例
これは、JavaScript でテンプレート メソッド パターンを実装する方法を示す例です。 2 つの数値の合計の計算を定義する基本クラス Operation
を作成するとします。この操作は 2 つのステップで構成されます。最初に 2 つの数値が加算され、次に結果がフォーマットされます。テンプレート メソッド パターンを使用してこの操作を実装し、結果のフォーマット方法をサブクラスに決定させます。
class Operation { constructor(a, b) { this.a = a; this.b = b; } getResult() { const sum = this.sum(); return this.format(sum); } sum() { return this.a + this.b; } format(result) { // 由子类决定如何格式化结果 throw new Error('该方法必须由子类实现'); } }
上記のコードでは、2 つの数値 a
と b
を含む Operation
クラスを定義し、 getResult## を実装します。 # 方法。このメソッドは、
sum メソッドと
format メソッドを呼び出します。これらは、2 つの数値の合計を計算し、結果をそれぞれ特定の形式にフォーマットします。
format メソッドは抽象メソッドであるため、このメソッドをサブクラスに実装する必要があります。
DecimalFormatOperation を作成できます。
class DecimalFormatOperation extends Operation { format(result) { return result.toFixed(2); } }上記のコードでは、
Operation クラスを継承し、
format メソッドを実装します。このメソッドは計算結果を小数点第2位に四捨五入して返します。
getResult メソッドを呼び出すことができます。
const op = new DecimalFormatOperation(2.2, 3.3); const result = op.getResult(); console.log(result); // '5.50'上記のコードでは、
DecimalFormatOperation
op と入力し、2 つの数値
2.2 と
3.3 を渡します。次に、
getResult メソッドを呼び出し、結果を
result 変数に保存します。最後に、結果を
'5.50' としてコンソールに出力します。
以上がJavaScript を使用してテンプレート メソッド パターンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。