首页 » JavaScript » 正文

单例模式demo

发表于: PHP,JS,Golang,Shopify学习交流博客 – 咪啪咪啪的小木屋 · 2022-4-14 ·  164 views  ·  0 replies 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>单例模式</title>
    </head>
    <body>
        <button id="loginBtn">登录</button>
        <script>
            var createLogin = function (a, b ,c){
                console.log(a, b, c);
                var div = document.createElement("div");
                div.innerHTML = "我是登录的弹窗"

                div.style.display = "none"

                document.body.appendChild(div)
                return div;
            }

            var getSingle = function (fn){
                var result;
                return function(){
                    // console.info('====', fn.apply(this, arguments));
                    // console.info('--->', result, result || (result = fn.apply(this, arguments)));
                    return result || (result = fn.apply(this, arguments))
                }
            }

            var create = getSingle(createLogin)
            document.getElementById("loginBtn").onclick = function(){
                var loginLay = create(1, 2, 3)
                loginLay.style.display = 'block'
            }
        </script>
    </body>
</html>

在上面这个例子中点击登录按钮
只会输出一次1 2 3, 之后再点击就不会再次输出1 2 3了,这正是单例模式的精髓
精髓主要就是在闭包函数的这一行

 return result || (result = fn.apply(this, arguments))

其中fn.apply(this, arguments)就是函数createLogin的执行结果,因为闭包的原因result第一次是undefined,但是之后,就会常驻到内存中,也就是第一次||之后的结果
所以第二次以及之后的点击只会执行
return result;
||后面的内容会被舍弃

引用内容

https://segmentfault.com/q/1010000008946808/a-1020000008946969

«上一篇: :下一篇»

0 thoughts on “单例模式demo”

  1. 还没有任何评论,你来说两句吧

Leave a reply