# @cocreate/actions 中文文档

规范地址：https://npmcn.com/package/%40cocreate/actions/

版本：2\.0\.2
npm 元数据更新时间：2026-11-07T02:46:27.993Z
中文译文更新时间：2026-11-10T05:24:36.810Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cocreate/actions
原文对照：https://npmcn.com/package/%40cocreate/actions/?lang=original
项目主页：https://cocreatejs.com/docs/actions
源码仓库：https://github.com/CoCreateJS/actions

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：165 kB，19 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：3 个
- 首次发布：2021-01-22T18:47:15.694Z
- 最新版本发布：2026-11-07T02:46:27.780Z
- 近 30 天下载量：3381（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：181（近 12 个月 10 个）

## 中文简介

链条多个组件执行 生成你想要的逻辑 当一个动作完成 下一个动作将开始 顺序持续到所有动作完成为止. Vanilla javascript, 使用 HTML5 属性和/或 JavaScript AP 方便配置

## 安装

```sh
npm install @cocreate/actions
```

也可以使用：`pnpm add @cocreate/actions`、`yarn add @cocreate/actions`、`bun add @cocreate/actions`

## README

# 创建/ 动作

浏览器的相继执行管道,完全通过HTML5属性配置. 单人 `actions` 属性 将任意数量的组件处决连在一起:每个动作运行,信号完成,只有接下来的动作才开始. 动作由每个 CoCreate 模块贡献,所以保存了记录,调用第三方API,渲染出一个模板,等待一个事件,并遵循一个链接编译成一个不写JavaScript的宣告序列.

* * *

## 文档

完整的指南和工作演示请参见 [文档](https://cocreatejs.com/docs/actions)。 。 。 .

## 目录

-   [特征](https://npmcn.com/package/%40cocreate/actions/#readme-features)
-   [安装](https://npmcn.com/package/%40cocreate/actions/#readme-installation)
-   [使用量](https://npmcn.com/package/%40cocreate/actions/#readme-usage)
-   [如何运作](https://npmcn.com/package/%40cocreate/actions/#readme-how-it-works)
-   [动作链解剖](https://npmcn.com/package/%40cocreate/actions/#readme-anatomy-of-an-action-chain)
-   [顺序和完成](https://npmcn.com/package/%40cocreate/actions/#readme-sequencing-and-completion)
-   [控制动作](https://npmcn.com/package/%40cocreate/actions/#readme-control-actions)
-   [元素方法动作](https://npmcn.com/package/%40cocreate/actions/#readme-element-method-actions)
-   [已注册的行动](https://npmcn.com/package/%40cocreate/actions/#readme-registered-actions)
-   [目标要素](https://npmcn.com/package/%40cocreate/actions/#readme-targeting-elements)
-   [Java 脚本 API](https://npmcn.com/package/%40cocreate/actions/#readme-javascript-api)
-   [行为说明](https://npmcn.com/package/%40cocreate/actions/#readme-behavior-notes)
-   [通知](https://npmcn.com/package/%40cocreate/actions/#readme-announcements)
-   [路线图](https://npmcn.com/package/%40cocreate/actions/#readme-roadmap)
-   [如何贡献](https://npmcn.com/package/%40cocreate/actions/#readme-how-to-contribute)
-   [关于](https://npmcn.com/package/%40cocreate/actions/#readme-about)
-   [许可证](https://npmcn.com/package/%40cocreate/actions/#readme-license)

* * *

## 特征

-   **声明顺序 :** 任何处决数目都以一个属性进行,严格按顺序进行.
-   **同步意识 :** 每个动作都表示它自己的完成,所以数据库写作,网络请求,并在下一步开始前完成.
-   **普遍登记:** 任何模块都可以按名称贡献一个动作,使其行为可以在整个应用程序中进行标记.
-   **使用元素方法:** 直接向被询问人员打电话,等待他们返回的承诺.
-   **流量控制 :** 等待事件,延迟执行,触发其他链条,提交表单,并切换按钮状态作为一等步骤.
-   **中止语义 :** 当一个步骤失败或一个条件没有得到满足时,一个行动可以停止链的剩余部分.
-   **目标:** 动作参数接受完整的 CoCreate 选择器语法,包括 `$parent`, (中文(简体) ), `$next`, (中文(简体) ), `$closest`,以及 `$document`。 。 。 .
-   **自动绑定 :** DOM后期添加的元素被自动捆绑,因此使模板表现得像静态标记.

* * *

## 安装

```bash
npm install @cocreate/actions
```

```bash
yarn add @cocreate/actions
```

### 光盘N

```html
<script src="https://cdn.CoCreateJS.com/actions/latest/CoCreate-actions.min.js"></script>
```

* * *

## 使用量

### 链式执行

动作从左到右 各各等前所修行相.

```html
<button actions="save, reset">Save</button>
```

### 传入参数

括号内提供一个参数,通常是一个选择器.

```html
<button actions="save, action($document #refresh-list)">Save</button>
```

### 跨模块链

因为每个模块都按名称注册其动作,所以单个链条可以坚持一个记录,调用API,并更新接口.

```html
<button actions="save, stripe.customers.create, render, reset">
    Create customer
</button>
```

### 延迟和等待

```html
<button actions="save, timeout(1000), action($document #notify)">Save</button>
```

* * *

## 如何运作

1.  点击听器绑定到每个 `[actions]` 元素,包括后面插入的元素.
2.  当被触发时,在逗号上将属性被分割成命令的已分级动作列表.
3.  每个条目被解为名称和可选的括号参数。 包含点的名称会被分为动作名称和方法,所以 `stripe.customers.create` 援引 `stripe` 使用该方法的动作 `customers.create`。 。 。 .
4.  第一次行动开始 管道附带一个一次性的监听器,用于该行动的完成活动,然后援引它.
5.  当完成事件起火时,下一个动作开始. 这重复到链被耗尽或中止为止.
6.  一旦每项行动完成,如果有真正的行动,管道将提交原生表格,然后在该要素上跟踪任何链接.

* * *

## 动作链解剖

```html
<button actions="save, timeout(500), stripe.customers.create">Go</button>
```

| 编 | 含义 |
| --- | --- |
| `save` | 登记的行动,按名称解决 |
| `,` | 序列分隔符, 下一个动作等待上一个 |
| `timeout(500)` | 有参数的动作 |
| `stripe.customers.create` | 行动 `stripe` 用方法引用 `customers.create` |

* * *

## 顺序和完成

动作在 **完成活动** 向元素开火。 登记宣布该事件,它默认为诉讼本身的名称.

```javascript
Actions.init({
    name: "save",
    endEvent: "saved",
    callback: (action) => { /* … */ }
});
```

回电收到一切工作需要

| 财产 | 说明 |
| --- | --- |
| `element` | 带有 `actions` 属性 |
| `form` | 最接近的祖先形式, 当存在时 |
| `name` | 确定动作名称 |
| `method` | 点点动作名称的方法部分 |
| `params` | 参数字符串, 当提供时 |
| `endEvent` | 完成事件 管道正在监听 |
| `end(detail)` | 安排完成活动,推进链条 |
| `continue()` | 直接推进链条 |
| `abort()` | 停止链条, 跳过所有剩余动作 |

既未发送完成事件, 也未呼叫的行动 `continue()` 或者说 `abort()` 离开链子等待,这是以后解决的步骤的预期行为.

用被点名所写的动作每个运行都会收到一个独特的完成事件,因此使用同一提供者的并行链条永远不会互相解决.

* * *

## 控制动作

这些资料总是可以提供,不需要登记.

| 行动 | 参数 | 行为 |
| --- | --- | --- |
| `timeout(ms)` | 毫秒 | 暂停给定期间的链条 |
| `event(name)` | 事件名称 | 等待着那场战事的发生 |
| `action(selector)` | 选择器 | 单击匹配元素, 触发自己的链条 |
| `submit` | 无 | 在最接近的表格上发送可注销的提交,等待 `submitted` 事件 |
| `disabled` | 无 | 切换 `disabled` 最近的按钮上的属性 |

```html
<button actions="disabled, save, disabled">Save</button>
```

```html
<button actions="save, event(uploaded), render">Save and wait for upload</button>
```

* * *

## 元素方法动作

当一个名字没有登记,不是控制动作时,管道把它当作一种 **方法调用被询问的元素**每一个显示该名称功能的匹配都引用了它,任何返回的承诺都等待着链条继续.

```html
<button actions="read($document #profile)">Reload profile</button>
```

这个叫 `read()` 打开 `#profile`。同一机制涵盖 `renderValue`, (中文(简体) ), `getValue`,而模块中的任何方法都添加到元素中,这使得管道可以扩展而无需登记任何内容.

> 一个方法动作需要一个参数来选择它的目标. `submit` 财务报告和审定财务报表 `disabled` 是唯一没有控制操作的动作.

* * *

## 已注册的行动

模块在导入时登记动作。 常用名称包括:

| 行动 | 完成事件 | 由 |
| --- | --- | --- |
| `save` | `saved` | `@cocreate/elements` |
| `delete` | `deleted` | `@cocreate/elements` |
| `reset` | `reset` | `@cocreate/elements` |
| `render` | `render` | `@cocreate/render` |
| `click`, (中文(简体) ), `toggle`, (中文(简体) ), `hover`, (中文(简体) ), `input`, (中文(简体) ), `change`, (中文(简体) ), `focus`, (中文(简体) ), `blur`,以及所有其他事件前缀 | `<name>End` | `@cocreate/events` |
| 任何供应商申报 `api="name"` | 每次运行 | `@cocreate/api` |

因为事件前缀被注册为动作,所以绑定可以作为一个步骤,而不是通过用户交互来引用:

```html
<button actions="save, click($document #panel)">Save and open panel</button>
```

* * *

## 目标要素

参数接受标准的 CSS 选择器加 Coreate 关系操作器, 以及后缀 `[]` 选择每个匹配而不是第一个.

| 运算符 | 决定: |
| --- | --- |
| `$document` | 拥有的文档 |
| `$parent` | 父元素 |
| `$next` | 下一个元素兄弟 |
| `$previous` | 前一个元素兄弟 |
| `$closest <selector>` | 最接近匹配的祖先 |
| `$frame` | 当前文件的框架要素 |
| `$top` | 顶级文档 |

```html
<button actions="save, action($closest .card .refresh[])">Save</button>
```

* * *

## Java 脚本 API

### 注册动作

```javascript
import Actions from "@cocreate/actions";

Actions.init({
    name: "notify",
    endEvent: "notified",
    callback: async (action) => {
        await sendNotification(action.params);
        action.end();
    }
});
```

### 一次登记若干次

`init()` 接受数组,并且 `name` 可能本身是一系列别名.

```javascript
Actions.init([
    { name: ["publish", "release"], endEvent: "published", callback: publish },
    { name: "archive", endEvent: "archived", callback: archive }
]);
```

注册是一等功:一个已经注册的名称没有被更改,所以第一个声称拥有名称的模块.

### 中止链条

```javascript
Actions.init({
    name: "validate",
    callback: (action) => {
        if (!action.form.checkValidity()) return action.abort();
        action.end();
    }
});
```

```html
<button actions="validate, save, reset">Submit</button>
```

* * *

## 行为说明

-   链由 `click`。没有本地点击目标的元素仍然可以从另一个链中驱动 `action(selector)`。 。 。 .
-   管道解决最近的 `[actions]` 祖先,所以图标和横跨在按钮内会触发按钮的链.
-   链跑时防止了默认点击行为 。 一种其 `action` 是一个真实的 URL 本地提交.
-   最终动作后,在含有真实动作 URL 的表格内有一个提交按钮提交表格,以及任何 `href`, (中文(简体) ), `target`,或 `state_to` 标注在元素上.
-   中止停止链条上所剩的每个动作,包括线索提交和链接行为.

* * *

## 通知

图书馆的所有更新都记录在我们 [变化](https://github.com/CoCreateJS/actions/blob/master/CHANGELOG.md) 财务报告和审定财务报表 [释放](https://github.com/CoCreateJS/actions/releases)。您也可以订阅电子邮件以发布和中断更改.

* * *

## 路线图

即将作出的改进包括:

-   有条件的行动和分支
-   平行行动小组
-   处理和重试错误
-   命名的链条可跨元素重复使用
-   链式执行的开发模式追踪

如果你对这个项目的未来方向有兴趣, 请看看我们的开放 [问题](https://github.com/CoCreateJS/actions/issues) 财务报告和审定财务报表 [拖动请求](https://github.com/CoCreateJS/actions/pulls)我们想听听你的反馈.

* * *

## 如何贡献

我们鼓励为我们的图书馆捐款(你甚至可能得分) [捐款](https://github.com/CoCreateJS/actions/blob/master/CONTRIBUTING.md) 详细指南.

我们希望这个图书馆由社区驱动, Coreate 领导。 我们需要你的帮助来实现这一目标。 为了帮助确保我们按正确的顺序建造正确的东西,我们请你们创造 [问题](https://github.com/CoCreateJS/actions/issues) 财务报告和审定财务报表 [拖动请求](https://github.com/CoCreateJS/actions/pulls) 或只是对现有问题进行投票或发表意见或提出请求.

我们感谢你的继续支持,谢谢!

* * *

## 关于

创造者行动由创造者开发者经验团队指导和支持.

请发电子邮件给开发者体验团队 [这里](mailto:develop@CoCreateJS.com) 如果有任何疑问.

创造行动由创造行动维护和资助. CoCreate的名称和标志是CoCreate,LLC的商标.

* * *

## 许可证

[《麻省理工学院许可证》](https://github.com/CoCreateJS/actions/blob/master/LICENSE)

## 常见问题

### @cocreate/actions 是什么？

链条多个组件执行 生成你想要的逻辑 当一个动作完成 下一个动作将开始 顺序持续到所有动作完成为止\. Vanilla javascript, 使用 HTML5 属性和/或 JavaScript AP 方便配置

### 如何安装 @cocreate/actions？

在项目目录运行 npm install @cocreate/actions，或使用 pnpm add / yarn add / bun add。

### @cocreate/actions 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/cocreate\_\_actions 是否存在。

### @cocreate/actions 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @cocreate/actions 可以商用吗？

@cocreate/actions 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cocreate/actions 的下载量有多少？

根据 npm 官方下载统计，@cocreate/actions 在 2026/10/10 – 2026/11/08 这 30 天内被下载 3,381 次，日均约 113 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cocreate/actions 还在维护吗？

最新版本 2\.0\.2 发布于 2026/11/07（3 天前）；至今共发布 181 个版本，其中过去 12 个月发布了 10 个；首次发布于 2021/01/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。