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));
    }
};
创建实例对象职责和管理单例职责分别放置两个方法里，这两个方法可以独立变化互不影响

 

posted @ 2018-04-01 13:39  renyangli  阅读(106)  评论(0)  编辑  收藏  举报