ホームページ >ウェブフロントエンド >jsチュートリアル >私のお気に入りのJavaScriptデザインパターン
私は非常に使用しているJavaScriptのデザインパターンを見るのは面白いかもしれないと思いました。私は徐々に、一定の期間にわたってそれに落ち着き、さまざまなソースからの影響を吸収して適応させ、必要な柔軟性を提供するパターンに達するまで。
概要を見せて、それがどのようにまとめられるかを見てみましょう:そのサンプルコードからわかるように、全体的な構造は
function MyScript(){} (function() { var THIS = this; function defined(x) { return typeof x != 'undefined'; } this.ready = false; this.init = function( { this.ready = true; }; this.doSomething = function() { }; var options = { x : 123, y : 'abc' }; this.define = function(key, value) { if(defined(options[key])) { options[key] = value; } }; }).apply(MyScript);関数リテラル
:です。
関数リテラルは、本質的に自己執行範囲であり、名前付き関数を定義してすぐに呼び出すことに相当します。(function() { ... })();
私はもともと
カプセル化のために関数リテラルの使用を開始しましたfunction doSomething() { ... } doSomething();
- あらゆる形式のスクリプトはそのエンクロージャーに包むことができ、それを効果的にプライベートスコープに「密封」し、同じ範囲の他のスクリプト、またはグローバル範囲のデータと競合するのを防ぎます。最後にあるブラケットペアは、スコープを実行するものであり、他の機能と同じように呼び出します。 しかし、グローバルに呼び出すだけでなく、scopeがfunction.applyを使用して実行される場合、特定の名前のスコープで実行することができます。 これらの2つを組み合わせることで、名前付き関数の作成、次に、文字通りの名前付き関数の範囲に関数の実行を組み合わせることで、オブジェクト指向のクラスで見つかった継承の種類をシミュレートしながら、任意のスクリプトの基礎を形成できる単一使用オブジェクトになります。
内の美しさ
その最初のコードの例を見てください。囲まれた範囲の構造によって提供される柔軟性を確認できます。もちろん、どんな機能でもできないことは何もありませんが、このようにそれをまとめることで、任意の
という名前のscopeに関連付けられる構造があります。しかし、パブリックデータを共有すると同時に、それぞれが独自のプライベートデータも定義できます。たとえば、スクリプトの最上部に:
関数範囲を指しているこれと呼ばれるプライベート変数を作成しました。これを参照するためにプライベート関数内で使用できます。「self = this」に行くのと同じトリックで、内側のスコープの参照を作成します。>>> 同じ方法で宣言された他の私的変数は、一定のデータを定義する場合、大文字の慣習を共有できます(ただし、VARの代わりにconstを使用して宣言は避けてください。
プライベート関数は、内部ユーティリティを提供するために使用できます
function MyScript(){} (function() { var THIS = this; function defined(x) { return typeof x != 'undefined'; } this.ready = false; this.init = function( { this.ready = true; }; this.doSomething = function() { }; var options = { x : 123, y : 'abc' }; this.define = function(key, value) { if(defined(options[key])) { options[key] = value; } }; }).apply(MyScript);
その後、他のインスタンスや外側にアクセスできるパブリックメソッドとプロパティを作成できます。 また、
特権的な値を作成することもできます(function() { ... })();- これはプライベートですが、公的に定義できます。この場合は、公開定義方法を介して。その議論は、データのニーズに応じてさらに検証できます。
ラップアップ!
これらの機能はすべて、構成要素を私にとって非常に便利にしている理由です。そして、それはすべて、きちんとした自己執行function doSomething() { ... } doSomething();シングルトン
サムネイルクレジット:スーパーキンボ
注:もっと欲しいですか?
ジェームズの詳細を読みたい場合は、毎週のTech Geek Newsletterを購読してくださいTech Times。
以上が私のお気に入りのJavaScriptデザインパターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。