前端设计模式（一）：单例模式
单例模式就是保证类的实例只有一个，这就是它的作用，比如在前端中，创建全局唯一的对话框实例，记录日志信息全局唯一实例等等。单例模式在前端的两种实现方式：
1.通过原型方法实现
const Singleton = function () {
this.instance = null;
};
Singleton.getInstance = function (name) {
if (!this.instance) {
this.instance = new Singleton();
}
return this.instance;
};
const a = Singleton.getInstance();
const b = Singleton.getInstance();
console.log(a === b); // true2.通过静态方法实现
class SingleDog {
static instance;
show() {
console.log('我是一个单例对象')
}
static getInstance() {
// 判断是否已经new过1个实例
if (!SingleDog.instance) {
// 若这个唯一的实例不存在，那么先创建它
SingleDog.instance = new SingleDog()
}
// 如果这个唯一的实例已经存在，则直接返回
return SingleDog.instance
}
}
const s3 = SingleDog.getInstance()
const s4 = SingleDog.getInstance()
console.log(s3 === s4); // true实际上，上面两种方法模仿的是Java语言中的单例实现方式，平常我们前端开发，基于ES6使用模块导入导出，也可以看作单例模式：
// 比如这是SingletonExample.js
// 可以定义一些属性，方法等等，然后通过export导出，其他模块再分别导入
const array_state = [];
const methodTest = function() {
console.log('这是测试方法')
}
export default {
array_state, methodTest
}单例模式的应用场景：
1.利用单例模式思想 来实现 登录框的 显示和隐藏
class LoginForm {
constructor(){
this.state = 'hide'
}
show(){
if(this.state === 'show'){
console.log('已经显示');
return
}
this.state = 'show';
console.log('登录框已显示')
}
hide(){
if(this.state === 'hide'){
console.log('已经隐藏');
return
}
this.state = 'hide';
console.log('登录框已隐藏')
}
}
LoginForm.getInstance = (function(){
let instance
return function() {
if(!instance){
instance = new LoginForm();
}
return instance
}
})测试：
let login1 = LoginForm.getInstance();
login1.show(); //打印：登录框显示成功
let login2 = LoginForm.getInstance();
login2.hide(); //打印：登录框隐藏成功
console.log(login1 === login2)其他的应用场景例如,vuex，redux中的store都是单例模式实现的
关于单例模式的思考：
其实，在前端使用Vue，React等框架开发时，很难再去使用传统的单例模式，因为ES6的导入导出不仅写法优雅，而且编码使用都比传统的书写方式方便。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]