一打开文章就弹登录框？我忍不了了！

在前端开发中，我们常常关注代码的优雅、性能的极致，却容易忽略一个最重要的角色：用户。

今天，我想通过一段简单的登录弹窗（Modal）实现，来讲述一个技术之外的思考：如何用代码表达对用户的尊重？如何用技术守护用户体验？

一、技术分享的初心

我们写博客、发文章、建社区，初衷是传播知识、交流经验、帮助他人。

但近年来，某些技术平台（这里就不点名批评了，这里要点名表扬掘金）为了追求"用户增长""活跃度"，逐渐偏离了初心：

一打开文章就弹出登录框
想看评论必须登录
想复制代码必须登录
想看全文必须注册......

这些"强制登录"的行为，本质上是用技术绑架用户，让真正想学习的人望而却步。

二、我的选择：懒汉式单例模式

今天我想分享的，不仅是一个登录弹窗的实现，更是一种对用户体验的尊重 和对技术初心的守护 。我写了一个简单的登录弹窗（Modal）实现，它背后体现的，是一种克制的技术态度 和对用户的理解。

三、代码展示

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0">
  <title>Modal 登录弹窗（懒汉式单例）</title>
  <style>
    #modal {
      height: 200px;
      width: 200px;
      line-height: 200px;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #000;
      text-align: center;
      z-index: 9999;
      background: #fff;
      display: none;
    }
  </style>
</head>
<body>
  <button id="open">打开弹窗</button>
  <button id="close">关闭弹窗</button>
  <button id="open2">打开天窗</button>

  <script>
    // 懒汉式单例模式实现登录弹窗
    const Modal = (function () {
      let modal = null;

      return function () {
        if (!modal) {
          modal = document.createElement('div');
          modal.innerHTML = '我是一个全局唯一的Modal';
          modal.id = 'modal';
          modal.style.display = 'none';
          document.body.appendChild(modal);
        }
        return modal;
      };
    })();

    // 点击才加载弹窗
    document.getElementById('open').addEventListener('click', function () {
      const modal = new Modal();
      modal.style.display = 'block';
    });

    document.getElementById('close').addEventListener('click', function () {
      const modal = new Modal();
      modal.style.display = 'none';
    });

    document.getElementById('open2').addEventListener('click', function () {
      const modal = new Modal();
      modal.style.display = 'block';
    });
  </script>
</body>
</html>

成品展示

四、实现原理详解

1. IIFE（立即执行函数）与闭包

javascript 复制代码

const Modal = (function () {
  let modal = null;

  return function () {
    if (!modal) {
      // 创建弹窗
    }
    return modal;
  };
})();

使用了 IIFE（Immediately Invoked Function Expression），即立即执行函数。
内部定义了一个 modal 变量，这个变量不会被外部访问，但会被内部函数引用，形成一个闭包（Closure）。
每次调用 new Modal() 时，实际上调用的是返回的那个函数（不是构造函数，但模拟了构造函数的行为）。

闭包的作用 ：保留 modal 的状态，确保它只被创建一次。

2. 单例模式（Singleton）的实现

通过判断 if (!modal)，确保只创建一次 DOM。
后续调用 new Modal() 都返回同一个 modal 实例。
这就是典型的懒汉式单例模式 ：只有在需要的时候才创建实例，且只创建一次。

3. 懒加载（Lazy Load）与按需加载

弹窗 DOM 不会在页面加载时创建，而是在用户点击"打开弹窗"按钮时才生成。
这种做法避免了不必要的资源浪费，提升了页面加载速度。
同时也体现了对用户的尊重：不想登录的用户，可以安心阅读文章，不会被打扰。

4. DOM 操作与事件绑定

弹窗是一个 div 元素，设置了居中样式，z-index 保证它在最上层。
通过 display: none / block 控制弹窗的显示与隐藏。
三个按钮分别绑定事件：
- #open：显示弹窗
- #close：隐藏弹窗
- #open2：再次显示弹窗（验证单例）

即使多次点击按钮，也不会重复创建 DOM 元素，体现了单例模式的精髓。

五、技术亮点总结

特性	实现方式	作用与优势
单例模式	闭包 + IIFE + 判断是否存在实例	保证只创建一个弹窗，节省资源
懒加载	弹窗在点击时才创建	提升页面加载速度，优化用户体验
闭包	保留 `modal` 的状态	避免全局变量污染，增强封装性
按需加载	只在用户点击"登录"时才加载弹窗	尊重用户选择，避免打扰只想阅读的人
DOM 操作	动态创建、插入、显示、隐藏元素	实现弹窗功能的基础
事件绑定	使用 `addEventListener` 监听按钮事件	实现交互控制，响应用户操作

七、技术之外：写有温度的代码

这段代码虽然简单，但它背后体现的是一种对用户的理解 和对技术初心的坚持。

一个弹窗，不只是功能的实现，更是产品理念的体现。
优秀的技术平台，应该以内容为先，而不是用技术绑架用户。
作为开发者，我们不仅要写出高效的代码，更要写出有良知、有温度的代码。

技术的初心，是服务人，而不是控制人。