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
  • 相关阅读:
    误加all_load引起的程序报错
    ConstraintLayout 约束布局
    前端判断是否APP客户端打开触屏,实现跳转APP原生组件交互之遐想
    TP5 多条件whereOr查询
    json手动解析详解
    Centos python 2.6 升级到 2.7
    js中click重复执行
    使用 Python 实现实用小工具
    使用 Python 编写密码爆破工具
    使用Python进行无线网络攻击
  • 原文地址:https://www.cnblogs.com/zhouyideboke/p/13396084.html
Copyright © 2011-2022 走看看