定义

是能被实例化一次的类或者对象（只能存在一个）

特点

  • 只允许实例化一次的对象类
  • 对于十分复杂的对象类，往往可以节省资源占用
  • 通常也被用来管理命名空间

作用

管理命名空间，管理数据，方法存储

应用

  • 一些代码库中命名空间就是通过单例面试实现的
  • 管理数据的存储，例如模拟静态变量

    coding

    ```html <!DOCTYPE html> 

  1. <a name="mNy9H"></a>
  2. # 举例-单例模式_自定义弹出层
  3. ```html
  4. <!DOCTYPE html>
  5. <html lang="en">
  6.     <head>
  7.         <meta charset="UTF-8" />
  8.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9.         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  10.         <title>单例模式_自定义弹出层</title>
  11.         <style>
  12.             div.tip {
  13.                 width: 500px;
  14.                 height: fit-content;
  15.                 position: fixed;
  16.                 top: 0;
  17.                 left: 0;
  18.                 right: 0;
  19.                 bottom: 0;
  20.                 margin: auto;
  21.                 background-color: #fff;
  22.                 background-clip: padding-box;
  23.                 border-radius: 4px;
  24.                 box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  25.                 pointer-events: auto;
  27.                 display: none;
  28.             }
  30.             div.tip > .top {
  31.                 background-color: skyblue;
  32.                 padding: 16px 24px;
  33.                 color: rgba(0, 0, 0, 0.65);
  34.                 border-bottom: 1px solid #e8e8e8;
  35.                 border-radius: 4px 4px 0 0;
  36.                 line-height: 22px;
  37.             }
  39.             div.tip > .top > span {
  40.                 float: right;
  41.                 width: 20px;
  42.                 height: 20px;
  43.                 border-radius: 50%;
  44.                 cursor: pointer;
  45.                 background-color: #fff;
  46.                 font-size: 16px;
  47.                 text-align: center;
  48.                 line-height: 20px;
  49.             }
  51.             .tip > .content {
  52.                 padding: 24px;
  53.                 font-size: 14px;
  54.                 line-height: 1.5;
  55.                 word-wrap: break-word;
  56.             }
  58.             .tip > .btns {
  59.                 display: flex;
  60.                 justify-content: flex-end;
  61.                 padding: 10px 16px;
  62.                 background: transparent;
  63.                 border-top: 1px solid #e8e8e8;
  64.                 border-radius: 0 0 4px 4px;
  65.             }
  66.         </style>
  67.     </head>
  69.     <body>
  70.         <div class="tip">
  71.             <div class="top">
  72.                 标题
  73.                 <span>X</span>
  74.             </div>
  75.             <div class="content">
  76.                 <p>提示内容</p>
  77.             </div>
  78.             <div class="btns">
  79.                 <button>取消</button>
  80.                 <button>确定</button>
  81.             </div>
  82.         </div>
  84.         <script>
  85.             const Tip = (() => {
  86.                 class Tip {
  87.                     constructor() {
  88.                         this.ele = document.createElement("div");
  89.                         this.ele.className = "tip";
  90.                         document.body.appendChild(this.ele);
  91.                         this.callback = () => {};
  92.                         this.bindEvent();
  93.                     }
  95.                     setContent(txt) {
  96.                         this.ele.innerHTML = `
  97.             <div class="top">标题
  98.               <span class="close">X</span>
  99.             </div>
  100.             <div class="content">
  101.               <p>${txt}</p>
  102.             </div>
  103.             <div class="btns">
  104.               <button class="cancel">取消</button>
  105.               <button class="ok">确定</button>
  106.             </div>
  107.           `;
  109.                         this.ele.style.display = "block";
  110.                     }
  111.                     bindEvent() {
  112.                         this.ele.addEventListener("click", (e = window.event) => {
  113.                             const target = e.target || e.srcElement;
  115.                             const { className } = target;
  117.                             switch (className) {
  118.                                 case "close":
  119.                                     this.ele.style.display = "none";
  120.                                     break;
  121.                                 case "cancel":
  122.                                     this.ele.style.display = "none";
  123.                                     this.callback(false);
  124.                                     break;
  125.                                 case "ok":
  126.                                     this.ele.style.display = "none";
  127.                                     this.callback(true);
  128.                                     break;
  129.                             }
  130.                         });
  131.                     }
  132.                     setStyle(val) {
  133.                         this.ele.querySelector(".top").style.backgroundColor = val;
  134.                     }
  135.                 }
  137.                 let instance = null;
  138.                 return function singleTon(options = {}, cb = function () {}) {
  139.                     const { txt = "Hello World", topBG = "skyblue" } = options;
  141.                     if (!instance) instance = new Tip();
  143.                     instance.setContent(txt);
  144.                     instance.setStyle(topBG);
  145.                     instance.callback = cb;
  147.                     return instance;
  148.                 };
  149.             })();
  151.             Tip(
  152.                 {
  153.                     txt: "Hello World",
  154.                     topBG: "#1890ff",
  155.                 },
  156.                 (res) => {
  157.                     console.log("print: ", res);
  158.                 }
  159.             );
  160.         </script>
  161.     </body>
  162. </html>