es6にはファクトリーモードはありますか?
es6 にはファクトリ モードがあります。ファクトリ モードはロジックを関数にカプセル化します。es6 では、コンストラクタを使用せずにオブジェクトを作成できますが、static キーワードを指定したクラスを使用して、単純なファクトリを静的メソッドにカプセル化します。 User クラス。構文は「class User{constructor}static static method(){}」です。
このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









ES6 では、配列オブジェクトの reverse() メソッドを使用して、配列の反転を実現できます。このメソッドは、配列内の要素の順序を逆にして、最後の要素を最初に、最初の要素を最後に配置するために使用されます。構文「array」 。逆行する()"。 reverse() メソッドは元の配列を変更します。変更したくない場合は、拡張演算子 "..." とともに使用する必要があり、構文は "[...array].reverse() 」。

非同期はes7です。 async と await は ES7 に新しく追加されたもので、非同期操作のソリューションです。async/await は co モジュールとジェネレーター関数の糖衣構文と言え、より明確なセマンティクスで JS 非同期コードを解決します。名前が示すように、async は「非同期」を意味します。async は関数が非同期であることを宣言するために使用されます。async と await の間には厳密な規則があります。両方を互いに分離することはできず、await は async 関数内でのみ記述できます。

ブラウザの互換性のため。 ES6 は JS の新しい仕様として、多くの新しい構文と API を追加していますが、最新のブラウザーは ES6 の新機能を高度にサポートしていないため、ES6 コードを ES5 コードに変換する必要があります。 WeChat Web 開発者ツールでは、デフォルトで babel が使用され、開発者の ES6 構文コードを 3 つの端末すべてで適切にサポートされる ES5 コードに変換し、開発者がさまざまな環境によって引き起こされる開発上の問題を解決できるようにします。プロジェクト内でのみ設定して確認するだけです。 「ES6~ES5」オプション。

手順: 1. 構文 "newA=new Set(a); newB=new Set(b);" を使用して、2 つの配列をそれぞれセット型に変換します; 2. has() と filter() を使用して差分セットを検索します、構文 " new Set([...newA].filter(x =>!newB.has(x)))" では、差分セット要素がセット コレクションに含まれて返されます。 3. 配列を使用します。 from セットを配列に変換するタイプ、構文は「Array.from(collection)」です。

es5 では、for ステートメントと IndexOf() 関数を使用して配列の重複排除を実現できます。構文 "for(i=0;i<配列長;i++){a=newArr.indexOf(arr[i]);if( a== -1){...}}」。 es6 では、スプレッド演算子 Array.from() および Set を使用して重複を削除できます。まず配列を Set オブジェクトに変換して重複を削除してから、スプレッド演算子または Array.from() 関数を使用する必要があります。 Set オブジェクトを配列に変換してグループ化するだけです。

es6 では、一時的なデッド ゾーンは構文エラーであり、ブロックを閉じたスコープにする let および const コマンドを指します。コード ブロック内では、let/const コマンドを使用して変数が宣言される前に、変数は使用できず、変数が宣言される前は変数の「デッド ゾーン」に属します。これは構文上「一時デッド ゾーン」と呼ばれます。 ES6 では、一時的なデッド ゾーンや let ステートメントや const ステートメントでは変数のプロモーションが発生しないことを規定しています。これは主に実行時エラーを減らし、変数が宣言される前に使用されて予期しない動作が発生するのを防ぐためです。

いいえ、require は CommonJS 仕様のモジュール構文であり、es6 仕様のモジュール構文は import です。 require は実行時にロードされ、import はコンパイル時にロードされます。require はコード内のどこにでも記述できます。import はファイルの先頭にのみ記述でき、条件文や関数スコープでは使用できません。モジュール属性は導入されるだけです。 require を実行した場合、そのためパフォーマンスは比較的低くなりますが、インポート コンパイル中に導入されたモジュールのプロパティのパフォーマンスはわずかに高くなります。

地図は注文済みです。 ES6 のマップ タイプは、多くのキーと値のペアを格納する順序付きリストです。キー名と対応する値はすべてのデータ型をサポートします。キー名の等価性は、「Objext.is()」メソッドを呼び出すことによって決定されます。 , したがって、数字の 5 と文字列「5」は 2 つのタイプとして判断され、プログラム内で 2 つの独立したキーとして現れることができます。
