小柒

www.xiaoqi.cn

0%

单例模式

发表于 更新于 分类于

创建代码库

单例模式是一个只允许实例化一次的对象类，有时这么做是为了节省系统资源，javaScript中单例模式经常会作为命名空间对象来实现，通过单例对象可以将各个模块的代码井井有条的梳理在一起，减少使用全局变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var A={
    Util:{
        util_method1:function(){},
        util_method2:function(){}
        //...
    },
    Tool:{
        tool_method1:function(){},
        tool_method2:function(){}
        //...
    },
    Ajax:{
        get:function(){},
        post:function(){}
        //...
    },
    others:{
        //...
    }

}
A.Util.util_method1()
A.Tool.tool_method1()
A.Ajax.get()

单例模式管理静态变量

静态变量：只能访问不能修改并且创建后就能使用，为了实现创建后就能使用这一需求，我们需要让创建的函数执行一次，我们创建的对象内保存着静态变量通过取值器访问，最后将这个对象作为一个单例放在全局空间里作为静态变量单例对象供他人使用，闭包封装私有变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Conf=(function(){
    var conf={
        MAX_NUM:100,
        MIN_NUM:1,
        COUNT:1000
    }
    //返回取值器对象
    return {
        get: function(name){
            return conf[name]?conf[name]:null;
        }
    }
})()
var count=Conf.get('COUNT')
console.log(count)//1000

惰性单例

在需要的时候才创建对象实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//惰性单例
let getSingle=function(fn){
    let res;
    return function(){
        return res || (res = fn.apply(this,arguments))
    }
}
let createLoginLayer = function(){
    let div = document.getElementById('div')
    div.innerHTML = "我是登录浮窗"
    div.style.display='none'
    document.body.appendChild(div)
    return div
}
let createSingleLoginLayer = getSingle(createLoginLayer)
document.getElementById('loginBtn').onclick = function(){
    let loginLayer = createSingleLoginLayer()
    loginLayer.style.display='block'
}

res在闭包中，因此永远不会被销毁，在将来的请求中如果res被赋值就直接返回这个值