デザインパターンの使用

19720 ワード

programming beginners javascript webdev テキストリンク

再利用可能な、高度な、オブジェクト指向のソリューションは、ソフトウェア設計の日常的な問題の類似したインスタンスに対処するために使用することができます.それらはある種の問題を解決するための青写真のようです.
インJavaScript , アプリケーションを作成するとき、デザインパターンは有益です.デザインパターンが承認され、開発者コミュニティによって確認された簡単なソリューションです.
この記事では、デザインパターンを使用する利点とJavaScriptで最も使用されるデザインパターンのいくつかを紹介します.

デザインパターンを使用する利点

ゼロから始まる必要はありません

我々はすぐに苦労せずに我々のアプリケーションで実証済みのデザインパターンを実装することができます.彼らは最適化され、経験豊富な開発者によって改訂された.

再利用

同様の問題に対処するために、同じデザインパターンを複数回使用することができます.彼らはただ一つの問題の解決策ではない我々は多くの問題に対処するためにそれらを実装することができます.

コードサイズを減らす

デザインパターンは既に最適化され、プロジェクト全体の複雑さを低下させ、適切に適用されたときにパフォーマンスを向上させます.

コードをリファクタリングする必要はありません

適切にデザインパターンを使用する場合は、コードベースを再設定する必要はありません.コードの保守性と効率を向上させることができます.

表情豊かで理解できる

標準のデザインパターンに従うならば、コードは明白で、他の開発者に理解できます.これにより、他の開発者と同じページについて説明することができます.

デザインパターンの種類

JavaScriptアプリケーションで使用できる様々なデザインパターンがあります.デザインパターンの3つの重要なグループを通過しましょう.

クリエイティブデザインパターン

オブジェクト作成プロセスを処理することで問題を解決します.例:プロトタイプパターン、singletonパターン、コンストラクタパターン.

構造設計パターン

オブジェクト間の関係を実現する方法を同定することによって問題を解決する.例:アダプターパターン、プロキシパターン.

行動設計パターン

オブジェクト間の通信を扱うことで問題を解決します.例:オブザーバーパターン、テンプレートパターン.

JavaScriptのデザインパターンの型

デザインパターン

さて、JavaScriptで使用されているいくつかの人気デザインパターンを議論しましょう.

コンストラクタ

コンストラクターパターンは、Creative Designパターンカテゴリに属します.これは、特定のメソッドとプロパティを持つ新しいオブジェクトを初期化することができます.同じテンプレートの多くのインスタンスを作成するときにコンストラクタパターンを使用できます.これらのインスタンスは異なるかもしれませんが、メソッドを共有できます.
コンストラクターデザインパターンの簡単な例を次のコードに示します.

// Creating constructor
function Tree(name, height, scientificname) {
  this.name = name;
  this.height = height;
  this.scientificname = scientificname;
  // Declaring a method
  this.getData = function() {
    return this.name + ' has a height of ' + this.height;
  };
}
// Creating new instance
const Coconut = new Tree('coconut', '30m', 'cocos nucifera');
console.log(Coconut.getData()); // coconut has a height of 30m

ここで、コンストラクタ関数はツリーです.これは、それぞれ3つの属性と、名前、高さ、科学的な名前、およびgetdataという名前のメソッドを含みます.その後、我々はそれから新しいオブジェクト、ココナッツをインスタンス化します.このオブジェクトには、コンストラクターからのすべてのプロパティとメソッドが含まれます.その後、オブジェクトを介して関連するデータを渡すことができるとココナッツの出力を取得する関数を呼び出す30 mの高さがあります.

ファクトリーパターン

ファクトリパターンは別の創造的デザインパターンですが、コンストラクタは、目的のオブジェクトを返すために様々な引数を受け取ります.このパターンは、同様の特性を持つ別のオブジェクトグループに対処する必要がある状況に最適です.
たとえば、食品製造工場を検討してください.あなたがケーキを求めるならば、彼らはあなたにケーキを与えます.あなたがパンが欲しいならば、彼らはあなたにパンを与えます.それがこのパターンで起こっていることの基本的な考えです.では、コードベースでこれをどのように実装するかを見てみましょう.

function foodFactory() {
  this.createFood = function(foodType) {
    let food;
switch(foodType) {
      case 'cake':
        food = new Cake();
        break;
      default:
        food = new Bread();
        break;
    }
return food;
  }
}
const Cake = function() {
  this.givesCustomer = () => {
    console.log('This is a cake!');
  }
}
const factory = new foodFactory();
const cake = factory.createFood('cake');
cake.givesCustomer();

FoodFactoryという工場があります.ここでは、foodtypeというパラメータをとる関数createFood ()を持っています.このパラメーターに応じてオブジェクトをインスタンス化できます.たとえば、createFood ()関数にパラメータをケーキとして渡すと、対応する出力を受け取ります.したがって、この設計パターンは、同様の特性を有する異なるオブジェクトをインスタンス化するのを助ける.

モジュールパターン

モジュールパターンは、構造デザインパターンのカテゴリに属します.このパターンはカプセル化に似ています.それはあなたが変更し、他のコンポーネントに影響を与えることなくコードの特定の部分を更新することができます.それは自己完結しています、そして、このモジュールは我々のコードをきれいで分離しておくのを助けます.
JavaScriptがパブリックまたはプライベートのようなアクセス指定子を持っていないので、必要に応じてこのモジュールパターンを使用してカプセル化を実装できます.私たちはクロージャ(親関数が閉じられた後でさえ親スコープにアクセスできる関数)とそれを実装するための即時に呼び出された関数式(IFE)を使用します.
カプセル化をエミュレートし、グローバルスコープから特定のコンポーネントを非表示にするには、このデザインパターンを使用できます.
このデザインパターンに基づいて実際のコードをどのように構築するかを見てみましょう.

function foodContainter () {
    const container = \[\];

    function addFood (name) {
      container.push(name);
    }

    function getAllFood() {
      return container;
    }

    function removeFood(name) {
      const index = container.indexOf(name);
      if(index < 1) {
        throw new Error('This food is unavailable');
      }
      container.splice(index, 1)
    }

    return {
      add: addFood,
      get: getAllFood,
      remove: removeFood
    }
}

const container = FoodContainter();
container.add('Cake');
container.add('Bread');

console.log(container.get()) // Gives both cake and bread
container.remove('Bread') // Removes bread

コードの冒頭に、入力するすべての要素を含む配列コンテナーがあります.addAdd ()メソッドは、新しい要素を配列に入力するたびに呼び出されます.次に、getallFood ()関数は、配列内で使用可能なすべての要素を返します.removeFood ()メソッドは、入力された項目が配列内で使用可能かどうかをチェックし、そこにある場合は削除します.それ以外の場合、エラーがスローされます.
この実装の後、新しいオブジェクトを作成し、以前に列挙した3つのメソッドを使用できます.FoodContainer内で作成された変更は、他のコンポーネントには影響しません.

シングルトンパターン

Singletonパターンは、オブジェクトを一度以上インスタンス化することを制限します.つのインスタンスが存在しない場合、1つのインスタンスをインスタンス化します.
同じクラスから既存のインスタンスが存在しない場合にのみインスタンスを作成するメソッドを持つクラスを作成することで、これを実装できます.現在のオブジェクトがある場合、それは新しいものの代わりに既に作成されたオブジェクトを参照します.
Singletonパターンは、名前空間汚染を減らすのに役に立ちます、そして、それもグローバル変数の必要を最小にします.我々は、このデザインパターンを使用して、単一の場所からシステム全体の操作を調整することができます.
例:アプリケーション全体で共有されるリソースへのアクセスを管理するためのデータベース接続プール.

var firstSingleton = (function () {
    var instance;
function createInstance() {
        var object = new Object("First instance");
        return object;
    }
return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();
function execute() {
var firstinstance = firstSingleton.getInstance();
var secondinstance = firstSingleton.getInstance();
console.log("Is it the same instance? " + (instance1 === instance2));
}

createInstant ()メソッドは、新しいオブジェクトを作成します.getInstant ()関数は、Singletonのゲートキーパーとして動作し、既存の既存の新しいリファレンスを作成するためのオブジェクトの有効性をチェックします.
getInstant ()メソッドの一部は別のデザインパターンを表します.この新しいデザインパターンは既存のインスタンスの有効性をチェックし、インスタンスが存在しない場合に1を作成します.これは、必要に応じてインスタンスを作成することでメモリとCPUを節約するのに役立ちます.
execute ()メソッドでは、2つのインスタンスを作成し、それらを比較して2つのインスタンスが同じかどうかを確認します.他のインスタンスの作成が最初のインスタンス自体への参照を返すので、出力は“同じインスタンスですか?”となります.

プロトタイプパターン

プロトタイプパターンは、既存のオブジェクトの属性を新しいオブジェクトにクローンします.このデザインパターンの基本概念は原型継承である.新しいオブジェクトをインスタンス化するときにプロトタイプとして機能するオブジェクトを作成することについてです.オブジェクトを使用しています.これを実装するJavaScriptの機能を作成します.
JavaScriptはクラスの概念をサポートしません.したがって、JavaScriptアプリケーションで継承を実装するために、このプロトタイプパターンを使用することができます.
例としてバスに乗りましょう.

const bus = {
  wheels: 4,
  start() {
    return 'started';
  },
  stop() {
    return 'stopped';
  },
};
// create object
const myBus = Object.create(bus, { model: { value: 'Single deck' } });
console.log(myBus.\_\_proto\_\_ === bus); // true

バスという名前のプロトタイプを作成し、1つのプロパティと、wheel、start ()、stop ()という2つのメソッドを使用します.それから、私たちはそれから新しいオブジェクト、mybusを作り、その新しいオブジェクトに追加のプロパティ、モデルを与えます.しかし、この新しいオブジェクトはプロトタイプからすべてのプロパティとメソッドを含んでいます.
コードの最後の行では、新しく作成されたオブジェクト、MyBusのプロトタイプは、元のプロトタイプ、バスと同じであることを証明することができます.

結論

この記事では、デザインパターンが何であるか、どのような利点があるか、JavaScriptで実装できるデザインパターンについて説明しました.
これらのデザインパターンは多くの方法で開発者を助けますが、アプリケーションの仕様を通過した後にそれらを使用し、デザインパターンがそれらに合っていることを確認してください.
のためのSyncfusion必須スタジオJavaScript あなたがアプリケーションを構築する必要がある唯一のスイートになります.それは、1つのパッケージで65以上の高性能、軽量、モジュラー、および応答UIコンポーネントが含まれています.ダウンロードfree trial 今日のコントロールを評価する.
何か質問やコメントがあれば、私たちを介して私達に連絡することができますsupport forums , support portal , or feedback portal . 我々は常にあなたを支援して満足している!
この記事が役に立つと思います.お読みありがとうございます.