JavaScript 设计模式学习 Singleton

2023年6月10日下午5:02 • JavaScript

对于“JavaScript 设计模式学习 Singleton”的完整攻略，可以分为以下步骤：

1. 了解 Singleton 模式的定义与原理

Singleton 模式是一种创建型设计模式，它确保某个类只有一个实例，并提供一个全局访问点。
Singleton 模式主要包含三个要素：私有化构造函数、私有化静态属性和一个提供全局访问的静态方法。
在 JavaScript 中，可以使用对象字面量来实现 Singleton 模式。

2. 学习 Singleton 模式的示例代码

下面是一个使用对象字面量实现的 Singleton 模式的示例代码：

var singleton = {
  property1: "value1",
  property2: "value2",
  method1: function() {
    console.log("method1");
  },
  method2: function() {
    console.log("method2");
  }  
};

在这个示例代码中，我们定义了一个名为 singleton 的对象，它包括了两个属性 property1 和 property2，以及两个方法 method1 和 method2。由于 JavaScript 对象字面量本身就是单例，因此这里不需要考虑对象实例化的问题，我们可以直接使用 singleton 对象中的属性和方法。

另外，我们还可以使用闭包来实现 Singleton 模式，下面是一个使用闭包实现的 Singleton 模式的示例代码：

var singleton = (function() {
  var privateVariable = "private value";
  function privateMethod() {
    console.log("private method");
  }
  return {
    publicVariable: "public value",
    publicMethod: function() {
      console.log("public method");
    },
    getPrivateVariable: function() {
      return privateVariable;
    }
  };
})();

在这个示例代码中，我们使用了立即执行函数来创建一个闭包，将属性和方法定义在闭包内部。其中 privateVariable 和 privateMethod 是私有变量和私有方法，只能被内部的方法访问；而 publicVariable、publicMethod 和 getPrivateVariable 则是公共变量和公共方法，可以被外部访问。

3. 实践 Singleton 模式

在实际开发中，Singleton 模式可以用来实现以下功能：

管理全局变量
管理共享资源，例如线程池
限制某个类的实例数量

下面是一个在 Vue.js 中使用 Singleton 模式管理全局状态的示例代码：

var store = (function() {
  var state = {
    count: 0
  };
  return {
    getCount: function() {
      return state.count;
    },
    increaseCount: function() {
      state.count++;
    },
    decreaseCount: function() {
      state.count--;
    }
  };
})();

new Vue({
  el: "#app",
  data: {
    count: store.getCount()
  },
  methods: {
    handleIncrease: function() {
      store.increaseCount();
      this.count = store.getCount();
    },
    handleDecrease: function() {
      store.decreaseCount();
      this.count = store.getCount();
    }
  }
});

在这个示例代码中，我们使用立即执行函数创建一个名为 store 的 Singleton 对象，用来管理全局状态中的计数器。在 Vue 实例中，我们可以通过 store 对象中的方法修改计数器的值，并将其实时反映在视图中。