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

     1.单例模式的定义:保证⼀个类仅有⼀个实例,并提供⼀个访问它的全局访问点。实现的⽅法为先判断实例存在与否,如果存在则直接返回,如果不存在就创建了再返回,这就确保了⼀个类只有⼀个实例对象。

    适⽤场景:⼀个单⼀对象。⽐如:弹窗,⽆论点击多少次,弹窗只应该被创建⼀次' 实现起来也很简单,⽤⼀个变量缓存即可
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .model{
    border:1px solid black;
    position: fixed;
    300px;
    height:300px;
    top:20%;
    left:50%;
    margin-left:-150px;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="loginBtn">点我</div>
    <script>
    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.className = 'model'
    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';
    };
    </script>
    </body>
    </html>
    应⽤场景
    我们再element中的弹窗代码中,可以看到单例模式的实际案例 保证全局唯⼀性 https://github.com/El
    emeFE/element/blob/dev/packages/message-box/src/main.js#L79
  • 相关阅读:
    第16周作业
    第15周作业
    迟到的第14周作业
    第13次作业集
    软件工程结课总结
    第13次作业
    第12次作业
    第11次作业--字符串的处理
    第10次作业(2)
    第十次作业
  • 原文地址:https://www.cnblogs.com/zhouyideboke/p/13396084.html
Copyright © 2011-2022 走看看