# at.js 文档
## 简介
at.js 是一个轻量级的 JavaScript 库，用于实现类似于 Twitter 的 @提及功能，通过简单的 API，开发者能够轻松地在评论、帖子等文本内容中添加对用户的提及功能。
## 安装与引入
### 1. CDN 引入
```html
```
### 2. NPM 安装
```sh
npm install at.js
```
然后在你的项目中引入：
```javascript
import at from 'at.js';
```
## 基本使用
### 初始化
在 HTML 元素中调用 `at()` 函数，并传递需要处理的文本内容和回调函数。
```html
```
### 回调函数
at.js 会将检测到的 @提及替换为一个链接，点击该链接可以执行回调函数中的操作。
```javascript
at('#content', function (mention) {
alert('Mentioned: ' + mention);
});
```
## 配置选项
at.js 提供了一些配置选项，以便开发者根据需求进行定制：
| 参数名 | 类型 | 默认值 | 描述 |
|----------------|-------|-------------------------|--------------------------------------------------|
| `@符号` | String| `'@'` | 用于识别提及的字符，可以是多个字符的组合。 |
| `className` | String| `'mention'` | 被提及的用户名称将被包裹在这个类名的 span 标签内。 |
| `callback` | Function| `null` | 当提及被点击时的回调函数。 |
| `threshold` | Number| `1` | 触发提及功能的最小字符数。 |
| `whitespace` | RegExp| `/s/` | 用于分隔提及的正则表达式。 |
示例：
```javascript
at('#content', {
@符号: '@',
className: 'highlight',
callback: function (mention) {
alert('Mentioned: ' + mention);
},
threshold: 3,
whitespace: /s+/
});
```
## 高级用法
### 动态内容处理
如果页面上有动态加载的内容，可以使用 MutationObserver 监听 DOM 变化，并在变化时重新初始化 at.js。
```javascript
const observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.nodeType === Node.ELEMENT_NODE) {
at(node);
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
```
### 自定义样式
可以通过 CSS 修改提及的样式：
```css
.highlight {
color: red;
font-weight: bold;
```
## 相关问题与解答
### Q1: at.js 如何区分不同的用户？
**A1:** at.js 本身并不具备用户区分功能，它只是简单地将 @后面的文字作为提及进行处理，为了实现用户区分，可以在回调函数中进行进一步的处理，例如通过数据库查询用户名是否存在。
### Q2: at.js 支持国际化吗？
**A2:** at.js 本身不支持国际化，但它的设计非常灵活，你可以根据需要修改配置选项来适应不同的语言环境，你可以将 `@符号` 修改为其他语言中的类似符号。
以上内容就是解答有关“at.js 文档”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/652647.html
微信扫一扫 