javascript单例模式(2)

s28065006.jpg
参考这本书，有源代码。做一下注释
1️⃣ 单例模式
 
<html>
<body>
    <button id="loginBtn">登录</button>
</body>
<script>
    var createLoginLayer = function(){
        var div = document.createElement( 'div' );
        div.innerHTML = '我是登录浮窗';
        div.style.display = 'none';
        document.body.appendChild( div );
        return div;
    };
    document.getElementById( 'loginBtn' ).onclick = function(){
        var loginLayer = createLoginLayer();
        loginLayer.style.display = 'block';
    };
</script>
</html>

<script type="text/javascript">
    var createLoginLayer = (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( 'loginBtn' ).onclick = function(){
        var loginLayer = createLoginLayer();
        loginLayer.style.display = 'block';
    };

    var createIframe= (function(){
        var iframe;
        return function(){
            if ( !iframe){
                iframe= document.createElement( 'iframe' );
                iframe.style.display = 'none';
                document.body.appendChild( iframe);
            }
            return iframe;
        }
    })();

    var getSingle = function( fn ){
        var result;
        return function(){
            return result || ( result = fn .apply(this, arguments ) );
        }
    };

    var createLoginLayer = function(){
        var div = document.createElement( 'div' );
        div.innerHTML = '我是登录浮窗';
        div.style.display = 'none';
        document.body.appendChild( div );
        return div;
    };
    var createSingleLoginLayer = getSingle( createLoginLayer );
    document.getElementById( 'loginBtn' ).onclick = function(){
        var loginLayer = createSingleLoginLayer();
        loginLayer.style.display = 'block';
    };

    //下面我们再试试创建唯一的iframe 用于动态加载第三方页面：
    var createSingleIframe = getSingle( function(){
        var iframe = document.createElement ( 'iframe' );
        document.body.appendChild( iframe );
        return iframe;
    });
    document.getElementById( 'loginBtn' ).onclick = function(){
        var loginLayer = createSingleIframe();
        loginLayer.src = 'http://baidu.com';
    };

    var bindEvent = function(){
        $( 'div' ).one( 'click', function(){
            alert ( 'click' );
        });
    };
    var render = function(){
        console.log( '开始渲染列表' );
        bindEvent();
    };
    render();

    render();
    render();

    var bindEvent = getSingle(function(){
        document.getElementById( 'div1' ).onclick = function(){
            alert ( 'click' );
        }
        return true;
    });
    var render = function(){
        console.log( '开始渲染列表' );
        bindEvent();
    };
    render();
    render();
    render();

</script>
javascript单例模式(2)

推荐阅读更多精彩内容
