标记
反应 HTML 调温系统
Markup是一个JavaScript反应诱导系统,旨在简化您如何使用网络标准构建Web用户界面,并尽可能对本地网络API进行最小的增强.
它由3个主要的API组成,并配有额外的公用设施来进一步简化事情:
html: JavaScript 标记函数,允许您使用模板字符串代表 DOM ;state: 简单的状态跟踪 API,允许您任意定义被动数据;effect: 确定某些国家发生变化时需要发生的事情的直入道路;
动机
JavaScript,Web标准与API为您提供您需要的一切来构建任何您想要的网页项目. 经常令人痛苦的是DOM和反应,特别是当项目规模扩大或需要多人合作时.
Markup创建是为了给您所有所需的回放,同时使在JavaScript中定义您的HTML变得简单而无需引入新的语法,或者需要构建,或者需要向客户端运送一个大库.
从此:
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)
为此:
// 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)
怎么会这样?
标记用途 模板字节 财务报告和审定财务报表 职能 来做所有的事.
- 职能: JavaScript 函数对于懒惰的评价是完美的,这使得它对于反应是完美的. 标记在任何地方都使用功能,从内部,定义状态,效果,公用事业等.
- 模板字元:模板字面文字用于在JavaScript中代表HTML并避免重塑轮子. 其他的都按网络标准执行.
从字面上讲,其他的一切都是你是如何知道它是在普通的HTML,CSS和JavaScript中.
我们相信一个简单的方法来构建网络,没有框架,复杂项目设置,新语法的术语,所有词句最后都吐出HTML,CSS和JavaScript.
实例
这是一个按钮的简单例子,但你可以检查:
安装
npm install @beforesemicolon/markup
或者说
yarn add @beforesemicolon/markup
在浏览器中直接使用
这个库不需要建设步骤. CDN浏览器构建约为 13.9 KB
gzip (40.2 KB未压缩,从 dist/client.js) (中文(简体) ).
<!-- 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/[email protected]/dist/client.js"></script>
使用量
<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 :
const message = '<strong>hello</strong>'
html`<p>${message}</p>` // renders the markup characters as text
当信任或独立消毒标记必须刻意解析时,
使用明确的 unsafeHTML API (英语). 从不向它传递用户控制的内容 :
import { unsafeHTML } from '@beforesemicolon/markup'
const trustedIcon = unsafeHTML('<svg aria-hidden="true">...</svg>')
序列和事件安全
toString() 在模板根以及内部元素中从文本中跳出
保存 HTML 注释。 它拒绝可以逃避剧本,风格的内容,
或其他文本容器,当再次解析结果时。 对于JSON数据块,
摆脱每一个 < 打电话后 JSON.stringify数字 :
const json = JSON.stringify(data).replace(/</g, '\\u003c')
const output = html`<script type="application/json">
${json}
</script>`.toString()
脚本和样式内插仍然需要信任的代码; Markup 不 将JavaScript或CSS进行消毒. 边界检查忽略标签名外壳并应用 横跨命名空间,包括 SVG/MathML 节点,这些节点可能以 HTML 重排。 这些 保守的检查在外语名空间包装中也适用. 见 安全部门改革文件 用于序列化限制和迁移细节.
动态 on* 事件绑定接受一个函数或 [function, options]
插入,可选择被白空间所包围. 字符串处理器和混合
字符串/插件字符串被拒绝 。 使用 onclick="${handleClick}"
而不是构建内置的 JavaScript 。 明确观察、非本土
自定义元素属性, 如 one 仍然是普通财产的约束.
模板可以在自定义元素注册前构建; 定义
在挂起前的元素,以便识别这些属性。 已推迟
在评估或撰写任何约束之前,将拒绝混合事件的约束.
当挂载绑定器接收到新处理器时, Markup 更新一个稳定
授权监听器,而不是删除和添加 DOM 监听器 . once 实值
重新装入新装订, 而更改为 capture, (中文(简体) ), passive,或 signal
仍然取代本地注册,所以浏览器语义学保持完好无损.
AI和代理背景
llms.txt是简洁的, 软件包拥有的API合同和AI工具的编码指南.llms-full.txt包含 完整的解析文档和实例.
简约合同的来源是 docs/llms.txt, (中文(简体) ),
因此,它的行为和建议 与Markup一起被审查 和版本.
生态系统
- 网络组件 添加反应 本地自定义元素和再出口 Markup.
- 路由器 添加 URL 导航, 路由 在Web 组件上方的元素、守护和路由数据.
- 输入 添加区域范围、消息和 在Web组件上进行国际化格式化.
路由器和Intl是互补的,可以一起使用. 标记仍然是 在所有软件包中共享渲染和反应基础.