单例设计模式

最新推荐文章于 2024-06-15 10:13:23 发布

Huangrunze!

最新推荐文章于 2024-06-15 10:13:23 发布

阅读量43

点赞数

分类专栏：设计模式文章标签：设计模式 js javascript

本文链接：https://blog.csdn.net/weixin_45805570/article/details/119416907

版权

设计模式专栏收录该内容

3 篇文章 0 订阅

订阅专栏

定义

保证一个类仅有一个实例，并提供一个访问它的全局访问点。（相信仅有一个实例这里大家都能够理解，但访问它的全局访问点是什么呢？就是该类的一个实例然后我们把它保存到外部作用域，这里的外部作用域一般是指全局作用域）。

实现单例模式

 //普通单例模式实现
        function Cat() {
            //类的其他属性
//instance用来保存创建的对象
            this.instance = null;
        }
        Cat.prototype.create = function() {
        //如果对象存在则返回该对象，不存在则创建该对象
            if (!this.instance) {
                this.instance = new Cat();
            }
            return this.instance;
        }
        var a = Cat.create(); //创建Cat对象
        var b = Cat.create();//先判断Cat是否已经创建过对象，如果创建过对象，则返回该创建的对象
        console.log(a == b); //true

虽然我们现在已经简单的实现了单例模式，但是它并不够好，无论是从代码的耦合度（创建单例的代码和操作类的代码混合在一起），还是类的不透明性（使用该类的人，不知道该类是一个单例类）。所以我们需要对代码进行优化，用代理实现单例模式。

用代理实现单例模式

		function Cat(name) {
			this.name=name;
		}
        var Proxy = (function() {
            var instance;
            return function(name) {
                if (!instance) {
                    instance = new Cat(name);
                }
                return instance;
            };
        }());
        var a = new Proxy("xiaoju");
        var b = new Proxy("xiaohuang");
        console.log(a == b);  //true

我们把类的功能和实现单例模式的代码进行了抽离，当我们不需要使用代理的时候，我们可以直接使用new Cat（name）来创建一个普通类，当我们需要创建一个单例类的时候，我们直接把参数传给Proxy代理类，再用new创建对象即可。

解决了普通单例模式的两个问题：

能够使用手动决定是否使用单例类来提高类的透明性
把类的功能和创建单例类的功能进行抽离，使代码耦合度降低

惰性单例

定义：在需要的时候才创建对象实例。

//通用的惰性单例
        function Cat(name) {
            this.name = name;
        }
        var getSinger = (function() {
            var result;
            return function(fn) {
                var args = Array.prototype.slice.call(arguments, 1)
                return result || (result = new fn(...args));
            }
        }())
        var cat1 = getSinger(Cat, "xiaohuang");
        var cat2 = getSinger(Cat);
        console.log(cat1 == cat2); //true

应用

单例模式在javascript中的应用由全局缓存，浏览器的window对象，我们常用的浮窗一般在同一时间只创建一个浮窗，这是适合用单例模式来实现了。
下面实现了一个简单的类似浮窗的效果，如果像要更加真实的浮窗效果，可以再写点css去实现，这里我就不去具体实现拉。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .red {
        width: 200px;
        height: 100px;
        background-color: red;
    }
</style>

<body>
    <button id="btn">弹窗</button>
    <script>
        var getSinger = (function() {
            var result;
            return function(fn) {
                return result || (result = fn.apply(this, arguments));
            }
        }())

        function div() {
            var div = document.createElement("div");
            document.body.appendChild(div);
            div.className = "red";
            //如果函数没有返回值 会默认返回undefined fn.apply(this,arguments)如果返回undefined 
            //那result就等于undefined,第二次就会会直接该函数，所以我们这里返回1
            return 1;
        }
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            getSinger(div);
        }
    </script>
</body>

</html>

Huangrunze!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单例设计模式

定义保证一个类仅有一个实例，并提供一个访问它的全局访问点。（相信仅有一个实例这里大家都能够理解，但访问它的全局访问点是什么呢？就是该类的一个实例然后我们把它保存到外部作用域，这里的外部作用域一般是指全局作用域）。实现单例模式 //普通单例模式实现 function Cat() { //类的其他属性//instance用来保存创建的对象 this.instance = null; } Cat.prototy
复制链接

扫一扫