JavaScript シングルトンパターン-jsチュートリアル-php.cn

JavaScript シングルトンパターン

php中世界最好的语言

リリース： 2018-03-13 18:08:11

オリジナル

1647 人が閲覧しました

今回は、JavaScript のシングルケースモードと、JavaScript シングルトンモードの注意事項について、実際のケースを見てみましょう。

シングルトンパターンは、名前空間を分割し、プロパティとメソッドのバッチをまとめて編成するために使用されるオブジェクトです。インスタンス化できる場合、インスタンス化できるのは 1 回だけです。

名前空間を分割し、グローバル変数を削減します

コードを 1 つに整理し、読みやすく保守しやすくします

シミュレートされたデータなど、すべてのオブジェクトリテラルがシングルトンであるわけではありません

基本構造:

let Cat = { name: 'Kitty', age: 3, run: ()=>{ console.log('run'); } }

ログイン後にコピー

上記のオブジェクトリテラル構造は次のとおりですシングルトンパターンを作成する方法の 1 つですが、シングルトンパターンではありません。シングルトンパターンを実装するには、クラスがすでにインスタンス化されているかどうかを変数を使用して示すことができます。基本的な実装:

class Singleton { constructor(name){ this.name = name; this.instance = null; } getName(){ return this.name; }}let getInstance = (()=> { let instance; return (name)=> { if(!instance) { instance = new Singleton(name); } return instance; }})()let cat1 = getInstance('Hello');let cat2 = getInstance('Kitty');console.log(cat1 === cat2); //trueconsole.log(cat1.getName()) //'Hello'console.log(cat2.getName()) //'Hello'

ログイン後にコピー

インスタンスが存在しない場合はインスタンスを作成し、cat2 で取得したインスタンスを直接返します。 cat1 と同じです。

実用的
DOM 要素を作成するときに繰り返し作成するのを避けるために、シングルトンモードを使用して作成できます

//单例模式let createModal = function() { let content = document.createElement('div'); content.innerHTML = '弹窗内容'; content.style.display = 'none'; document.body.appendChild(content); }//代理获取实例let getInstance = function(fn) { let result return function() { return result || (result = fn.call(this,arguments)); } }let createSingleModal = getInstance(createModal);document.getElementById("id").onclick = function(){ let modal = createSingleModal(); modal.style.display = 'block'; };

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨書籍:

JavaScriptのオブザーバーパターン

JavaScriptの戦略パターン

以上がJavaScript シングルトンパターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。