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('西兰花','黄绿色')

单例模式

在使用单例模式模式时，单例对象整个系统需要保证只有一个存在。

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

1.单例方法:

1.自己实现

2.vant中的toast和notify组件

2.单例的思想:

1.vue2中的use方法

2.vue3中的use方法