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));
        }
    };
    创建实例对象职责和管理单例职责分别放置两个方法里,这两个方法可以独立变化互不影响
  • 相关阅读:
    uniapp开发微信小程序
    requests自动登录禅道并提交bug 测试
    [转载]使用CPU时间戳进行高精度计时
    lu面
    音量控制面板项目说明
    【转载】粤语翻译工具
    专业操盘手的买卖法则
    自动刷新查询火车票脚本
    股东权益和权益比
    异形魔方SQ1的暴力解法
  • 原文地址:https://www.cnblogs.com/ron123/p/8686384.html
Copyright © 2011-2022 走看看