JavaScript 设计模式-单例模式

最新推荐文章于 2024-07-15 18:27:04 发布

di84186

最新推荐文章于 2024-07-15 18:27:04 发布

阅读量88

点赞数

文章标签：设计模式 javascript ViewUI

原文链接：http://www.cnblogs.com/ron123/p/8686384.html

版权

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

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

转载于:https://www.cnblogs.com/ron123/p/8686384.html

di84186

关注

0
点赞
踩
0

收藏

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

单例模式是设计模式中最为简单的一种。此模式会确保一个类只有一个实例，并提供一个它的全局访问点。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>JavaScript 设计模式-单例模式</title...
复制链接

扫一扫