JavaScriptのファクトリパターンとシングルトンパターンを詳しく解説

デザインパターンは、オブジェクト指向ソフトウェアの設計プロセスにおける特定の問題に対する簡潔で洗練されたソリューションです。現在、デザインパターンについて話す場合、一般的には、書籍『デザインパターン: 再利用可能なオブジェクト指向ソフトウェアの基礎』で言及されている 23 の一般的なソフトウェア開発デザインパターンを指します。JavaScript では、一般的に使用されるパターンを理解するだけで済みます。JavaScript には、一般的に使用されるデザインパターンが 7 種類あります。

JavaScript の一般的なデザインパターン

シングルトンモードとファクトリーモードの使用法を見てみましょう。

工場出荷時のパターン

JavaScript では、ファクトリモードは、呼び出されたときに新しいオブジェクトを返す関数として表現されます。複数の属性オブジェクトを作成し、複数の属性メソッドを含める必要がある場合は、ファクトリモードを使用できます。サンプルコードは次のとおりです。

// 工厂模式
function FoodFactory(name, color) {
  return{
    name,
    color
  }
}
const f1 = FoodFactory('西兰花','黄绿色')

// 构造函数
function Food(name, color) {
  this.name = name
  this.color = color
}
const f3 = new Food('西兰花','黄绿色')

1.vue3-createApp
ポータルは、カスタム構成を使用して新しいインスタンスを作成します。

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {  'X-Custom-Header':'foobar' }
})

JavaScript では、ファクトリパターンは、呼び出されたときに新しいオブジェクトを返す関数によって表されます。

// 工厂模式
function FoodFactory(name, color) {
  return {
    name,
    color
  }
}
const toy1 = FoodFactory('西兰花','黄绿色')
const toy2 = FoodFactory('花菜','白色')

2.axios-create

カスタム構成で新しいインスタンスを作成します。

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar'}
})

JavaScript では、ファクトリパターンは、呼び出されたときに新しいオブジェクトを返す関数によって表されます。

// 工厂模式
function FoodFactory(name, color) {
  return {
    name,
    color
  }
}
const toy1 = FoodFactory('西兰花','黄绿色')
const toy2 = FoodFactory('花菜','白色')

// 构造函数
function Food(name, color) {
  this.name = name
  this.color = color
}
const f3 = new Food('西兰花','黄绿色')

シングルトンパターン

シングルトンパターンを使用する場合、システム全体でシングルトンオブジェクトが 1 つだけ存在するようにする必要があります。

consts1= SingleTon.getInstance()
consts2= SingleTon.getInstance()
console.log(s1=== s2)//true

1. シングルトン方式:

1. 自分で実装する

2. Vant のコンポーネントにトーストして通知する

2. シングルトンの考え方:

1.vue2のメソッドを使用する

2.vue3のメソッドを使用する

JavaScriptのファクトリパターンとシングルトンパターンを詳しく解説

おすすめ