zoukankan      html  css  js  c++  java
  • JavaScript 设计模式-单例模式

    单例模式是设计模式中最为简单的一种。此模式会确保一个类只有一个实例,并提供一个它的全局访问点。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>JavaScript 设计模式-单例模式</title>
            <style media="screen">
                div{color:red}
            </style>
        </head>
        <body>
            <button id="bt">查看演示</button>
            <script type="text/javascript">
                var createDiv = (function(){
                    var div;
                    return function(){
                        if(!div){
                            div = document.createElement('div');
                            div.innerHTML = '单例模式';
                            div.style.display = 'none';
                            document.body.appendChild(div);
                        }
                        return div;
                    }
                })();
                document.getElementById('bt').onclick = function(){
                    var odiv = createDiv();
                    odiv.style.display = 'block';
                }
            </script>
        </body>
    </html>

    无论点击多少次按钮,都会只生成一个div元素,代码还不够好,下面进行一下改善

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>JavaScript 设计模式-单例模式</title>
            <style media="screen">
                div{color:red}
            </style>
        </head>
        <body>
            <button id="bt">查看演示</button>
            <script type="text/javascript">
                var createDiv = (function(){
                    var div;
                    return function(){
                        if(!div){
                            div = document.createElement('div');
                            div.innerHTML = '单例模式';
                            div.style.display = 'none';
                            document.body.appendChild(div);
                        }
                        return div;
                    }
                })();
                document.getElementById('bt').onclick = function(){
                    var odiv = createDiv();
                    odiv.style.display = 'block';
                }
            </script>
            
        </body>
    </html>
    var getSingle = function(fn){
        var result;
        return function(){
            return result || (result = fn.apply(this,arguments));
        }
    };
    创建实例对象职责和管理单例职责分别放置两个方法里,这两个方法可以独立变化互不影响
  • 相关阅读:
    HDU 5501
    CF #324 DIV2 E题
    CF #324 DIV2 C题
    利用位操作实现加减运算(不用+ -号)
    【Leetcode】120. 三角形最小路径和
    删除排序链表中的重复元素
    【python】二分查找
    如何在不添加新数组的情况下移除元素?
    三/四 数之和,双指针法,细节很多
    【转】字符串相关操作
  • 原文地址:https://www.cnblogs.com/ron123/p/8686384.html
Copyright © 2011-2022 走看看