地图在 app 中使用还是很广泛的，常见的应用常见有：

1、获取自己的位置，规划路线。

2、使用标记点进行标记多个位置。

3、绘制多边形，使用围墙标记位置等等。

此篇文章就以高德地图为例，以上述三个常见需求为例，教大家如何在 uniapp 中添加地图。

作为一个不管闲事的前端姑娘，我就忽略掉那些繁琐的账号申请，假设需要的信息问项目经理都要来了，如果你没有现成的信息，还需要申请，请查看：

lbs.amap.com/api/javascr…

去高德地图注册账号，根据官网指示获取 key。然后就正式开始前端 uniapp + 高德地图之旅啦！

一、地图配置

在使用地图之前需要配置一下你的地图账号信息，找到项目中的 manifest.json 文件，打开 web 配置，如图：

此处是针对 h5 端，如果我们要打包 安卓和 IOS app 需要配置对应的key信息，如图：

如果这些信息没有人给你提供，就需要自己去官网注册账号实名认证获取。

二、地图使用

2.1、使用标记点进行标记多个位置，具体效果图如下：

<template>

 <view class="map-con">

  <map style="width: 100%; height: 300px;" 

   :latitude="latitude" 

   :longitude="longitude" 

   :markers="covers"

   :scale="12">

  </map>

 </view>

</template>



<script>

 export default {

  data() {

   return {

    longitude: '116.473115',

    latitude: '39.993207',

    covers: [{

     id: 1,

     longitude: "116.474595",

     latitude: "40.001321",

     iconPath: '/static/images/point.png',

    },

    {

     id: 1,

     longitude: "116.274595",

     latitude: "40.101321",

     iconPath: '/static/images/point.png',

    },

    {

     id: 1,

     longitude: "116.374595",

     latitude: "40.101321",

     iconPath: '/static/images/point.png',

    },

    {

     id: 1,

     longitude: "116.374595",

     latitude: "40.011321",

     width: 44,

     height: 50,

     iconPath:'/static/images/point.png',

    }

   ]

  }

 }

}

</script>

注意：

看着代码很简单，运行在 h5 之后一切正常，但是运行在安卓模拟器的时候，发现自定义图标没有起作用，显示的是默认标记点。

iconpath 的路径不是相对路径，没有 ../../ 这些，直接根据官网提示写图片路径，虽然模拟器不显示但是真机是正常的。

2.2、绘制多边形，使用围墙标记位置等等。

<template>

  <view class="map-con">

    <map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" :scale="11"

      :polygons="polygon" :markers="covers">

    </map>

  </view>

</template>



<script>

  export default {

    data() {

      return {

        longitude: '116.304595',

        latitude: '40.053207',

        polygon: [{

          fillColor: '#f00',

          strokeColor: '#0f0',

          strokeWidth: 3,

          points: [{

              latitude: '40.001321',

              longitude: '116.304595'

            },

            {

              latitude: '40.101321',

              longitude: '116.274595'

            },

            {

              latitude: '40.011321',

              longitude: '116.374595'

            }

          ]

        }],

        covers: [{

          id: 1,

          width: 30,

          height: 33,

          longitude: "116.314595",

          latitude: "40.021321",

          iconPath: '/static/images/point.png',

        }, ]

      }

    }

  }

</script>

更多样式配置我们去参考官网，官网使用文档写的很细致，地址为：

uniapp 官网：uniapp.dcloud.net.cn/component/m…

三、易错点

1、地图已经显示了，误以为地图未展示

左下角有高德地图标识，就说明地图已经正常显示了，此时可以使用鼠标进行缩放，或设置地图的缩放比例或者修改下地图中心点的经纬度。

2、标记点自定义图标不显示

marker 中的 iconPath 设置标记点的图标路径，可以使用相对路径、base64 等，但是在 h5 查看正常，app 打包之后就不能正常显示了，务必参考官网。

3、uni.getLocation 无法触发

在调试模式中，调用 uni.getLocation 无法触发，其中的 success fail complete 都无法执行，不调用的原因是必须在 https 环境下，所以先保证是在 https 环境下。****

四、有可用插件吗？

uniapp 插件：ext.dcloud.net.cn/search?q=ma…

搜索地图插件的时候，插件挺多的，有免费的也有付费的，即使使用插件也是需要需要注册第三方地图账号的。

我个人认为 uniapp 已经将第三方地图封装过了，使用挺便捷的，具体是否使用插件就根据项目实际情况定。

今天想和大家分享的一个技术是 SSE 流式传输 。如标题所言，通过 SSE 流式传输的方式可以让我们不再通过轮询的方式获取服务端返回的结果，进而提升前端页面的性能。

对于需要轮询的业务场景来说，采用 SSE 确实是一个更好的技术方案。

接下来，我将从 SSE 的概念、与 Websocket 对比、SSE 应用场景多个方面介绍 SSE 流式传输，感兴趣的同学一起来了解下吧！

什么是 SSE 流式传输

SSE 全称为 Server-sent events , 是一种基于 HTTP 协议的通信技术，允许服务器主动向客户端（通常是Web浏览器）发送更新。

它是 HTML5 标准的一部分，设计初衷是用来建立一个单向的服务器到客户端连接，使得服务器可以实时地向客户端发送数据。

这种服务端实时向客户端发送数据的传输方式，其实就是流式传输。

我们在与 ChatGPT 交互时，可以发现 ChatGPT 的响应总是间断完成。细扒 ChatGPT 的网络传输模式，可以发现，用的也是流式传输。

SSE 流式传输的好处

在 SSE 技术出现之前，我们习惯把需要等待服务端返回的过程称为长轮询。

长轮询的实现其实也是借助 http 请求来完成，一个完整的长轮询过程如下图所示：

从图中可以发现，长轮询最大的弊端是当服务端响应请求之前，客户端发送的所有请求都不会被受理。并且服务端发送响应的前提是客户端发起请求。

前后端通信过程中，我们常采用 ajax 、axios 来异步获取结果，这个过程，其实也是长轮询的过程。

而同为采用 http 协议通信方式的 SSE 流式传输，相比于长轮询模式来说，优势在于可以在不需要客户端介入的情况下，多次向客户端发送响应，直至客户端关闭连接。

这对于需要服务端实时推送内容至客户端的场景可方便太多了！

SSE 技术原理

1. 参数设置

前文说到，SSE 本质是一个基于 http 协议的通信技术。

因此想要使用 SSE 技术构建需要服务器实时推送信息到客户端的连接，只需要将传统的 http 响应头的 contentType 设置为 text/event-stream 。

并且为了保证客户端展示的是最新数据，需要将 Cache-Control 设置为 no-cache 。

在此基础上，SSE 本质是一个 TCP 连接，因此为了保证 SSE 的持续开启，需要将 Connection 设置为 keep-alive 。

Content-Type: text/event-stream

Cache-Control: no-cache

Connection: keep-alive

完成了上述响应头的设置后，我们可以编写一个基于 SSE 流式传输的简单 Demo 。

2. SSE Demo

服务端代码：

const express = require('express');

const app = express();

const PORT = 3000;



app.use(express.static('public'));



app.get('/events', function(req, res) {

    res.setHeader('Content-Type', 'text/event-stream');

    res.setHeader('Cache-Control', 'no-cache');

    res.setHeader('Connection', 'keep-alive');



    let startTime = Date.now();



    const sendEvent = () => {

        // 检查是否已经发送了10秒

        if (Date.now() - startTime >= 10000) {

            res.write('event: close\ndata: {}\n\n'); // 发送一个特殊事件通知客户端关闭

            res.end(); // 关闭连接

            return;

        }



        const data = { message: 'Hello World', timestamp: new Date() };

        res.write(`data: ${JSON.stringify(data)}\n\n`);



        // 每隔2秒发送一次消息

        setTimeout(sendEvent, 2000);

    };



    sendEvent();

});



app.listen(PORT, () => {

    console.log(`Server running on http://localhost:${PORT}`);

});

客户端代码：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <title>SSE Example</title>

</head>



<body>

    <h1>Server-Sent Events Example</h1>

    <div id="messages"></div>



    <script>

        const evtSource = new EventSource('/events');

        const messages = document.getElementById('messages');



        evtSource.onmessage = function(event) {

            const newElement = document.createElement("p");

            const eventObject = JSON.parse(event.data);

            newElement.textContent = "Message: " + eventObject.message + " at " + eventObject.timestamp;

            messages.appendChild(newElement);

        };

    </script>

</body>

</html>

当我们在浏览器中访问运行在 localhost: 3000 端口的客户端页面时，页面将会以 流式模式 逐步渲染服务端返回的结果：

需要注意的是，为了保证使用 SSE 通信协议传输的数据能被客户端正确的接收，服务端和客户端在发送数据和接收数据应该遵循以下规范：

服务端基本响应格式

SSE 响应主要由一系列以两个换行符分隔的事件组成。每个事件可以包含以下字段：

data：事件的数据。如果数据跨越多行，每行都应该以data:开始。

id：事件的唯一标识符。客户端可以使用这个ID来恢复事件流。

event：自定义事件类型。客户端可以根据不同的事件类型来执行不同的操作。

retry：建议的重新连接时间（毫秒）。如果连接中断，客户端将等待这段时间后尝试重新连接。

字段之间用单个换行符分隔，而事件之间用两个换行符分隔。

客户端处理格式

客户端使用 EventSource 接口监听 SSE 消息：

const evtSource = new EventSource('path/to/sse');

evtSource.onmessage = function(event) {

    console.log(event.data); // 处理收到的数据

};

SSE 应用场景

SSE 作为基于 http 协议由服务端向客户端单向推送消息的通信技术，对于需要服务端主动推送消息的场景来说，是非常适合的：

SSE 兼容性

可以发现，除了 IE 和低版本的主流浏览器，目前市面上绝大多数浏览器都支持 SSE 通信。

SSE 与 WebSocket 对比

看完 SSE 的使用方式后，细心的同学应该发现了：

SSE 的通信方式和 WebSocket 很像啊，而且 WebSocket 还支持双向通信，为什么不直接使用 WebSocket ？

下表展示了两者之间的对比：

可以发现，SSE 与 WebSocket 各有优缺点，对于需要客户端与服务端高频交互的场景，WebSocket 确实更适合；但对于只需要服务端单向数据传输的场景，SSE 确实能耗更低，且不需要客户端感知。

参考文档

developer.mozilla.org/zh-CN/docs/…

网页也能像 QQ 一样发出右下角消息？轻松实现桌面通知！

大家好，我是蒜鸭。今天我们来聊聊如何让网页像 QQ 那样在右下角弹出消息通知。这个功能不仅能提升用户体验，还能增加网站的互动性。让我们一起探索如何在网页中实现这个酷炫的功能吧！

1. 为什么需要网页通知？

在当今信息爆炸的时代，获取用户注意力变得越来越困难。传统的网页通知方式，如弹窗或页面内提示，往往会打断用户的浏览体验。而类似 QQ 那样的右下角消息通知，既能及时传递信息，又不会过分干扰用户，可以说是一种相当优雅的解决方案。

实现这种通知功能，我们有两种主要方式：使用 Web Notifications API 或自定义 CSS+JavaScript 实现。接下来，我们将详细探讨这两种方法的实现过程、优缺点以及适用场景。

2. 使用 Web Notifications API

2.1 Web Notifications API 简介

Web Notifications API 是现代浏览器提供的一个强大功能，它允许网页向用户发送通知，即使在用户没有打开网页的情况下也能工作。这个 API 的使用非常简单，但功能却十分强大。

2.2 基本实现步骤

让我们来看看具体的代码实现：

// 检查浏览器是否支持通知

if ("Notification" in window) {

  // 请求用户授权

  Notification.requestPermission().then(function (permission) {

    if (permission === "granted") {

      // 创建并显示通知

      var notification = new Notification("Hello from Web!", {

        body: "这是一条来自网页的通知消息",

        icon: "path/to/icon.png"

      });



      // 点击通知时的行为

      notification.onclick = function() {

        window.open("https://example.com");

      };

    }

  });

}

2.3 优点和注意事项

优点：

– 原生支持，无需额外库

– 可以在用户未浏览网页时发送通知

– 支持富文本和图标

注意事项：

– 需要用户授权，一些用户可能会拒绝

– 不同浏览器的显示样式可能略有不同

– 过度使用可能会引起用户反感

3. 自定义 CSS+JavaScript 实现

如果你想要更多的样式控制，或者希望通知始终显示在网页内，那么使用自定义的 CSS+JavaScript 方案可能更适合你。

3.1 基本思路

3.2 HTML 结构

<div id="notification-container"></div>

3.3 CSS 样式

#notification-container {

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 9999;

}



.notification {

  background-color: #f8f8f8;

  border-left: 4px solid #4CAF50;

  box-shadow: 0 2px 4px rgba(0,0,0,0.2);

  padding: 16px;

  margin-bottom: 10px;

  width: 300px;

  opacity: 0;

  transform: translateX(100%);

  transition: all 0.3s ease-in-out;

}



.notification.show {

  opacity: 1;

  transform: translateX(0);

}



.notification-title {

  font-weight: bold;

  margin-bottom: 5px;

}



.notification-body {

  font-size: 14px;

}

3.4 JavaScript 实现

function showNotification(title, message, duration = 5000) {

  const container = document.getElementById('notification-container');



  const notification = document.createElement('div');

  notification.className = 'notification';



  const titleElement = document.createElement('div');

  titleElement.className = 'notification-title';

  titleElement.textContent = title;



  const bodyElement = document.createElement('div');

  bodyElement.className = 'notification-body';

  bodyElement.textContent = message;



  notification.appendChild(titleElement);

  notification.appendChild(bodyElement);



  container.appendChild(notification);



  // 触发重绘以应用初始样式

  notification.offsetHeight;



  // 显示通知

  notification.classList.add('show');



  // 设置定时器移除通知

  setTimeout(() => {

    notification.classList.remove('show');

    setTimeout(() => {

      container.removeChild(notification);

    }, 300);

  }, duration);

}



// 使用示例

showNotification('Hello', '这是一条自定义通知消息');

3.5 优点和注意事项

优点：

– 完全可定制的外观和行为

– 不需要用户授权

– 可以轻松集成到现有的网页设计中

注意事项：

– 仅在用户浏览网页时有效

– 需要考虑移动设备的适配

– 过多的通知可能会影响页面性能

4. 高级技巧和最佳实践

4.1 通知分级

根据通知的重要性进行分级，可以使用不同的颜色或图标来区分：

function showNotification(title, message, level = 'info') {

  // ... 前面的代码相同



  let borderColor;

  switch(level) {

    case 'success':

      borderColor = '#4CAF50';

      break;

    case 'warning':

      borderColor = '#FFC107';

      break;

    case 'error':

      borderColor = '#F44336';

      break;

    default:

      borderColor = '#2196F3';

  }



  notification.style.borderLeftColor = borderColor;



  // ... 后面的代码相同

}



// 使用示例

showNotification('成功', '操作已完成', 'success');

showNotification('警告', '请注意...', 'warning');

showNotification('错误', '出现问题', 'error');

4.2 通知队列

为了避免同时显示过多通知，我们可以实现一个简单的通知队列：

const notificationQueue = [];

let isShowingNotification = false;



function queueNotification(title, message, duration = 5000) {

  notificationQueue.push({ title, message, duration });

  if (!isShowingNotification) {

    showNextNotification();

  }

}



function showNextNotification() {

  if (notificationQueue.length === 0) {

    isShowingNotification = false;

    return;

  }



  isShowingNotification = true;

  const { title, message, duration } = notificationQueue.shift();

  showNotification(title, message, duration);



  setTimeout(showNextNotification, duration + 300);

}



// 使用示例

queueNotification('通知1', '这是第一条通知');

queueNotification('通知2', '这是第二条通知');

queueNotification('通知3', '这是第三条通知');

4.3 响应式设计

为了确保通知在各种设备上都能正常显示，我们需要考虑响应式设计：

@media (max-width: 768px) {

  #notification-container {

    left: 20px;

    right: 20px;

    bottom: 20px;

  }



  .notification {

    width: auto;

  }

}

4.4 无障碍性考虑

为了提高通知的可访问性，我们可以添加 ARIA 属性和键盘操作支持：

function showNotification(title, message, duration = 5000) {

  // ... 前面的代码相同



  notification.setAttribute('role', 'alert');

  notification.setAttribute('aria-live', 'polite');



  const closeButton = document.createElement('button');

  closeButton.textContent = '×';

  closeButton.className = 'notification-close';

  closeButton.setAttribute('aria-label', '关闭通知');



  closeButton.addEventListener('click', () => {

    notification.classList.remove('show');

    setTimeout(() => {

      container.removeChild(notification);

    }, 300);

  });



  notification.appendChild(closeButton);



  // ... 后面的代码相同

}

5. 性能优化与注意事项

在实现网页通知功能时，我们还需要注意以下几点：

网页通知是一个强大的功能，能够显著提升用户体验和网站的互动性。无论是使用 Web Notifications API 还是自定义的 CSS+JavaScript 方案，都能实现类似 QQ 那样的右下角消息通知。选择哪种方式取决于你的具体需求和目标用户群。通过合理使用通知功能，你可以让你的网站变得更加生动和用户友好。

今天在网上逛的时候看到一个问题，没想到大家讨论的很热烈，就是标题中这个：

localhost和127.0.0.1的区别是什么？

前端同学本地调试的时候，应该没少和localhost打交道吧，只需要执行 npm run 就能在浏览器中打开你的页面窗口，地址栏显示的就是这个 http://localhost:xxx/index.html

可能大家只是用，也没有去想过这个问题。

联想到我之前合作过的一些开发同学对它们俩的区别也没什么概念，所以我觉得有必要普及下。

localhost是什么呢？

localhost是一个域名，和大家上网使用的域名没有什么本质区别，就是方便记忆。

只是这个localhost的有效范围只有本机，看名字也能知道：local就是本地的意思。

张三和李四都可以在各自的机器上使用localhost，但获取到的也是各自的页面内容，不会相互打架。

从域名到程序

要想真正的认清楚localhost，我们还得从用户是如何通过域名访问到程序说起。

以访问百度为例。

1、当我们在浏览器输入 baidu.com 之后，浏览器首先去DNS中查询 baidu.com 的IP地址。

为什么需要IP地址呢？打个比方，有个人要寄快递到你的公司，快递单上会填写：公司的通讯地址、公司名称、收件人等信息，实际运输时快递会根据通信地址进行层层转发，最终送到收件人的手中。网络通讯也是类似的，其中域名就像公司名称，IP地址就像通信地址，在网络的世界中只有通过IP地址才能找到对应的程序。

DNS就像一个公司黄页，其中记录着每个域名对应的IP地址，当然也有一些域名可能没做登记，就找不到对应的IP地址，还有一些域名可能会对应多个IP地址，DNS会按照规则自动返回一个。我们购买了域名之后，一般域名服务商会提供一个域名解析的功能，就是把域名和对应的IP地址登记到DNS中。

这里的IP地址从哪里获取呢？每台上网的电脑都会有1个IP地址，但是个人电脑的IP地址一般是不行的，个人电脑的IP地址只适合内网定位，就像你公司内部的第几栋第几层，公司内部人明白，但是直接发给别人，别人是找不到你的。如果你要对外部提供服务，比如百度这种，你就得有公网的IP地址，这个IP地址一般由网络服务运营商提供，比如你们公司使用联通上网，那就可以让联通给你分配一个公网IP地址，绑定到你们公司的网关服务器上，网关服务器就像电话总机，公司内部的所有网络通信都要通过它，然后再在网关上设置转发规则，将网络请求转发到提供网络服务的机器上。

2、有了IP地址之后，浏览器就会向这个IP地址发起请求，通过操作系统打包成IP请求包，然后发送到网络上。网络传输有一套完整的路由协议，它会根据你提供的IP地址，经过路由器的层层转发，最终抵达绑定该IP的计算机。

3、计算机上可能部署了多个网络应用程序，这个请求应该发给哪个程序呢？这里有一个端口的概念，每个网络应用程序启动的时候可以绑定一个或多个端口，不同的网络应用程序绑定的端口不能重复，再次绑定时会提示端口被占用。通过在请求中指定端口，就可以将消息发送到正确的网络处理程序。

但是我们访问百度的时候没有输入端口啊？这是因为默认不输入就使用80和443端口，http使用80，https使用443。我们在启动网络程序的时候一定要绑定一个端口的，当然有些框架会自动选择一个计算机上未使用的端口。

localhost和127.0.0.1的区别是什么？

有了上边的知识储备，我们就可以很轻松的搞懂这个问题了。

localhost是域名，上文已经说过了。

127.0.0.1 呢？是IP地址，当前机器的本地IP地址，且只能在本机使用，你的计算机不联网也可以用这个IP地址，就是为了方便开发测试网络程序的。我们调试时启动的程序就是绑定到这个IP地址的。

这里简单说下，我们经常看到的IP地址一般都是类似 X.X.X.X 的格式，用"."分成四段。其实它是一个32位的二进制数，分成四段后，每一段是8位，然后每一段再转换为10进制的数进行显示。

那localhost是怎么解析到127.0.0.1的呢？经过DNS了吗？没有。每台计算机都可以使用localhost和127.0.0.1，这没办法让DNS来做解析。

那就让每台计算机自己解决了。每台计算机上都有一个host文件，其中写死了一些DNS解析规则，就包括 localhost 到 127.0.0.1 的解析规则，这是一个约定俗成的规则。

如果你不想用localhost，那也可以，随便起个名字，比如 wodehost，也解析到 127.0.0.1 就行了。

甚至你想使用 baidu.com 也完全可以，只是只能自己自嗨，对别人完全没有影响。

域名的等级划分

localhost不太像我们平常使用的域名，比如 http://www.juejin.cn 、baidu.com、csdn.net, 这里边的 www、cn、com、net都是什么意思？localhost为什么不需要？

域名其实是分等级的，按照等级可以划分为顶级域名、二级域名和三级域名...

顶级域名（TLD）：顶级域名是域名系统中最高级别的域名。它位于域名的最右边，通常由几个字母组成。顶级域名分为两种类型：通用顶级域名和国家顶级域名。常见的通用顶级域名包括表示工商企业的.com、表示网络提供商的.net、表示非盈利组织的.org等，而国家顶级域名则代表特定的国家或地区，如.cn代表中国、.uk代表英国等。

二级域名（SLD）：二级域名是在顶级域名之下的一级域名。它是由注册人自行选择和注册的，可以是个性化的、易于记忆的名称。例如，juejin.cn 就是二级域名。我们平常能够申请到的也是这种。目前来说申请 xxx.com、xxx.net、xxx.cn等等域名，其实大家不太关心其顶级域名com\net\cn代表的含义，看着简短好记是主要诉求。

三级域名（3LD）：三级域名是在二级域名之下的一级域名。它通常用于指向特定的服务器或子网。例如，在blog.example.com中，blog就是三级域名。www是最常见的三级域名，用于代表网站的主页或主站点，不过这只是某种流行习惯，目前很多网站都推荐直接使用二级域名访问了。

域名级别还可以进一步细分，大家可以看看企业微信开放平台这个域名：developer.work.weixin.qq.com，com代表商业，qq代表腾讯，weixin代表微信，work代表企业微信，developer代表开发者。这种逐层递进的方式有利于域名的分配管理。

按照上边的等级定义，我们可以说localhost是一个顶级域名，只不过它是保留的顶级域，其唯一目的是用于访问当前计算机。

多网站共用一个IP和端口

上边我们说不同的网络程序不能使用相同的端口，其实是有办法突破的。

以前个人博客比较火的时候，大家都喜欢买个虚拟主机，然后部署个开源的博客程序，抒发一下自己的感情。为了挣钱，虚拟主机的服务商会在一台计算机上分配N多个虚拟主机，大家使用各自的域名和默认的80端口进行访问，也都相安无事。这是怎么做到的呢？

如果你有使用Nginx、Apache或者IIS等Web服务器的相关经验，你可能会接触到主机头这个概念。主机头其实就是一个域名，通过设置主机头，我们的程序就可以共用1个网络端口。

首先在Nginx等Web程序中部署网站时，我们会进行一些配置，此时在主机头中写入网站要使用的域名。

然后Nginx等Web服务器启动的时候，会把80端口占为己有。

然后当某个网站的请求到达Nginx的80端口时，它会根据请求中携带的域名找到配置了对应主机头的网络程序。

然后再转发到这个网络程序，如果网络程序还没有启动，Nginx会把它拉起来。

私有IP地址

除了127.0.0.1，其实还有很多私有IP地址，比如常见的 192.168.x.x。这些私有IP地址大部分都是为了在局域网内使用而预留的，因为给每台计算机都分配一个独立的IP不太够用，所以只要局域网内不冲突，大家就可劲的用吧。你公司可以用 192.168.1.1，我公司也可以用192.168.1.1，但是如果你要访问我，就得通过公网IP进行转发。

大家常用的IPv4私有IP地址段分为三类：

A类：从10.0.0.0至10.255.255.255

B类：从172.16.0.0至172.31.255.255

C类：从192.168.0.0至192.168.255.255。

这些私有IP地址仅供局域网内部使用，不能在公网上使用。

--

除了上述三个私有的IPv4地址段外，还有一些保留的IPv4地址段：

用于本地回环测试的127.0.0.0至127.255.255.255地址段，其中就包括题目中的127.0.0.1，如果你喜欢也可以给自己分配一个127.0.0.2的IP地址，效果和127.0.0.1一样。

用于局域网内部的169.254.0.0至169.254.255.255地址段，这个很少接触到，如果你的电脑连局域网都上不去，可能会看到这个IP地址，它是临时分配的一个局域网地址。

这些地址段也都不能在公网上使用。

--

近年来，还有一个现象，就是你家里或者公司里上网时，光猫或者路由器对外的IPv4地址也不是公网IP了，这时候获得的可能是一个类似 100.64.x.x 的地址，这是因为随着宽带的普及，运营商手里的公网IP也不够了，所以运营商又加了一层局域网，而100.64.0.0 这个网段是专门分给运营商做局域网用的。如果你使用阿里云等公有云，一些云产品的IP地址也可能是这个，这是为了将客户的私有网段和公有云厂商的私有网段进行有效的区分。

--

其实还有一些不常见的专用IPv4地址段，完整的IP地址段定义可以看这里：http://www.iana.org/assignments…

IPv6

你可能也听说过IPv6，因为IPv4可分配的地址太少了，不够用，使用IPv6甚至可以为地球上的每一粒沙子分配一个IP。只是喊了很多年，大家还是喜欢用IPv4，这里边原因很多，这里就不多谈了。

IPv6地址类似：XXXX:XXXX:XXXX:XXXX:XXXX:XXXX:XXXX:XXXX

它是128位的，用":"分成8段，每个X是一个16进制数（取值范围：0-F），IPv6地址空间相对于IPv4地址有了极大的扩充。比如：2001:0db8:3c4d:0015:0000:0000:1a2f:1a2b 就是一个有效的IPv6地址。

关于IPv6这里就不多说了，有兴趣的可以再去研究下。

关注萤火架构，加速技术提升！

是的，最近又踩坑了！

事情是这样的，我们测试小姐姐在一个全局搜索框里输入了一串特殊字符“%%%”，然后进行搜索，结果报错了。而输入常规字符，均可以正常搜索。

一排查，发现特殊字符“%%%”并未成功传给后端。

我们的这个全局搜索功能是需要跳转页面才能查看到搜索结果的。所以，搜索条件是作为参数拼接在页面url上的。

正常的传参：

当输入的是特殊字符“%、#、&”时，参数丢失

也就是说，当路由请求参数带有浏览器url中的特殊含义字符时，参数会被截断，无法正常获取参数。

那么怎么解决这个问题呢？

方案一：encodeURIComponent/decodeURIComponent

拼接参数时，利用encodeURIComponent()进行编码，接收参数时，利用decodeURIComponent()进行解码。

// 编码

this.$router.push({path: `/crm/global-search/search-result?type=${selectValue}&text=${encodeURIComponent(searchValue)}`});



// 解码

 const text = decodeURIComponent(this.$route.query.text)

此方法对绝大多数特殊字符都适用，但是唯独输入“%”进行搜索时不行，报错如下。

所以在编码之前，还需进行一下如下转换：

this.$router.push({path: `/crm/global-search/search-result?type=${selectValue}&text=${encodeURIComponent(encodeSpecialChar(searchValue))}`});





/**

 * @param {*} char 字符串

 * @returns

 */

export const encodeSpecialChar = (char) => {

  // #、&可以不用参与处理

  const encodeArr = [{

    code: '%',

    encode: '%25'

  },{

    code: '#',

    encode: '%23'

  }, {

    code: '&',

    encode: '%26'

  },]

  return char.replace(/[%?#&=]/g, ($) => {

    for (const k of encodeArr) {

      if (k.code === $) {

        return k.encode

      }

    }

  })

}

方案二： qs.stringify()

默认情况下，qs.stringify()方法会使用encodeURIComponent方法对特殊字符进行编码，以保证URL的合法性。

const qs = require('qs');



const searchObj = {

  type: selectValue,

  text: searchValue

};

this.$router.push({path: `/crm/global-search/search-result?${qs.stringify(searchObj)}`});

使用了qs.stringify()方法，就无需使用encodeSpecialChar方法进行转换了。

在前端开发中，代码的重复度是一个常见的问题。重复的代码不仅增加了代码的维护成本，还可能导致程序的低效运行。为了解决这个问题，有许多工具和技术被用来检测和消除代码重复。其中一个被广泛使用的工具就是jscpd。

jscpd简介

jscpd是一款开源的JavaScript的工具库，用于检测代码重复的情况，针对复制粘贴的代码检测很有效果。它可以通过扫描源代码文件，分析其中的代码片段，并比较它们之间的相似性来检测代码的重复度。jscpd支持各种前端框架和语言，包括HTML、CSS和JavaScript等150种的源码文件格式。无论是原生的JavaScript、CSS、HTML代码，还是使用typescript、scss、vue、react等代码，都能很好的检测出项目中的重复代码。

开源仓库地址：github.com/kucherenko/jscpd/tree/master

如何使用

使用jscpd进行代码重复度检测非常简单。我们需要安装jscpd。可以通过npm或yarn来安装jscpd。

npm install -g jscpd

yarn global add jscpd

安装完成后，我们可以在终端运行jscpd命令，指定要检测的代码目录或文件。例如，我们可以输入以下命令来检测当前目录下的所有JavaScript文件：

jscpd .

指定目录检测：

jscpd /path/to/code

在命令行执行成功后的效果如下图所示：

简要说明一下对应图中的字段内容：

• Clone found (javascript)：
  显示找到的重复代码块，这里是javascript文件。并且会显示重复代码在文件中具体的行数，便于查找。


• Format：文件格式，这里是 javascript，还可以是 scss、markup 等。


• Files analyzed：已分析的文件数量，统计被检测中的文件数量。


• Total lines：所有文件的总行数。


• Total tokens：所有的token数量，一行代码一般包含几个到几十个不等的token数量。


• Clones found：找到的重复块数量。


• Duplicated lines：重复的代码行数和占比。


• Duplicated tokens：重复的token数量和占比。


• Detection time：检测耗时。

工程配置

以上示例是比较简单直接检测单个文件或文件夹。当下主流的前端项目大多都是基于脚手架生成或包含相关前端工程化的文件，由于很多文件是辅助工具如依赖包、构建脚本、文档、配置文件等，这类文件都不需要检测，需要排除。这种情况下的工程一般使用配置文件的方式，通过选项配置规范 jscpd 的使用。

jscpd 的配置选项可以通过以下两种方式创建，增加的内容都一致无需区分对应的前端框架。

在项目根目录下创建配置文件 .jscpd.json，然后在该文件中增加具体的配置选项：

    {

      "threshold": 0,

      "reporters": ["html", "console", "badge"],

      "ignore": ["**/__snapshots__/**"],

      "absolute": true

    }

也可直接在 package.json 文件中添加jscpd：

    {

      ...

      "jscpd": {

        "threshold": 0.1,

        "reporters": ["html", "console", "badge"],

        "ignore": ["**/__snapshots__/**"],

        "absolute": true,

        "gitignore": true

      }

      ...

    }

简要介绍一下上述配置字段含义：

• threshold：表示重复度的阈值，超过这个值，就会输出错误报警。如阈值设为 10，当重复度为18.1%时，会提示以下错误❌，但代码的检测会正常完成。

ERROR: jscpd found too many duplicates (18.1%) over threshold (10%)

• reporters：表示生成结果检测报告的方式，一般有以下几种：
  
  
  
  • console：控制台打印输出
  
  
  • consoleFull：控制台完整打印重复代码块
  
  
  • json：输出 json 格式的报告
  
  
  • xml：输出 xml 格式的报告
  
  
  • csv：输出 csv 格式的报告
  
  
  • markdown：输出带有 markdown 格式的报告
  
  
  • html：生成html报告到html文件夹
  
  
  • verbose：输出大量调试信息到控制台
  
  
  
  


• ignore：检测忽略的文件或文件目录，过滤一些非业务代码，如依赖包、文档或静态文件等


• format：需要进行重复度检测的源代码格式，目前支持150多种，我们常用的如 javascript、typescript、css 等


• absolute：在检测报告中使用绝对路径

除此之外还有很多其他的配置，有兴趣的可以看源码文档中有详细的介绍。

检测报告

完成以上jscpd配置后执行以下命令即可输出对应的重复检测报告。运行完毕后，jscpd会生成一个报告，展示每个重复代码片段的信息。报告中包含了重复代码的位置、相似性百分比和代码行数等详细信息。通过这些信息，我们可以有针对性的进行代码重构。

jscpd ./src -o 'report'

项目中的业务代码通常会选择放在 ./src 目录下，所以可以直接检测该目录下的文件，如果是放在其他目录下根据实际情况调整即可。
通过命令行参数-o 'report'输出检测报告到项目根目录下的 report 文件夹中，这里的report也可以自定义其他目录名称，输出的目录结构如下所示：

生成的报告页面如下所示：

项目概览数据：

具体重复代码的位置和行数：

默认检测重复代码的行数（5行）和tokens（50）比较小，所以产生的重复代码块可能比较多，在实际使用中可以针对检测范围进行设置，如下设置参数供参考：

• 最小tokens：--min-tokens，简写 -k


• 最小行数：--min-lines，简写 -l


• 最大行数：--max-lines，简写 -x

jscpd ./src --min-tokens 200 --min-lines 20 -o 'report'

为了更便捷的使用此命令，可将这段命令集成到 package.json 中的 scripts 中，后续只需执行 npm run jscpd 即可执行检测。如下所示：

"scripts": {

  ...

  "jscpd": "jscpd ./src --min-tokens 200 --min-lines 20 -o 'report'",

  ...

}

忽略代码块

上面所提到的ignore可以忽略某个文件或文件夹，还有一种忽略方式是忽略文件中的某一块代码。由于一些重复代码在实际情况中是必要的，可以使用代码注释标识的方式忽略检测，在代码的首尾位置添加注释，jscpd:ignore-start 和 jscpd:ignore-end 包裹代码即可。

在js代码中使用方式：

/* jscpd:ignore-start */

import lodash from 'lodash';

import React from 'react';

import {User} from './models';

import {UserService} from './services';

/* jscpd:ignore-end */

在CSS和各种预处理中与js中的用法一致：

/* jscpd:ignore-start */

.style {

  padding: 40px 0;

  font-size: 26px;

  font-weight: 400;

  color: #464646;

  line-height: 26px;

}

/* jscpd:ignore-end */

在html代码中使用方式：

<!--

// jscpd:ignore-start

-->

<meta data-react-helmet="true" name="theme-color" content="#cb3837"/>

<link data-react-helmet="true" rel="stylesheet" href="https://static.npmjs.com/103af5b8a2b3c971cba419755f3a67bc.css"/>

<link data-react-helmet="true" rel="apple-touch-icon" sizes="120x120" href="https://static.npmjs.com/58a19602036db1daee0d7863c94673a4.png"/>

<link data-react-helmet="true" rel="icon" type="image/png" href="https://static.npmjs.com/b0f1a8318363185cc2ea6a40ac23eeb2.png" sizes="32x32"/>

<!--

// jscpd:ignore-end

-->

总结

jscpd是一款强大的前端本地代码重复度检测工具。它可以帮助开发者快速发现代码重复问题，简单的配置即可输出直观的代码重复数据，通过解决重复的代码提高代码的质量和可维护性。

使用jscpd我们可以有效地优化前端开发过程，提高代码的效率和性能。希望本文能够对你了解基于jscpd的前端本地代码重复度检测有所帮助。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

前言

换肤功能是一项普遍的需求，尤其是在夜晚，用户更倾向于使用暗黑模式。在我负责的公司项目中，每个项目都有换肤功能的需求。

过去，我主要使用 SCSS 变量，并利用其提供的函数，如 @each、map-get来实现换肤功能。但因其使用成本高，只能适用于SCSS项目，于是后来我改用 CSS 变量来实现换肤。这样无论是基于 LESS 的 React 项目，还是基于 SCSS 的 Vue 项目，都能应用换肤功能。并且使用时只需调用var函数，降低了使用成本。

Demo地址：github.com/cwjbjy/vite…

1. 一键换肤

1. 前置知识

CSS变量：声明自定义CSS属性，它包含的值可以在整个文档中重复使用。属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值

--fontColor:'#fff'

Var函数：用于使用CSS变量。第一个参数为CSS变量名称，第二个可选参数作为默认值

color: var(--fontColor);

CSS属性选择器：匹配具有特定属性或属性值的元素。例如[data-theme='black']，将选择所有 data-theme 属性值为 'black' 的元素

2. 定义主题色

1. 新建src/assets/theme/theme-default.css

这里定义字体颜色与布局的背景色，更多CSS变量可根据项目的需求来定义

[data-theme='default'] {

  /* 字体 */

  --font-primary: #fff;

  --font-highlight: #434a50;

  /* 布局 */

  --background-header: #2f3542;

  --background-aside: #545c64;

  --background-main: #0678be;

}

2. 新建src/assets/theme/theme-black.css

再定义一套暗黑主题色

[data-theme='black'] {

  /* 字体 */

  --font-primary: #fff;

  --font-highlight: #434a50;

  /* 布局 */

  --background-header: #303030;

  --background-aside: #303030;

  --background-main: #393939;

}

3. 新建src/assets/theme/index.css

在index.css文件中导出全部主题色

@import './theme-default.css'; 

@import './theme-black.css';

4. 引入全局样式

在入口文件引入样式，比如我这里是main.tsx

import '@/assets/styles/theme/index.css';

3. 在html标签上增加自定义属性

修改index.html，在html标签上增加自定义属性data-theme

<html lang="en" data-theme="default"></html>

这里使用data-theme是为了被CSS属性选择器[data-theme='default']选中，也可更换为其他自定义属性，只需与CSS属性选择器对应上即可。

4. 修改CSS主题色

关键点：监听change事件，使用document.documentElement.setAttribute动态修改data-theme属性，然后CSS属性选择器将自动选择对应的css变量

<template>

  <div>

    <select name="pets" @change="handleChange">

      <option value="default">默认色</option>

      <option value="black">黑色</option>

    </select>

    <div>登录页面</div>

  </div>

</template>



<script setup lang="ts">

const handleChange = (e: Event) => {

  window.document.documentElement.setAttribute('data-theme', (e.target as HTMLSelectElement).value);

};

</script>



<style lang="scss">

body {

  color: var(--font-primary);

  background-color: var(--background-main);

}

</style>

效果图，默认色：

效果图，暗黑色：

5. 修改JS主题色

切换主题色，除了需要修改css样式，有时也需在js文件中修改样式，例如修改echarts的配置文件，来改变柱状图、饼图等的颜色。

1. 新建src/config/theme.js

定义图像的颜色，这里定义字体的颜色，默认情况下字体为黑色，暗黑模式下，字体为白色

const themeColor = {

  default: {

    font: '#333',

  },

  black: {

    font: '#fff',

  },

};



export default themeColor;

2. 修改vue文件

关键点：

完整的vue文件：

<template>

  <div>

    <select name="pets" @change="handleChange">

      <option value="default">默认色</option>

      <option value="black">黑色</option>

    </select>

    <div>登录页面</div>

    <div ref="echartRef" class="myChart"></div>

  </div>

</template>



<script setup lang="ts">

import { onMounted, ref, watch } from 'vue';

import themeColor from '@/config/theme';

import * as echarts from 'echarts';



type ThemeTypes = 'default' | 'black';



const echartRef = ref<HTMLDivElement | null>(null);

const theme = ref<ThemeTypes>('default');

const handleChange = (e: Event) => {

  const selectTheme = (e.target as HTMLSelectElement).value as ThemeTypes;

  theme.value = selectTheme;

  window.document.documentElement.setAttribute('data-theme', selectTheme);

};



const drawGraph = () => {

  let echartsInstance = echarts.getInstanceByDom(echartRef.value!);

  if (!echartsInstance) {

    echartsInstance = echarts.init(echartRef.value);

  }

  echartsInstance.clear();

  var option = {

    color: ['#3398DB'],

    title: {

      text: '柱状图',

      left: 'center',

      textStyle: {

        color: themeColor[theme.value].font,

      },

    },

    xAxis: [

      {

        type: 'category',

        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

        axisLabel: {

          show: true,

          color: themeColor[theme.value].font,

        },

        nameTextStyle: {

          color: themeColor[theme.value].font,

        },

      },

    ],

    yAxis: [

      {

        type: 'value',

        axisLabel: {

          show: true,

          color: themeColor[theme.value].font,

        },

        nameTextStyle: {

          color: themeColor[theme.value].font,

        },

      },

    ],

    series: [

      {

        name: '直接访问',

        type: 'bar',

        barWidth: '60%',

        data: [10, 52, 200, 334, 390, 330, 220],

      },

    ],

  };



  echartsInstance.setOption(option);

};

onMounted(() => {

  drawGraph();

});

watch(theme, () => {

  drawGraph();

});

</script>



<style lang="scss">

body {

  color: var(--font-primary);

  background-color: var(--background-main);

}

.myChart {

  width: 300px;

  height: 300px;

}

</style>

2. 一键变灰

在特殊的日子里，网页有整体变灰色的需求。可以使用filter 的 grayscale() 改变图像灰度，值在 0% 到 100% 之间，值为0%展示原图，值为100% 则完全转为灰度图像

body {

  filter: grayscale(1); //1相当于100%

}

结尾

本文只是介绍大概的思路，更多的功能可根据业务增加。例如将主题色theme存储到pinia上，应用到全局上；将主题色存储到localStorage上，在页面刷新时，防止主题色恢复默认。

本文可结合以下文章阅读：

如果有更多的换肤方案，欢迎在留言区留言讨论。我会根据留言区内容实时更新。

近期产品期望在后台发布帖子或视频时，需要添加 @用户 的功能，以便用户收到通知，例如“xxx在xxx提及了您！”。然而，现有的开源库未能满足我们的需求，例如 ant-design 的 Mentions 组件：

但是不难发现跟微信飞书对比下，有两个细节没有处理。

然后也是找了其他的库都没达到产品的期望效果，那么好，自己实现一个，先看看最终实现的效果：

封装之后使用：

<AtInput

    height={150}

    onRequest={async (searchStr) => {

        const { data } = await UserFindAll({ nickname: searchStr });

        return data?.list?.map((v) => ({

            id: v.uid,

            name: v.nickname,

            wechatAvatarUrl: v.wechatAvatarUrl,

        }));

    }}

    onChange={(content, selected) => {

        setAtUsers(selected);

    }}

/>

那么实现这么一个输入框大概有以下几个点：

大多数文本输入框我们会使用input,或者textarea,很明显以上1,2两点实现不了，antd也是使用的textarea，所以也是没有实现这两个效果。所以这块使用富文本编辑，设置contentEditable,将其变为可编辑去做。输入框以及选择器的dom就如下:

 <div style={{ height, position: 'relative' }}>

       {/* 编辑器 */}

       <div 

           id="atInput" 

           ref={atRef} 

           className={'editorDiv'} 

           contentEditable 

           onInput={editorChange} 

           onClick={editorClick} 

       />

       {/* 选择用户框 */}

       <SelectUser 

           options={options} 

           visible={visible} 

           cursorPosition={cursorPosition} 

           onSelect={onSelect} 

       />

 </div>

实现思路：

以上提到了监听@文本变化，通常绑定onChange事件就行，但是还有一种用户通过点击移动光标，这块需要绑定change,click两个时间，他们里边的逻辑基本一样，只需要额外处理点击选中输入框中用户时，整体选中g功能，那么代码如下：

    const onObserveInput = () => {

        let cursorBeforeStr = '';

        const selection: any = window.getSelection();

        if (selection?.focusNode?.data) {

            cursorBeforeStr = selection.focusNode?.data.slice(0, selection.focusOffset);

        }

        setFocusNode(selection.focusNode);

        const lastAtIndex = cursorBeforeStr?.lastIndexOf('@');

        setCurrentAtIdx(lastAtIndex);

        if (lastAtIndex !== -1) {

            getCursorPosition();

            const searchStr = cursorBeforeStr.slice(lastAtIndex + 1);

            if (!StringTools.isIncludeSpacesOrLineBreak(searchStr)) {

                setSearchStr(searchStr);

                fetchOptions(searchStr);

                setVisible(true);

            } else {

                setVisible(false);

                setSearchStr('');

            }

        } else {

            setVisible(false);

        }

    };



    const selectAtSpanTag = (target: Node) => {

        window.getSelection()?.getRangeAt(0).selectNode(target);

    };



    const editorClick = async (event) => {

        onObserveInput();

        // 判断当前标签名是否为span 是的话选中当做一个整体

        if (e.target.localName === 'span') {

            selectAtSpanTag(e.target);

        }

    };



    const editorChange = (event) => {

        const { innerText } = event.target;

        setContent(innerText);

        onObserveInput();

    };

每次点击或者文本改变时都会去调用onObserveInput，以上onObserveInput该方法中主要做了以下逻辑：

• 在此之前需要先了解 Selection的一些方法

 const getCursorPosition = () => {

        // 坐标相对浏览器的坐标

        const { x, y } = window.getSelection()?.getRangeAt(0).getBoundingClientRect() as any;

        // 获取编辑器的坐标

        const editorDom = window.document.querySelector('#atInput');

        const { x: eX, y: eY } = editorDom?.getBoundingClientRect() as any;

        // 光标所在位置

        setCursorPosition({ x: x - eX, y: y - eY });

};

选择器弹出后，那么下面就到了选择用户之后的流程了，

 /**

     * @param id 唯一的id 可以uid

     * @param name 用户姓名

     * @param color 回显颜色

     * @returns

     */

    const createAtSpanTag = (id: number | string, name: string, color = 'blue') => {

        const ele = document.createElement('span');

        ele.className = 'at-span';

        ele.style.color = color;

        ele.id = id.toString();

        ele.contentEditable = 'false';

        ele.innerText = `@${name}`;

        return ele;

    };



    /**

     * 选择用户时回调

     */

    const onSelect = (item: Options) => {

        const selection = window.getSelection();

        const range = selection?.getRangeAt(0) as Range;

        // 选中输入的 @关键字  -> @郑

        range.setStart(focusNode as Node, currentAtIdx!);

        range.setEnd(focusNode as Node, currentAtIdx! + 1 + searchStr.length);

        // 删除输入的 @关键字

        range.deleteContents();

        // 创建元素节点

        const atEle = createAtSpanTag(item.id, item.name);

        // 插入元素节点

        range.insertNode(atEle);

        // 光标移动到末尾

        range.collapse();

        // 缓存已选中的用户

        setSelected([...selected, item]);

        // 选择用户后重新计算content

        setContent(document.getElementById('atInput')?.innerText as string);

        // 关闭弹框

        setVisible(false);

        // 输入框聚焦

        atRef.current.focus();

    };

选择用户的时候需要做的以下以下几点：

最后

在选择的用户或者内容发生改变时将数据抛给父组件

 const getAttrIds = () => {

        const spans = document.querySelectorAll('.at-span');

        let ids = new Set();

        spans.forEach((span) => ids.add(span.id));

        return selected.filter((s) => ids.has(s.id));

    };



    /**  @的用户列表发生改变时，将最新值暴露给父组件 */

    useEffect(() => {

        const selectUsers = getAttrIds();

        onChange(content, selectUsers);

    }, [selected, content]);

完整组件代码

输入框主要逻辑代码：

let timer: NodeJS.Timeout | null = null;



const AtInput = (props: AtInputProps) => {

    const { height = 300, onRequest, onChange, value, onBlur } = props;

    // 输入框的内容=innerText

    const [content, setContent] = useState<string>('');

    // 选择用户弹框

    const [visible, setVisible] = useState<boolean>(false);

    // 用户数据

    const [options, setOptions] = useState<Options[]>([]);

    // @的索引

    const [currentAtIdx, setCurrentAtIdx] = useState<number>();

    // 输入@之前的字符串

    const [focusNode, setFocusNode] = useState<Node | string>();

    // @后关键字 @郑 = 郑

    const [searchStr, setSearchStr] = useState<string>('');

    // 弹框的x,y轴的坐标

    const [cursorPosition, setCursorPosition] = useState<Position>({

        x: 0,

        y: 0,

    });

    // 选择的用户

    const [selected, setSelected] = useState<Options[]>([]);

    const atRef = useRef<any>();



    /** 获取选择器弹框坐标 */

    const getCursorPosition = () => {

        // 坐标相对浏览器的坐标

        const { x, y } = window.getSelection()?.getRangeAt(0).getBoundingClientRect() as any;

        // 获取编辑器的坐标

        const editorDom = window.document.querySelector('#atInput');

        const { x: eX, y: eY } = editorDom?.getBoundingClientRect() as any;

        // 光标所在位置

        setCursorPosition({ x: x - eX, y: y - eY });

    };



    /**获取用户下拉列表 */

    const fetchOptions = (key?: string) => {

        if (timer) {

            clearTimeout(timer);

            timer = null;

        }

        timer = setTimeout(async () => {

            const _options = await onRequest(key);

            setOptions(_options);

        }, 500);

    };



    useEffect(() => {

        fetchOptions();

        // if (value) {

        //     /** 判断value中是否有at用户 */

        //     const atUsers: any = StringTools.filterUsers(value);

        //     setSelected(atUsers);

        //     atRef.current.innerHTML = value;

        //     setContent(value.replace(/<\/?.+?\/?>/g, '')); //全局匹配内html标签)

        // }

    }, []);



    const onObserveInput = () => {

        let cursorBeforeStr = '';

        const selection: any = window.getSelection();

        if (selection?.focusNode?.data) {

            cursorBeforeStr = selection.focusNode?.data.slice(0, selection.focusOffset);

        }

        setFocusNode(selection.focusNode);

        const lastAtIndex = cursorBeforeStr?.lastIndexOf('@');

        setCurrentAtIdx(lastAtIndex);

        if (lastAtIndex !== -1) {

            getCursorPosition();

            const searchStr = cursorBeforeStr.slice(lastAtIndex + 1);

            if (!StringTools.isIncludeSpacesOrLineBreak(searchStr)) {

                setSearchStr(searchStr);

                fetchOptions(searchStr);

                setVisible(true);

            } else {

                setVisible(false);

                setSearchStr('');

            }

        } else {

            setVisible(false);

        }

    };



    const selectAtSpanTag = (target: Node) => {

        window.getSelection()?.getRangeAt(0).selectNode(target);

    };



    const editorClick = async (e?: any) => {

        onObserveInput();

        // 判断当前标签名是否为span 是的话选中当做一个整体

        if (e.target.localName === 'span') {

            selectAtSpanTag(e.target);

        }

    };



    const editorChange = (event: any) => {

        const { innerText } = event.target;

        setContent(innerText);

        onObserveInput();

    };



    /**

     * @param id 唯一的id 可以uid

     * @param name 用户姓名

     * @param color 回显颜色

     * @returns

     */

    const createAtSpanTag = (id: number | string, name: string, color = 'blue') => {

        const ele = document.createElement('span');

        ele.className = 'at-span';

        ele.style.color = color;

        ele.id = id.toString();

        ele.contentEditable = 'false';

        ele.innerText = `@${name}`;

        return ele;

    };



    /**

     * 选择用户时回调

     */

    const onSelect = (item: Options) => {

        const selection = window.getSelection();

        const range = selection?.getRangeAt(0) as Range;

        // 选中输入的 @关键字  -> @郑

        range.setStart(focusNode as Node, currentAtIdx!);

        range.setEnd(focusNode as Node, currentAtIdx! + 1 + searchStr.length);

        // 删除输入的 @关键字

        range.deleteContents();

        // 创建元素节点

        const atEle = createAtSpanTag(item.id, item.name);

        // 插入元素节点

        range.insertNode(atEle);

        // 光标移动到末尾

        range.collapse();

        // 缓存已选中的用户

        setSelected([...selected, item]);

        // 选择用户后重新计算content

        setContent(document.getElementById('atInput')?.innerText as string);

        // 关闭弹框

        setVisible(false);

        // 输入框聚焦

        atRef.current.focus();

    };



    const getAttrIds = () => {

        const spans = document.querySelectorAll('.at-span');

        let ids = new Set();

        spans.forEach((span) => ids.add(span.id));

        return selected.filter((s) => ids.has(s.id));

    };



    /**  @的用户列表发生改变时，将最新值暴露给父组件 */

    useEffect(() => {

        const selectUsers = getAttrIds();

        onChange(content, selectUsers);

    }, [selected, content]);



    return (

        <div style={{ height, position: 'relative' }}>

            {/* 编辑器 */}

            <div id="atInput" ref={atRef} className={'editorDiv'} contentEditable onInput={editorChange} onClick={editorClick} />

            {/* 选择用户框 */}

            <SelectUser options={options} visible={visible} cursorPosition={cursorPosition} onSelect={onSelect} />

        </div>

    );

};

选择器代码

const SelectUser = React.memo((props: SelectComProps) => {

  const { options, visible, cursorPosition, onSelect } = props;



  const { x, y } = cursorPosition;



  return (

    <div

      className={'selectWrap'}

      style={{

        display: `${visible ? 'block' : 'none'}`,

        position: 'absolute',

        left: x,

        top: y + 20,

      }}

    >

      <ul>

        {options.map((item) => {

          return (

            <li

              key={item.id}

              onClick={() => {

                onSelect(item);

              }}

            >

              <img src={item.wechatAvatarUrl} alt="" />

              <span>{item.name}</span>

            </li>

          );

        })}

      </ul>

    </div>

  );

});

export default SelectUser;

以上就是实现一个支持@用户的输入框功能，就目前而言，比较死板，不支持自定义颜色，自定义选择器等等，未来，可以进一步扩展功能，例如添加@用户的高亮样式定制、支持键盘快捷键操作等，从而提升用户体验和功能性。

今天发现一个特别有意思的效果，并进行解析，就是标题的效果

参考链接

• 实现地址 CodePen

如果要实现这个功能，我想很多人第一时间想到的都是用js去计算dom容器和文字之间是否溢出吧？但今天带来一个用css实现的效果，不用自己计算，只需要寥寥几行(bushi)就可以实现让人头疼的文字中间省略号功能。

实现思路

1. 简单实现

在用css实现的时候我们不妨用这个思路想想，设置一个当前显示文字span伪元素的width为50%，浮动到当前span上面，并且设置direction: rtl; 显示右边文字，不就可以很简单的实现这个功能了？让我们试试：

<style>

    .wrap {

        width: 200px;

        border: 1px solid white;

    }

    .test-title {

        display: block;

        color: white;

        overflow: hidden;

        height: 20px;

    }

    .test-title::before {

        content: attr(title);

        width: 50%;

        float: right;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        direction: rtl;

    }

</style>

<body>

    <div class="wrap">

        <span class="test-title" title="这是一行文字文字文字文字文字文字文字文字文字文字文字文字文字">

            这是一行文字文字文字文字文字文字文字文字文字文字文字文字文字

        </span>

    </div>

</body>

2. 优化效果

在上面我们已经看到，其实效果我们已经实现了，现在文字中间已经有了省略号了！但是这其中其实有一个弊端不知道大家有没有发现，那就是文本不溢出的情况呢？伪元素是不是会一直显示在上面？这该怎么办？难道我们需要用js监听文本不溢出的情况然后手动隐藏吗？

既然是用css来进行实现，那么我们当然不能用这种方式了。这里原作者用了一种很取巧，但也很好玩的一种方法，让我们来看看吧！

既然我们上面实现的是文本溢出的情况，那么当文本不溢出的时候我们直接显示文字不就行了？你可能想说：“这不是废话吗？但我现在不就是不知道怎么判断吗？ ”。hhhhh对，那我们就要用css来想想，css该怎么判断呢？我就不卖关子了，让我们想想，我们给文本的容器添加一个固定宽度，那么当文本溢出的时候会发生什么呢？是不是会换行，高度变大呢，那么当我们设置两个文本元素，一个是正常样式，一个是我们上方的溢出样式。等文本不溢出没换行的时候，显示正常样式，当文本溢出高度变大的时候显示溢出样式可以吗？让我们试试吧

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        body {

            background: #333;

            height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

            margin: 0;

            font-size: 14px;

        }

        .wrap {

            width: 300px;

            background: #333;

            

            /* 设置正常行高，并隐藏溢出画面 */

            height: 2em;

            overflow: hidden;

            line-height: 2;

            position: relative;

            text-align: -webkit-match-parent;

            resize: horizontal;

        }



        .normal-title {

            /* 设置最大高度为双倍行高使其可以换行 */

            display: block;

            max-height: 4em;

        }

        .test-title {

            position: relative;

            top: -4em;

            display: block;

            color: white;

            overflow: hidden;

            height: 2em;

            text-align: justify;

            background: inherit;

            overflow: hidden;

        }

        .test-title::before {

            content: attr(title);

            width: 50%;

            float: right;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            direction: rtl;

        }

    </style>

</head>



<body>

    <div class="wrap">

        <span class="normal-title">这是一行文字文字文字文字文字文字文字文字文字文字文字文字文字</span>

        <span class="test-title" title="这是一行文字文字文字文字文字文字文字文字文字文字文字文字文字">

            这是一行文字文字文字文字文字文字文字文字文字文字文字文字文字

        </span>

    </div>

</body>



</html>

大家都试过了吧？那让我们来讲一下这段代码的实现：

实现方式：简单来说这段代码实现的就是一个覆盖的效果，normal-title元素平常是普通高度(1em)，等到换行之后就会变成2em，那么我们的溢出样式test-title怎么实现的覆盖呢？这主要依赖于test-title的top属性，让我们这样子想，当normal-title高度为1em的时候，test-title的top为-2em，那么这时候因为wrap的hidden效果，所以test-title是看不到的。那么当normal-title的高度为2em的时候呢？test-title刚好就会覆盖到normal-title上面，所以我们刚好可以看到test-title的省略号效果。

这就是完整的实现过程和方式，css一些取巧的判断方式总会让我们大开眼界，不断学习，方得始终。

0. 注意

本文只是提供一个思路，由于现在大模型正在飞速发展，整个生态在不久的将来或许会发生巨大的变化，文章中的代码仅供参考。

1. 一个简单的示例

假设当前时间是2023年12月28日，时间段选择器通过理解用户输入表述，自动设置值。

可以看到组件正确理解了用户想要设置的时间。

2.原理简介

graph TD

输入文字描述 --> 请求语言模型接口 --> 处理语言模型响应 --> 功能操作

其实原理很简单，就是通过代码的方式问模型问题，然后让他回答。这和我们使用chatgpt一样的。

3. 实现

输入描述就不说了，就是输入框。关键在于请求和处理语言模型的接口。

最简单的就是直接使用api请求这些大模型的官方接口，但是我们需要处理各种平台之间的接口差异和一些特殊问题。这里我使用了一个开发语言模型应用的框架LangChain。

3.1. LangChain

简单的说，这是一个面向语言处理模型的编程框架，从如何输入你的问题，到如何处理回答都有规范的工具来实现。

LangChain官网

// 这是一个最简单的例子

import { OpenAI } from "langchain/llms/openai";  

import { ChatOpenAI } from "langchain/chat_models/openai";  

// 初始化openai模型

const llm = new OpenAI({  

temperature: 0.9,  

});  

// 准备一个输入文本

const text =  

"What would be a good company name for a company that makes colorful socks?";  

// 输入文本，获取响应

const llmResult = await llm.predict(text);

//=> 响应一段文本："Feetful of Fun"

整个框架主要就是下面三个部分组成：

graph LR

A["输入模板(Prompt templates)"] --- B["语言模型(Language models)"] --- C["输出解释器(Output parsers)"]

• Prompt templates：输入模板分一句话（not chat）和对话（chat）模式，区别就是输入一句话和多句话，而且对话模式中每句话有角色区分是谁说的，比如人类、AI、系统。这里简单介绍一下非对话模式下怎么创建输入模板。

import { PromptTemplate } from "langchain/prompts";  

  

// 最简单的模板生成，使用fromTemplate传入一句话

// 可以在句子中加入{}占位符表示变量

const oneInputPrompt = PromptTemplate.fromTemplate(  

`You are a naming consultant for new companies.  

What is a good name for a company that makes {product}?`  

);  

// 也可以直接实例化设置

const twoInputPrompt = new PromptTemplate({  

    inputVariables: ["adjective"],  

    template: "Tell me a {adjective} joke.",  

}); 



// 如果你想要这样和模型对话

// 先给出几个例子，然后在问问题

Respond to the users question in the with the following format:  

  

Question: What is your name?  

Answer: My name is John.  

  

Question: What is your age?  

Answer: I am 25 years old.  

  

Question: What is your favorite color?  

Answer:

// 可以使用FewShotPromptTemplate

// 创建一些模板，字段名随便你定

  const examples = [

    {

      input:

        "Could the members of The Police perform lawful arrests?",

      output: "what can the members of The Police do?",

    },

    {

      input: "Jan Sindel's was born in what country?",

      output: "what is Jan Sindel's personal history?",

    },

  ];

// 输入模板，包含变量就是模板要填充的

  const prompt = `Human: {input}\nAI: {output}`;

  const examplePromptTemplate = PromptTemplate.fromTemplate(prompt);

// 创建example输入模板

  const fewShotPrompt = new FewShotPromptTemplate({

    examplePrompt: examplePromptTemplate,

    examples,

    inputVariables: [], // no input variables

  });

  console.log(

    (await fewShotPrompt.formatPromptValue({})).toString()

  );

  // 输出

  Human: Could the members of The Police perform lawful arrests?

  AI: what can the members of The Police do?



  Human: Jan Sindel's was born in what country?

  AI: what is Jan Sindel's personal history?

 // 还有很多可以查询官网

• Language models: 语言模型同样分为LLM（大语言模型）和chat模型，其实两个差不多，就是输入多少和是否可以连续对话的区别。

import { OpenAI } from "langchain/llms/openai";  

  

const model = new OpenAI({ temperature: 1 });  

 // 可以添加超时

const resA = await model.call(  

"What would be a good company name a company that makes colorful socks?",  

{ timeout: 1000 } // 1s timeout  

);

// 注册一些事件回调

const model = new OpenAI({  

    callbacks: [  

        {  

            handleLLMStart: async (llm: Serialized, prompts: string[]) => {  

                console.log(JSON.stringify(llm, null, 2));  

                console.log(JSON.stringify(prompts, null, 2));  

            },  

            handleLLMEnd: async (output: LLMResult) => {  

                console.log(JSON.stringify(output, null, 2));  

            },  

            handleLLMError: async (err: Error) => {  

                console.error(err);  

            },  

        },  

    ],  

});

// 还有一些配置可以参考文档

• Output parsers: 顾名思义就是处理输出的模块，当语言模型回答了一段文字程序是很难提取出有用信息的， 我们通常需要模型返回一个程序可以处理的答案，比如JSON。虽然叫输出解释器，实际上是在输入信息中加入一些额外的提示，让模型能够按照需求格式输出。

// 这里用StructuredOutputParser，结构化输出解释器为例

// 使用StructuredOutputParser创建一个解释器

// 定义了输出有两个字段answer、source

// 字段的值是对这个字段的描述在

      const parser = StructuredOutputParser.fromNamesAndDescriptions({

        answer: "answer to the user's question",

        source: "source used to answer the user's question, should be a website.",

      });

// 使用RunnableSequence，批量执行任务

      const chain = RunnableSequence.from([

      // 输入包含了两个变量，一个是结构化解释器的“格式说明”，一个是用户的问题

        PromptTemplate.fromTemplate(

          "Answer the users question as best as possible.\n{format_instructions}\n{question}"

        ),

        new OpenAI({ temperature: 0 }),

        parser,

      ]);

  // 与模型交互

  const response = await chain.invoke({

    question: "What is the capital of France?",

    format_instructions: parser.getFormatInstructions(),

  });

// 响应 { answer: 'Paris', source: 'https://en.wikipedia.org/wiki/Paris' }

// 输入的模板是这样

      Answer the users question as best as possible. // 这句话就是prompt的第一句

      // 下面一大段是StructuredOutputParser自动加上的，大概就是告诉模型json的标准格式应该是什么

      The output should be formatted as a JSON instance that conforms to the JSON schema below.



      As an example, for the schema {{"properties": {{"foo": {{"title": "Foo", "description": "a list of strings", "type": "array", "items": {{"type": "string"}}}}}}, "required": ["foo"]}}}}

      the object {{"foo": ["bar", "baz"]}} is a well-formatted instance of the schema. The object {{"properties": {{"foo": ["bar", "baz"]}}}} is not well-formatted.



      Here is the output schema:

      ```

      {"type":"object","properties":{"answer":{"type":"string","description":"answer to the user's question"},"sources":{"type":"array","items":{"type":"string"},"description":"sources used to answer the question, should be websites."}},"required":["answer","sources"],"additionalProperties":false,"$schema":"http://json-schema.org/draft-07/schema#"}

      ```

    // 这段就是调用的时候传入的问题

      What is the capital of France?





  // 还有很多不同的解释器

  // 如StringOutputParser字符串输出解释器

  // JsonOutputFunctionsParser json函数输出解释器等等

除了这三部分，还有一些方便程序操作的一些功能模块，比如记录聊天状态的Memory模块，知识库模块Retrieval等等，这些官网有比较完整的文档，深度的使用后面再来探索。

3.2. 简单版本

// 初始化语言模型

// 这里使用的openai

const llm = new OpenAI({

  openAIApiKey: import.meta.env.VITE_OPENAI_KEY,

  temperature: 0,

});



function App() {

  const [res, setRes] = useState<string>();

  const [from] = Form.useForm();

  return (

    <>

      <div>结果：{res}</div>

      <Form wrapperCol={{ span: 6 }} form={from}>

        <Form.Item label="输入描述">

          <Input.Search

            onSearch={async (value) => {

              setRes("正在请求");

              // 直接对话模型

              const text =

              `现在是${dayjs().format("YYYY-MM-DD")}，${value}，开始结束时间是什么。请用这个格式回答{startTime: '开始时间', endTime: '结束时间'}`;

              // 简单预测文本

              const llmResult = await llm.predict(text);

              const response = JSON.parse(llmResult)

              // 解析

              const { startTime, endTime } = response;

              // 设置

              from.setFieldsValue({

                times: [dayjs(startTime), dayjs(endTime)],

              });

              setRes(llmResult)

            }}

            enterButton={<Button type="primary">确定</Button>}

          />

        </Form.Item>

        <Form.Item label="时间段" name="times">

          <DatePicker.RangePicker />

        </Form.Item>

      </Form>

    </>

  );

}



export default App;

前面虽然能实现功能，但是有很多边界条件无法考虑到，比如有的模型无法理解你这个返回格式是什么意思，或者你有很多个字段那你就要写一大串输入模板。

3.3. 使用结构化输出解释器

// 修改一下onSearch

  setRes("正在请求");

  // 定义输出有两个字段startTime、endTime

  const parser = StructuredOutputParser.fromNamesAndDescriptions({

    startTime: "开始时间,格式是YYYY-MM-DD HH:mm:ss",

    endTime: "结束时间,格式是YYYY-MM-DD HH:mm:ss",

  });

  const chain = RunnableSequence.from([

    // 输入模板

    PromptTemplate.fromTemplate(

      `{format_instructions}\n现在是${dayjs().format(

        "YYYY-MM-DD"

      )},{question},开始结束时间是什么`

    ),

    llm,

    parser,

  ]);

  const response = await chain.invoke({

    question: value,

    // 把输出解释器的提示放入输入模板中

    format_instructions: parser.getFormatInstructions(),

  });

  // 这个时候经过结构化解释器处理，返回的就是json

  setRes(JSON.stringify(response));

  const { startTime, endTime } = response;

  from.setFieldsValue({

    times: [dayjs(startTime), dayjs(endTime)],

  });

对于大型一点的项目，使用langChain的api可以更规范的组织我们的代码。

// 完整代码

import { OpenAI } from "langchain/llms/openai";

import { useState } from "react";

import {

  PromptTemplate,

} from "langchain/prompts";

import { StructuredOutputParser } from "langchain/output_parsers";

import { RunnableSequence } from "langchain/runnables";

import { Button, DatePicker, Form, Input } from "antd";

import "dayjs/locale/zh-cn";

import dayjs from "dayjs";



const llm = new OpenAI({

  openAIApiKey: import.meta.env.VITE_OPENAI_KEY,

  temperature: 0,

});



function App() {

  const [res, setRes] = useState<string>();

  const [from] = Form.useForm();

  return (

    <>

      <div>结果：{res}</div>

      <Form wrapperCol={{ span: 6 }} form={from}>

        <Form.Item label="输入描述">

          <Input.Search

            onSearch={async (value) => {

              setRes("正在请求");

              const parser = StructuredOutputParser.fromNamesAndDescriptions({

                startTime: "开始时间,格式是YYYY-MM-DD HH:mm:ss",

                endTime: "结束时间,格式是YYYY-MM-DD HH:mm:ss",

              });

              const chain = RunnableSequence.from([

                PromptTemplate.fromTemplate(

                  `{format_instructions}\n现在是${dayjs().format(

                    "YYYY-MM-DD"

                  )},{question},开始结束时间是什么`

                ),

                llm,

                parser,

              ]);

              const response = await chain.invoke({

                question: value,

                format_instructions: parser.getFormatInstructions(),

              });

              setRes(JSON.stringify(response));

              const { startTime, endTime } = response;

              from.setFieldsValue({

                times: [dayjs(startTime), dayjs(endTime)],

              });



            }}

            enterButton={<Button type="primary">确定</Button>}

          />

        </Form.Item>

        <Form.Item label="时间段" name="times">

          <DatePicker.RangePicker />

        </Form.Item>

      </Form>

    </>

  );

}



export default App;