デザインパターンとは

デザインパターンは、いくつかの一般的な問題を要約し、特定の問題に対する一連の一般的な解決策を提供することです（問題を解決するという考えに重点が置かれています）。開発では、そのような問題が発生した場合に限り、これらのデザインを直接使用できますモデルは問題を解決します。それは建築の分野で始まり、建築の分野でのいくつかの問題と経験を要約して、建築の分野でほとんどの問題を解決するために使用できる一連のソリューションを形成しました。その後、コンピューターの分野で借用しました。建築分野のデザインモードから。コンピュータ分野で頻繁に遭遇する問題を要約して要約し、コンピュータ分野で23のデザインパターンを形成します。

従来のシングルトンパターン

一般的に、シングルトンモードは、一部のソフトウェアまたはWebサイトのログインウィンドウに相当します。[ログイン]をクリックし、キャンセルして、もう一度[ログイン]をクリックします。ポップアップするログインウィンドウは同じであり、ウィンドウは再作成されません。

クラスにインスタンスが1つしかないことを確認し、そのクラスへのグローバルアクセスポイントを提供します。

シングルトンのコアアイデアを実現する

変数は、特定のクラスに対してオブジェクトが作成されたかどうかを示すために使用されます。作成された場合、次にクラスのインスタンスが取得されたときに、以前に作成されたオブジェクトが直接返されます。

jsコードを使用してシングルトンモードを実装する

var CreateDiv = function (text) {
    
     //构造函数，初始化一个对象(对象又称为实例)
    this.text = text;
    this.init();
};

CreateDiv.prototype.init = function () {
    
    
    var div = document.createElement('div'); 
    div.innerHTML = this.text; 
    document.body.appendChild(div);
};

var ProxySingletonCreateDiv = (function () {
    
      //实现单例的函数
    var instance;
    return function (text) {
    
    
        if (!instance) {
    
     //若instance实例不存在，则创建
            instance = new CreateDiv(html);
        }
        return instance;
    }
})();

var a = new ProxySingletonCreateDiv('sven1');
var b = new ProxySingletonCreateDiv('sven2');

alert(a === b); //true

工場モード

たとえば、私たちが目にする道端の自動販売機に相当します。消費者として、商品を選んで支払うだけで欲しいものを手に入れることができます。自動販売機はどのように選択肢を認識し、どのように機能するのでしょうか。知る必要はありません。自動販売の機会は、その動作原理とメカニズムを隠し、それは工場に相当します。

ファクトリパターンは、オブジェクトの作成に使用されるデザインパターンです。オブジェクト作成のロジックは公開しませんが、ロジックを関数にカプセル化すると、この関数をファクトリにすることができます。

ファクトリモデルは、さまざまなレベルの抽象化に分割できます。

シンプルなファクトリ
ファクトリメソッド
抽象ファクトリ

シンプルなファクトリパターン

jsコードで単純なファクトリパターンを実装する

let  factory = function (role) {
    
    
    function User(obj) {
    
    
        this.name = obj.name;
        this.role = obj.role;
    }
    switch(role) {
    
    
        case 'superman':
          return new User({
    
     name: '平台用户', role: ['主页', '登录页'] })
          //break;
        case 'man':
          return new User({
    
     name: '游客', role: ['登录页']})
          //break;
        default:
          throw new Error('参数错误')
    }
  }
    
  let superman = factory('superman');
  let man = factory('man');

 factory就是一个简单的工厂,该工厂中有一个构造函数分别对应不同的权限。我们只需要传递相应的参数就可以获取一个实例对象了

単純な工場の利点：
正当なパラメータを渡すだけで、作成の具体的な詳細を知らなくても目的のオブジェクトを取得できます。

ただし、関数にはオブジェクトのコンストラクターと判定ロジックコードがすべて含まれています。毎回オブジェクトを追加する必要がある場合は、新しいコンストラクターを追加する必要があります。維持する必要のあるオブジェクトが上記の2つではなく、20以上の場合、そうすると、この機能がスーパー機能になり、メンテナンスが難しくなります。

したがって、単純なファクトリモデルは、オブジェクトの数が少なく、ロジックが単純な状況にのみ適しています。

ファクトリメソッド

ファクトリメソッドパターンの本来の目的は、オブジェクトの実際の作成をサブクラスに延期して、コアクラスが抽象クラスになるようにすることです。しかし、これらの従来のオブジェクト指向言語のようにjsで抽象クラスを実装することは難しいため、jsで彼のアイデアを参照するだけで済みます。

ファクトリ関数はファクトリクラスと考えることができます。シンプルモードでは、2つの場所を変更して新しいオブジェクトを追加する必要があります。ファクトリメソッドパターンを追加した後は、1つの場所を変更するだけで済みます。ファクトリメソッドのファクトリクラスの場合、彼はインスタンス化のみを行います。彼のプロトタイプクラスを変更するだけで済みます。

セーフモードを使用してファクトリオブジェクトを作成します。

jsコードでファクトリメソッドを実装する

let factory = function (role) {
    
    
    if(this instanceof factory) {
    
      //instanceof是一个运算符，用来判断一个对象是否是某个类的实例
        var s = new this[role]();
        return s;
    } else {
    
    
        return new factory(role);
    }
}

factory.prototype = {
    
    
    admin: function() {
    
    
        this.name = '平台用户';
        this.role = ['登录页', '主页']

    },
    common: function() {
    
    
        this.name = '游客';
        this.role = ['登录页']
    },
    test: function() {
    
    
        this.name = '测试';
        this.role =  ['登录页', '主页', '测试页'];
        this.test = '我还有一个测试属性哦'
    }
}

let admin = new factory('admin');
let common = new factory('common');
let test = new factory('test');

抽象ファクトリパターン

（1）抽象ファクトリパターンは、特定のクラスを指定せずに、同じテーマを持つ単一のファクトリのグループをカプセル化する方法を提供します。つまり、ファクトリのファクトリ、つまり、単一であるが関連する/従属するファクトリをグループ化するが、特定のカテゴリを指定しないファクトリです。

（2）抽象ファクトリは、共通のテーマに関連するオブジェクトを作成します。オブジェクト指向プログラミングでは、ファクトリは他のオブジェクトを作成するオブジェクトです。抽象ファクトリは、新しく作成されたオブジェクトによって共有されるテーマを抽象化しました。

（3）newキーワードでコンストラクターを直接呼び出すのではなく、なぜオブジェクトを作成する責任が他の人に与えられるのか疑問に思われるかもしれません。
その理由は、コンストラクターが作成プロセス全体を制御するのが制限されており、より広範な知識を持つファクトリに制御を与える必要がある場合があるためです。これには、オブジェクトのキャッシュ、オブジェクトの共有または再利用、複雑なロジック、作成プロセス中のオブジェクトとタイプのカウントの維持、およびオブジェクトがさまざまなリソースやデバイスと相互作用するシナリオが含まれます。アプリケーションでオブジェクト作成プロセスをさらに制御する必要がある場合は、抽象ファクトリパターンの使用を検討してください。

抽象ファクトリパターン関数

相互に関連する依存関係があり、単純でない作成ロジックが含まれる場合は、抽象ファクトリパターンを使用することをお勧めします。抽象ファクトリパターンは通常、次の状況で考慮されます。

システムは、その製品の作成、構成、および表示から独立している必要があります
システムは、複数の製品シリーズのいずれかで構成する必要があります
一連の関連する製品オブジェクトは一緒にのみ使用されるため、この制約を適用する必要があります
製品クラスライブラリを提供し、実装ではなく、インターフェイスのみを表示したい
概念的には、依存関係の存続期間はコンシューマーの存続期間よりも短くなります。
特定の依存関係を構築するにはランタイム値が必要
実行時にシリーズから呼び出す製品を決定したいと思います。
依存関係を解決する前に、実行時にのみ認識される1つ以上のパラメーターを指定する必要があります。
製品間の一貫性が必要な場合
プログラムに新しい製品または製品ラインを追加する場合、既存のコードを変更する必要はありません。

jsコードを使用して抽象的なファクトリパターンを実装する

//员工类
function Employee(name) {
    
    
    this.name = name;

    this.say = function() {
    
    
        log.add("我是员工：" + name);
    };
}
//员工工厂
function EmployeeFactory() {
    
    
    this.create = function(name) {
    
    
        return new Employee(name);
    };
}
//供应商类
function Vendor(name) {
    
    
    this.name = name;

    this.say = function() {
    
    
        log.add("我是供应商：" + name);
    };
}
//供应商工厂
function VendorFactory() {
    
    
    this.create = function(name) {
    
    
        return new Vendor(name);
    };
}

// 日志函数
var log = (function() {
    
    
    var log = "";

    return {
    
    
        add: function(msg) {
    
    
            log += msg + "\n";
        },
        show: function() {
    
    
            console.info("%c%s", "color: red; background: #b4b3b3; font-size: 20px", log);
            log = "";
        }
    }
})();

function run() {
    
    
    var persons = [];
    var employeeFactory = new EmployeeFactory();
    var vendorFactory = new VendorFactory();

    persons.push(employeeFactory.create("张三"));
    persons.push(employeeFactory.create("李四"));
    persons.push(vendorFactory.create("王麻子"));
    persons.push(vendorFactory.create("赵六"));

    for (var i = 0, len = persons.length; i < len; i++) {
    
    
        persons[i].say();
    }

    log.show();
}

フロントエンドのいくつかの一般的なデザインパターン（実装コードを含む）