シングルトン パターンは、フロントエンド設計パターンで一般的なパターンです。シングルトン パターンは、クラスにインスタンスが 1 つだけ存在し、グローバル アクセス ポイントを提供することを保証する作成パターンです。フロントエンド開発では、通常、グローバル状態、構成情報、キャッシュ データなどを管理するためにシングルトン モードが使用されます。シングルトン モードでは、グローバル変数の乱用を回避し、コードの保守性とスケーラビリティを向上させることができます。シングルトン パターンを実装するにはさまざまな方法がありますが、最も一般的な方法は、クロージャを使用してプライベート プロパティとメソッドを実装することです。
たとえば、Vue の Vuex はシングルトン モードを使用して開発されます。
サンプルコード 1
Vuex では、Store というクラスを使用してグローバル ステート マネージャーを作成します。このクラスはシングルトンです。Store インスタンスを作成するとき、すでに Store インスタンスがある場合はそのインスタンスを直接返し、それ以外の場合は新しい Store インスタンスを作成して返します。これにより、アプリケーション全体に Store インスタンスが 1 つだけ存在することが保証され、グローバル状態の管理と共有が実現されます。
Vue では、シングルトン パターンを使用して、さまざまなコンポーネント間でデータを共有するグローバル ステート マネージャーを作成できます。Vue で使用されるシングルトン パターンの例を次に示します。
// store.js
import {
reactive } from 'vue';
let store = null;
export function useStore() {
if (!store) {
store = reactive({
count: 0
});
}
return store;
}
storeこの例では、というグローバル ステート マネージャーが作成され、次を使用してreactiveリアクティブ オブジェクトに変換されます。次に、storeオブジェクトをuseStoreという名前の関数にカプセル化し、シングルトン パターンを使用してstoreオブジェクトが 1 つだけ作成されるようにしました。useStore関数が呼び出されるたびに、オブジェクトが存在しない場合は、store新しいオブジェクトが作成され、変数storeに割り当てられます。storeそれ以外の場合は、既存のストア オブジェクトを直接返します。
コンポーネント でオブジェクトを使用する場合store、必要なのは、useStore関数を呼び出してグローバルstoreオブジェクトを取得し、それをテンプレートで使用してプロパティstore.countにアクセスすることだけです。count例えば：
<template>
<div>
<button @click="increment">Increment</button>
<div>Count: {
{
store.count }}</div>
</div>
</template>
<script setup>
import {
useStore } from './store.js';
const store = useStore();
function increment() {
store.count++;
}
</script>
サンプルコード 2
var Singleton = (function() {
var instance;
function createInstance() {
var object = {
name: 'Singleton Object',
sayHello: function() {
console.log('Hello, I am the instance.');
}
};
return object;
}
return {
getInstance: function() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
var instance1 = Singleton.getInstance();
var instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // 输出：true
instance1.sayHello(); // 输出：Hello, I am the instance.
メソッドではcreateInstance、新しいオブジェクトが作成され、名前とメソッドがオブジェクトに追加されます。最後に、このオブジェクトを返します。
シングルトン パターンを使用する場合、getInstanceメソッドを呼び出してシングルトン オブジェクトを取得します。このメソッドではgetInstance、if ステートメントを使用してシングルトン オブジェクトが作成されているかどうかを判断し、作成されていない場合はcreateInstanceメソッドを呼び出してシングルトン オブジェクトを作成します。最終的には、2 つの同一のシングルトン オブジェクトが作成され、それらは同じインスタンスになります。sayHelloまた、挨拶を出力するシングルトン オブジェクトのメソッドも呼び出します。
ご覧のとおり、シングルトン パターンでは、プリミティブ型、オブジェクト、関数など、あらゆる種類のオブジェクトを使用してシングルトン オブジェクトを表すことができます。シングルトン パターンを実装する場合、実際のニーズに応じてシングルトン オブジェクトのプロパティとメソッドを定義することで、より豊富で柔軟な機能を実現できます。