什么是Markup？

Markup 是一个 JavaScript 反应式模板系统，旨在简化使用 Web 标准构建 Web 用户界面的方式，并尽可能减少对本机 Web API 的增强。

它由 3 个主要 API 和附加实用程序组成，可进一步简化事情：

为什么我们需要另一个工具？

现代 Web 开发已经严重依赖于复杂的构建步骤、编译器配置和大量的框架依赖性。通常，您想要做的就是构建一个反应式接口，但最终您必须设置 Vite、Babel、Webpack、Svelte 或 React 才能获得基本的状态反应性。

Markup 的存在就是为了解决这个痛点。它弥合了原始、繁琐的 DOM 操作和重型组件框架之间的差距。通过利用现代 JavaScript 原语（特别是模板文字和函数），Markup 提供干净、声明性和精确的反应性无需任何构建步骤。

比较如何构建一个简单的计数器。

繁琐的原生 JavaScript 方式

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)

Markup 方式（简单且反应式）

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)

核心概念

1. 惰性求值函数

Markup 中的反应性由本机 JavaScript 功能提供支持。由于函数代表惰性求值，因此只要其底层状态发生变化，它们就可以运行。将您的值或模板包装在函数中是 Markup 的外科手术 DOM 更新背后的秘密。

2. 标记模板文字

Markup 使用标准 html 标记模板文字来表示 DOM。没有 JSX 解析器，没有专有模板语法，也没有虚拟 DOM。您编写的内容将直接解析为本机 HTML 模板并进行更新。

主要优点

开始使用 >>
编辑本文档