# @beforesemicolon/markup 中文文档

规范地址：https://npmcn.com/package/%40beforesemicolon/markup/

版本：1\.21\.0
npm 元数据更新时间：2026-11-01T11:36:53.729Z
中文译文更新时间：2026-11-07T20:44:13.590Z
软件包许可：BSD-3-Clause

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

原始 npm 页面：https://www.npmjs.com/package/%40beforesemicolon/markup
原文对照：https://npmcn.com/package/%40beforesemicolon/markup/?lang=original
项目主页：https://github.com/beforesemicolon/markup#readme
源码仓库：https://github.com/beforesemicolon/markup

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

- 包体积（解压后）：174 kB，96 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.13\.0
- 运行依赖：0 个
- 首次发布：2023-11-05T04:07:20.115Z
- 最新版本发布：2026-11-01T11:36:53.568Z
- 近 30 天下载量：3567（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：120（近 12 个月 16 个）

## 中文简介

反应 HTML 调温系统

## 安装

```sh
npm install @beforesemicolon/markup
```

也可以使用：`pnpm add @beforesemicolon/markup`、`yarn add @beforesemicolon/markup`、`bun add @beforesemicolon/markup`

## README

# 标记

反应 HTML 调温系统

[![Static Badge](https://img.shields.io/badge/Website-blue)](https://markup.beforesemicolon.com/) [![MD Docs](https://img.shields.io/badge/MD_docs-blue)](https://github.com/beforesemicolon/markup/blob/main/docs/index.md) [![npm](https://img.shields.io/npm/v/%40beforesemicolon%2Fmarkup)](https://www.npmjs.com/package/@beforesemicolon/markup) ![npm](https://img.shields.io/npm/l/%40beforesemicolon%2Fmarkup) [![Test](https://github.com/beforesemicolon/html/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/beforesemicolon/html/actions/workflows/test.yml)

Markup是一个JavaScript反应诱导系统,旨在简化您如何使用网络标准构建Web用户界面,并尽可能对本地网络API进行最小的增强.

它由3个主要的API组成,并配有额外的公用设施来进一步简化事情:

-   `html`: JavaScript 标记函数,允许您使用模板字符串代表 DOM ;
-   `state`: 简单的状态跟踪 API,允许您任意定义被动数据;
-   `effect`: 确定某些国家发生变化时需要发生的事情的直入道路;

### 动机

JavaScript,Web标准与API为您提供您需要的一切来构建任何您想要的网页项目. 经常令人痛苦的是DOM和反应,特别是当项目规模扩大或需要多人合作时.

Markup创建是为了给您所有所需的回放,同时使在JavaScript中定义您的HTML变得简单而无需引入新的语法,或者需要构建,或者需要向客户端运送一个大库.

从此:

```javascript
let count = 0

// tedious DOM definition and manipulation
const p = document.createElement('p')
p.textContent = `count: ${count}`

const btn = document.createElement('button')
btn.type = 'button'
btn.textContent = 'count up'

// limiting event driven
btn.addEventListener('onclick', () => {
    count += 1
    p.textContent = `count: ${count}`

    if (count > 10) {
        alert('You counted passed 10!')
    }
})

document.body.append(p, btn)
```

为此:

```javascript
// reactive data
const [count, updateCount] = state(0)

// data driven
effect(() => {
    if (count() > 10) {
        alert('You counted passed 10!')
    }
})

const countUp = () => {
    updateCount((prev) => prev + 1)
}

// reactive DOM/templates
html`
    <p>count: ${count}</p>
    <button type="button" onclick="${countUp}">count up</button>
`.render(document.body)
```

### 怎么会这样?

标记用途 [模板字节](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) 财务报告和审定财务报表 [职能](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) 来做所有的事.

-   **职能**: JavaScript 函数对于懒惰的评价是完美的,这使得它对于反应是完美的. 标记在任何地方都使用功能,从内部,定义状态,效果,公用事业等.
-   **模板字元**:模板字面文字用于在JavaScript中代表HTML并避免重塑轮子. 其他的都按网络标准执行.

从字面上讲,其他的一切都是你是如何知道它是在普通的HTML,CSS和JavaScript中.

我们相信一个简单的方法来构建网络,没有框架,复杂项目设置,新语法的术语,所有词句最后都吐出HTML,CSS和JavaScript.

#### 实例

这是一个按钮的简单例子,但你可以检查:

-   [模块待办事宜 App](https://stackblitz.com/edit/web-platform-lvonxr?file=app.js)
-   [一个简单的反程序](https://stackblitz.com/edit/web-platform-adqrrf?file=app.js)
-   [简单时间应用](https://stackblitz.com/edit/web-platform-bwoxex?file=button.js)

## 安装

```
npm install @beforesemicolon/markup
```

或者说

```
yarn add @beforesemicolon/markup
```

## 在浏览器中直接使用

这个库不需要建设步骤. CDN浏览器构建约为 13.9 KB gzip (40.2 KB未压缩,从 `dist/client.js`) (中文(简体) ).

```html
<!-- Grab the latest version -->
<script src="https://unpkg.com/@beforesemicolon/markup/dist/client.js"></script>

<!-- Or a specific version -->
<script src="https://unpkg.com/@beforesemicolon/markup@0.3.0/dist/client.js"></script>
```

### 使用量

```html
<div id="app"></div>

<script>
    const { html, state, effect } = BFS.MARKUP

    html`<h1>Hello World</h1>`.render(document.getElementById('app'))
</script>
```

`BFS.MARKUP` 披露与无害环境管理切入点相同的运行时间API,包括: 帮助者如 `visible` 和可信任的标记公用事业,例如: `unsafeHTML`。 。 。 .

动态值属于 `html` 插图 标记应用这些值 不解析为 HTML :

```javascript
const message = '<strong>hello</strong>'
html`<p>${message}</p>` // renders the markup characters as text
```

当信任或独立消毒标记必须刻意解析时, 使用明确的 `unsafeHTML` API (英语). 从不向它传递用户控制的内容 :

```javascript
import { unsafeHTML } from '@beforesemicolon/markup'

const trustedIcon = unsafeHTML('<svg aria-hidden="true">...</svg>')
```

### 序列和事件安全

`toString()` 在模板根以及内部元素中从文本中跳出 保存 HTML 注释。 它拒绝可以逃避剧本,风格的内容, 或其他文本容器,当再次解析结果时。 对于JSON数据块, 摆脱每一个 `<` 打电话后 `JSON.stringify`数字 :

```javascript
const json = JSON.stringify(data).replace(/</g, '\\u003c')
const output = html`<script type="application/json">
    ${json}
</script>`.toString()
```

脚本和样式内插仍然需要信任的代码; Markup 不 将JavaScript或CSS进行消毒. 边界检查忽略标签名外壳并应用 横跨命名空间,包括 SVG/MathML 节点,这些节点可能以 HTML 重排。 这些 保守的检查在外语名空间包装中也适用. 见 [安全部门改革文件](https://markup.beforesemicolon.com/documentation/capabilities/server-side-rendering) 用于序列化限制和迁移细节.

动态 `on*` 事件绑定接受一个函数或 `[function, options]` 插入,可选择被白空间所包围. 字符串处理器和混合 字符串/插件字符串被拒绝 。 使用 `onclick="${handleClick}"` 而不是构建内置的 JavaScript 。 明确观察、非本土 自定义元素属性, 如 `one` 仍然是普通财产的约束. 模板可以在自定义元素注册前构建; 定义 在挂起前的元素,以便识别这些属性。 已推迟 在评估或撰写任何约束之前,将拒绝混合事件的约束. 当挂载绑定器接收到新处理器时, Markup 更新一个稳定 授权监听器,而不是删除和添加 DOM 监听器 . `once` 实值 重新装入新装订, 而更改为 `capture`, (中文(简体) ), `passive`,或 `signal` 仍然取代本地注册,所以浏览器语义学保持完好无损.

## AI和代理背景

-   [`llms.txt`](https://markup.beforesemicolon.com/llms.txt) 是简洁的, 软件包拥有的API合同和AI工具的编码指南.
-   [`llms-full.txt`](https://markup.beforesemicolon.com/llms-full.txt) 包含 完整的解析文档和实例.

简约合同的来源是 [`docs/llms.txt`](https://npmcn.com/package/%40beforesemicolon/markup/docs/llms.txt), (中文(简体) ), 因此,它的行为和建议 与Markup一起被审查 和版本.

## 生态系统

-   [网络组件](https://web-component.beforesemicolon.com/) 添加反应 本地自定义元素和再出口 Markup.
-   [路由器](https://router.beforesemicolon.com/) 添加 URL 导航, 路由 在Web 组件上方的元素、守护和路由数据.
-   [输入](https://intl.beforesemicolon.com/) 添加区域范围、消息和 在Web组件上进行国际化格式化.

路由器和Intl是互补的,可以一起使用. 标记仍然是 在所有软件包中共享渲染和反应基础.

## 社区

-   [贡献准则](https://npmcn.com/package/%40beforesemicolon/markup/CONTRIBUTING.md)
-   [行为守则](https://npmcn.com/package/%40beforesemicolon/markup/CODE_OF_CONDUCT.md)
-   [安全政策](https://npmcn.com/package/%40beforesemicolon/markup/SECURITY.md)
-   [BSD 3- 标签许可证](https://npmcn.com/package/%40beforesemicolon/markup/LICENSE)

## 常见问题

### @beforesemicolon/markup 是什么？

反应 HTML 调温系统

### 如何安装 @beforesemicolon/markup？

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

### @beforesemicolon/markup 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @beforesemicolon/markup 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @beforesemicolon/markup 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.13\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @beforesemicolon/markup 可以商用吗？

@beforesemicolon/markup 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @beforesemicolon/markup 的下载量有多少？

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

### @beforesemicolon/markup 还在维护吗？

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