ホームページ > ウェブフロントエンド > フロントエンドQ&A > es6にはファクトリーモードはありますか?

es6にはファクトリーモードはありますか?

WBOY
リリース: 2022-05-06 16:33:21
オリジナル
1484 人が閲覧しました

es6 にはファクトリ モードがあります。ファクトリ モードはロジックを関数にカプセル化します。es6 では、コンストラクタを使用せずにオブジェクトを作成できますが、static キーワードを指定したクラスを使用して、単純なファクトリを静的メソッドにカプセル化します。 User クラス。構文は「class User{constructor}static static method(){}」です。

es6にはファクトリーモードはありますか?

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6 にはファクトリー モードがありますか?

ES6 はクラスの新しい構文を提供します。クラスは本質的に糖衣構文ですが、JavaScript がプロトタイプ継承を使用する言語であることには変わりありません。これにより、オブジェクトの作成と継承のプロセスがより明確になり、読みやすくなります。 ES6 の新しい構文を使用して上記の例を書き直してみましょう。

ES6 による単純なファクトリ パターンの書き換え

ES6 を使用して単純なファクトリ パターンを書き換える場合、オブジェクトの作成にコンストラクターは使用されなくなり、クラスの新しい構文が使用されます。 , そして、static キーワードを使用して、単純なファクトリを User クラスの静的メソッドにカプセル化します:

//User类
class User {
  //构造器
  constructor(opt) {
    this.name = opt.name;
    this.viewPage = opt.viewPage;
  }
  //静态方法
  static getInstance(role) {
    switch (role) {
      case 'superAdmin':
      return new User({ name: '超级管理员', viewPage: ['首页', '通讯录', '发现页', '应用数据', '权限管理'] });
        break;
      case 'admin':
        return new User({ name: '管理员', viewPage: ['首页', '通讯录', '发现页', '应用数据'] });
        break;
      case 'user':
        return new User({ name: '普通用户', viewPage: ['首页', '通讯录', '发现页'] });
        break;
      default:
        throw new Error('参数错误, 可选参数:superAdmin、admin、user')
    }
  }
}

//调用
let superAdmin = User.getInstance('superAdmin');
let admin = User.getInstance('admin');
let normalUser = User.getInstance('user');
ログイン後にコピー

ファクトリ モードは、最も一般的な開発モードです。新しい操作は個別にカプセル化されます。新しい操作が発生したときは、ファクトリ モードが使用されます。考慮すべきだ 。コードロジックを公開せずにオブジェクトを作成し、そのロジックを関数に書き込みます。この機能は工場出荷時のパターンです。利点: シンプルさ。欠点は、コンストラクターを追加するたびに、関数内のコード ロジックを変更する必要があることです。

ファクトリ パターンは、オブジェクトの作成に最も一般的に使用されるデザイン パターンの 1 つです。オブジェクト作成の特定のロジックは公開しませんが、ロジックを関数にカプセル化すると、この関数はファクトリと見なすことができます。ファクトリ パターンは、さまざまな抽象化レベルに応じて、単純なファクトリ、ファクトリ メソッド、および抽象ファクトリに分類できます。

JavaScript 言語しか使ったことがない場合、抽象の概念は少し曖昧かもしれません。JavaScript は常に抽象を予約語とみなし、実装していないからです。抽象的な概念をよく理解していないと、ファクトリ パターンの 3 つのメソッドの類似点と相違点を理解するのが難しくなります。そこで、まずは抽象化とファクトリの概念をシナリオを用いて簡単に説明していきます。

シンプル ファクトリ モードは静的ファクトリ モードとも呼ばれ、ファクトリ オブジェクトは特定の製品オブジェクト クラスのインスタンスを作成することを決定します。主に同じタイプのオブジェクトを作成するために使用されます。

実際のプロジェクトでは、ユーザーの権限に基づいてさまざまなページをレンダリングする必要があることがよくあります。高レベルの権限を持つユーザーが所有する一部のページは、低レベルの権限を持つユーザーは表示できません。したがって、さまざまな権限レベルを持つユーザーのコンストラクターでユーザーが表示できるページを保存できます。権限に基づいてユーザーをインスタンス化します。

コードは次のとおりです。

class SuperAdmin{
  constructor(){
    this.name = "超级管理员";
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理'];
  }
}
class Admin{
  constructor(){
    this.name = "管理员";
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理'];
  }
}
class NormalUser{
  constructor(){
    this.name = "普通用户";
    this.viewPage = ['首页', '通讯录', '发现页', '应用数据', '权限管理'];
  }
}
//工厂方法类
class UserFactory {
  getFactory(role){
   switch (role) {
     case 'superAdmin':
       return new SuperAdmin();
       break;
     case 'admin':
       return new Admin();
       break;
     case 'user':
       return new NormalUser();
       break;
     default:
       throw new Error('参数错误, 可选参数:superAdmin、admin、user');
   }
  }
 }
 
//调用
let uesr =new UserFactory();
uesr.getFactory('superAdmin');
uesr.getFactory('admin');
uesr.getFactory('user');
ログイン後にコピー

シンプルなファクトリの利点は、作成の具体的な詳細を知らなくても、必要なオブジェクトを取得するために必要なパラメータが 1 つだけであることです。ただし、関数にはすべてのオブジェクトの作成ロジック(コンストラクタ)と判定ロジックのコードが含まれており、新たなコンストラクタを追加するたびに判定ロジックのコードを変更する必要があります。

オブジェクトが上記 3 つではなく、30 以上になると、この関数は巨大なスーパー関数となり、保守が困難になります。

したがって、単純なファクトリは、作成されるオブジェクトの数が少なく、オブジェクト作成ロジックが複雑でない場合にのみ使用できます。

【関連する推奨事項: JavaScript ビデオ チュートリアル Web フロントエンド ]

以上がes6にはファクトリーモードはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
es6
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート