传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

作为一个半路出家的前端,随着项目经验的积累,也越来越意识到原生js的博大精深,最近正在研究js设计模式,接下来每学一个设计模式就是写篇文章做笔记,其实主要还是代码和设计思想的结合,努力体会,多思考合适自己项目中的应用场景,争取实际应用到实际项目中。

话不多说,进入主题,js设计模式之:单例模式

单例模式定义: 保证一个类仅有一个实例,并提供一个访问它的全局访问点

上代码:

标准单例模式

//方法1
//标准单例模式
var Singleton = function(name){
    this.name = name
}
Singleton.prototype.getName = function(){
    console.log(this.name);
}
Singleton.getInstance = (function(){ //注意这里的getInstance方法是静态方法
    var instance = null     

    //这里使用闭包,作用在于只有当调用到getInstance方法时才进行单例控制,这是一种惰性单例模式,相比标准单例中将instance变量放在Singleton构造函数中性能更好
    return function(){      
        if(!instance){
            instance = new Singleton(name)
        }
        return instance
    }
})()
var a = Singleton.getInstance('nitx')
var b = Singleton.getInstance('sxm')
console.log(a === b);   //true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
上述通过Singleton.getInstance来获取Singleton类的唯一对象,这种方法相对简单,但有个问题,增加了类的不透明性,Singleton类的使用者必须知道这是一个单例类,跟以往通过new XXX的方式来获取对象实例不同,这里需要使用Singleton.getInstance来获取对象。这种写法意义不大。

//方法二
//透明的单例模式,用户从这个类中创建对象时,可以像使用其他任何普通类一样,通过new创建类实例。下面单例类的作用是在页面中创建唯一的div节点。
var CreateDivWrap = (function(){
    var instance = null;

    var CreateDiv = function(html){
        if(instance){
            return instance
        }
        this.html = html;
        this.init()
        return instance = this
    }

    CreateDiv.prototype.init = function(){
        var div = document.createElement('div')
        div.innerHTML = this.html
        document.body.appendChild(div)
    }

    return CreateDiv
})()

var c = new CreateDivWrap('nitx')
var d = new CreateDivWrap('sxm')
console.log(c === d);   //true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
上述代码中,还有一个缺点,为了把instance封装起来,使用了自执行匿名函数和闭包,并且让这个匿名函数返回真正的Singleton构造方法CreateDiv,这增加程序复杂度,CreateDiv方法负责两件事,一件是创建对象和执行初始化init方法,第二是保证只有一个对象,这种操作违背“单一职责原则”,假如将来要利用这个类在页面中创建多个类,也就是让这个类从单例类变成普通类,那就得改写CreateDivWrap构造函数,去掉控制唯一对象的那一段代码,麻烦!解决这个问题的方法是使用 代理实现单例模式

//方法三:
//先创建普通类,作用是创建div
var CreateDiv= function(html){
    this.html = html
    this.init()
}

CreateDiv.prototype.init = function(){
    var div = document.createElement('div')
    div.innerHTML = this.html
    document.body.appendChild(div)
}

//创建并引用代理类ProxySingletonCreateDiv,其作用是控制CreateDiv类创建唯一对象
var ProxySingletonCreateDiv = (function(){
    var instance = null
    return function(html){
        if(!instance){
            instance = new CreateDiv(html)
        }
        return instance
    }
})()

var e = new ProxySingletonCreateDiv('nitx')
var f = new ProxySingletonCreateDiv('sxm')
console.log(e === f);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
通过引入代理类的方式,同样完成一个单例模式的编写,但和之前方法一、二相比,把负责管理单例的逻辑移到了代理类ProxySingletonCreateDiv中,这样CreateDiv就是一个普通类,CreateDiv类和ProxySingletonCreateDiv类组合起来就是一个单例类。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button type="button" id="btn1">登录</button>
</body>
<script>
//添加dom普通写法,非单例,可无限添加dom,如需保持只有一个dom时,在点击事件中加入删除先前dom的操作
var createLoginLayer = function(){
    var div = document.createElement('div')
    div.innerHTML = '我是登录弹窗'
    div.style.display = 'none'
    document.body.appendChild(div)
    return div
}

document.getElementById('btn1').onclick = function(){
    var loginLayer = createLoginLayer()
    loginLayer.style.display = 'block'
}

//添加dom单例写法,只能添加一个dom节点,这种写法缺点是把单例逻辑耦合在具体业务代码中,难以利用
var createLoginLayer = (function(){
    var singleResult = null;
    return function(){
        if(!singleResult){
            div = document.createElement('div')
            div.innerHTML = '我是登录弹窗'
            div.style.display = 'none'
            document.body.appendChild(div)
        }
        return singleResult = div
    }
})()

document.getElementById('btn1').onclick = function(){
    var loginLayer = createLoginLayer()
    loginLayer.style.display = 'block'
}

//单独抽出的单例逻辑
var getSingle = function(fn){
    var result = null;  //创建一个变量来标记是否创建过对象,如果是则下次直接返回已创建过的对象
    return function(){
        if(!result){
            result = fn.apply(this, arguments)  //执行createLoginLayer函数结果返回div
        }
        return result
    }
}

var createLoginLayer = function(){
    div = document.createElement('div')
    div.innerHTML = '我是登录弹窗'
    div.style.display = 'none'
    document.body.appendChild(div)
    return div
}

var createSingleLoginLayer = getSingle(createLoginLayer)(1, 2, 3)

document.getElementById('btn1').onclick = function(){
    var loginDialog = createSingleLoginLayer()
    loginDialog.style.display = 'block'
}

//第三个例子中,把创建实例对象的职责和管理单例的职责分别放置在两个方法中,这两个方法可以独立变化而互不影响,当组合在一起时,就完成了创建唯一实例对象的功能

</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
单例模式使用要点,应结合闭包、高阶函数、惰性单例、创建实例对象与管理单例职责的方法拆分。
---------------------
【转载,仅作分享,侵删】
作者: 一期一会
原文:https://blog.csdn.net/qq_34832846/article/details/85987671


分享至 : QQ空间
收藏

1 个回复

倒序浏览
奈斯
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马