# @shelf/ssp-sdk 中文文档
规范地址：https://npmcn.com/package/%40shelf/ssp-sdk/
版本：12\.0\.1
npm 元数据更新时间：2026-11-02T10:16:35.985Z
中文译文更新时间：2026-11-02T11:38:09.564Z
软件包许可：MIT
本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40shelf/ssp-sdk
原文对照：https://npmcn.com/package/%40shelf/ssp-sdk/?lang=original
项目主页：https://github.com/shelfio/ssp-sdk#readme
源码仓库：https://github.com/shelfio/ssp-sdk
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：143 kB，19 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2024-01-12T13:34:19.213Z
- 最新版本发布：2024-09-18T16:16:26.045Z
- 已发布版本数：106（近 12 个月 0 个）
## 中文简介
自助服务门户SDK
## 安装
```sh
npm install @shelf/ssp-sdk
```
也可以使用：`pnpm add @shelf/ssp-sdk`、`yarn add @shelf/ssp-sdk`、`bun add @shelf/ssp-sdk`
## README
# @shelf / ssp-sdk [](https://circleci.com/gh/shelfio/agent-assist-sdk/tree/master)
## ShelfSSPSDK
这个 `ShelfSSPSDK` 是一个JavaScript库，允许您轻松地集成和交互 `ShelfSSP` 基于框架的单页应用程序。 类的初始化方法 `ShelfSSP` . iframe、构造URL、跟踪URL更改、处理事件以及向 `ShelfSSP`.
### 安装
```
npm install @shelf/ssp-sdk
```
或者
```
yarn add @shelf/ssp-sdk
```
#### 作为脚本
```
```
### 使用
要使用 `ShelfSSPSDK`，将它导入到你的JavaScript或TypeScript文件中：
```ecmascript
import { ShelfSSPSDK } from '@shelf/ssp-sdk';
```
#### 初始化ShelfSSP框架
初始化 `ShelfSSP` Iframe，使用initialize方法：
```ecmascript
ShelfSSPSDK.initialize({
element: document.getElementById('shelf-ssp-container'),
sspURL: 'https://example.com/ssp',
lang: 'en',
slug: 'product',
searchParams: { category: 'electronics', brand: 'apple' },
onReady: () => {
console.log('ShelfSSP is ready');
}
});
```
initialize方法接受一个具有以下属性的对象：
- `element (HTMLElement)`的DOM元素 `ShelfSSP` Iframe将被追加。
- `sspURL (string)`的基础URL `ShelfSSP`.
- `lang (string)`的语言参数 `ShelfSSP` URL。
- `slug (string)`的段塞参数 `ShelfSSP` URL。
- `searchParams (Record)`的附加查询参数 `ShelfSSP` URL。
- `onReady (optional function)`：一个回调函数，当 `ShelfSSP` Iframe已加载并准备好。
#### 处理来自ShelfSSP的事件
事件发送的事件 `ShelfSSP`，使用 `on` 方法:
```ecmascript
ShelfSSPSDK.on('event', (data) => {
console.log('Received event:', data);
});
```
这个 `on` 方法接受一个事件名称和一个回调函数。 方法接收到具有指定名称的事件时，将调用回调函数 `ShelfSSP`.
#### 向ShelfSSP发送消息
要向ShelfSSP发送消息，请使用 `postMessage` 方法:
```ecmascript
ShelfSSPSDK.postMessage('action', { payload: 'data' })
.then((response) => {
console.log('Received response:', response);
});
```
这个 `postMessage` 方法接受消息类型和可选有效负载。 它返回一个promise，该promise使用的响应进行解析 `ShelfSSP`.
#### 关闭ShelfSSP框架
关闭 `ShelfSSP` 如果帧，使用 `close` 方法:
```ecmascript
ShelfSSPSDK.close();
```
这个 `close` 方法移除 `ShelfSSP` 从DOM获取iframe。
## CommunicationChannel
这个 `CommunicationChannel` 类是一个实用程序类，它提供了用于初始化通信通道并与之交互的方法 `structured-channel` 图书馆。
### 使用
要使用 `CommunicationChannel` 类，把它导入到你的JavaScript或TypeScript文件中：
```ecmascript
import { CommunicationChannel } from '@shelf/sdk-ssp';
```
#### 初始化通信通道
方法对通信通道进行初始化 `init` 方法:
```ecmascript
await CommunicationChannel.init();
```
这个 `init` 方法建立与 `structured-channel` 并准备用于发送和接收消息的通信通道。
#### 发送消息
要通过通信通道发送消息，请使用 `send` 方法:
```ecmascript
await CommunicationChannel.send('action', { payload: 'data' });
```
这个 `send` 方法接受消息类型和可选有效负载。 它通过通信通道发送消息，并返回一个与通道另一端的响应解析的承诺。
#### 处理事件
要处理通过通信通道接收的事件，请使用 `on` 方法:
```ecmascript
CommunicationChannel.on('event', (data) => {
// Handle the event data
});
```
这个 `on` 方法接受一个事件名称和一个回调函数。 每当通过通信通道接收到具有指定名称的事件时，将调用回调函数。
#### 停止处理事件
要停止处理特定事件名称的事件，请使用 `off` 方法:
```ecmascript
CommunicationChannel.off('event', callback);
```
这个 `off` 方法从给定事件名称的事件侦听器中删除指定的回调函数。
麻省理工学院© [架子上](https://shelf.io/)
## 常见问题
### @shelf/ssp-sdk 是什么？
自助服务门户SDK
### 如何安装 @shelf/ssp-sdk？
在项目目录运行 npm install @shelf/ssp-sdk，或使用 pnpm add / yarn add / bun add。
### @shelf/ssp-sdk 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @shelf/ssp-sdk 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @shelf/ssp-sdk 可以商用吗？
@shelf/ssp-sdk 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @shelf/ssp-sdk 还在维护吗？
最新版本 12\.0\.1 发布于 2024/09/19（2 年前）；至今共发布 106 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/01/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。