marko-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Marko Best Practices

Marko最佳实践

Marko is a modern UI framework for building web applications. It features a declarative component-based syntax, fine-grained reactivity, and a highly optimized compiler. Marko is designed for both server-rendered and interactive client-side experiences with a focus on streaming, partial hydration, and shipping the smallest possible amount of JavaScript to each page.

Marko是一款用于构建Web应用的现代UI框架。它具备声明式的基于组件的语法、细粒度响应式能力，以及高度优化的编译器。Marko专为服务端渲染和交互式客户端体验设计，重点关注流式传输、partial hydration，以及为每个页面传输最小体积的JavaScript。

Marko Documentation

Marko文档

The Marko documentation is the source of truth for all Marko-related information. Always refer to the official docs for information about syntax and behavior. Marko changes over time, so prefer fetching current docs over relying on training data.

The docs index lists every available page with its URL and a short description.

All Marko docs pages can be fetched as markdown by appending

.md

to the URL (https://markojs.com/docs/introduction/getting-started.md)

Marko官方文档是所有Marko相关信息的权威来源。关于语法和行为的信息，请始终参考官方文档。Marko会随时间迭代更新，因此建议优先查阅当前最新文档，而非依赖训练数据。

文档索引列出了所有可用页面的URL及简短描述。

所有Marko文档页面均可通过在URL后追加

.md

的方式获取Markdown格式内容（例如：https://markojs.com/docs/introduction/getting-started.md）

Marko 6 Syntax

Marko 6语法

Documentation and this skill target Marko 6. Do not use Marko 5 syntax.

本技能及相关文档针对Marko 6。请勿使用Marko 5语法。

Checklist for New or Edited .marko Files

新建或编辑.marko文件的检查清单

Uses Marko 6 syntax only (no scriptlets, old event syntax, or Marko 5 blocks).
```
<script>
```
is never used when state (
```
<let>
```
or
```
<const>
```
) could accomplish the same behavior.
Event handlers use function form:
```
onClick() { ... }
```
or a reference, not string names.
Component stays small and readable; consider splitting large templates.
No unnecessary client-side JS; prefer built-in browser APIs and HTML/CSS features over scripts.

仅使用Marko 6语法（不使用scriptlets、旧版事件语法或Marko 5的blocks）。
当使用状态（
```
<let>
```
或
```
<const>
```
）即可实现相同行为时，绝不使用
```
<script>
```
标签。
事件处理器采用函数形式：
```
onClick() { ... }
```
或引用形式，而非字符串名称。
组件保持小巧且可读性强；若模板过大，考虑拆分。
避免不必要的客户端JS；优先使用浏览器内置API和HTML/CSS特性，而非脚本。