Web 框架的替代方案
点击上方 前端Q，关注公众号
回复加群，加入前端Q技术交流群
上周，我们从框架试图解决哪些核心问题的角度出发，考察了使用框架的不同好处和代价，重点放在声明性编程、数据绑定、反应性、列表和条件。今天，我们来看看能否在 Web 平台上找到替代方案。
在探索没有框架的生活中，一个看似不可避免的结果是，推出自己的框架，以进行反应性数据绑定。因为之前已经试过了，也见识到了这种做法的代价有多大，所以我决定在这次探索中，遵循一条原则：不要推出自己的框架，而要看看能否直接利用 Web 平台，这样就能降低对框架的需求。如果你打算推出自己的框架，那么需要考虑的是，本文没有涉及一系列的成本。
Web 平台已经提供了一个开箱即用的声明性编程机制：HTML 和 CSS。这种机制是成熟的、经过良好测试的、流行的、广泛使用的，并且有文档记录。然而，它并没有提供明确的数据绑定、条件渲染和列表同步的内置概念，并且反应性是一个细微的细节，散布于多个平台的特性之中。
在浏览常见框架的文档后，我就直接找到了第一部分中提及的特性。我在阅读诸如 MDN 之类的 Web 平台的文档时，会发现很多工作方式都是杂乱无章的，没有数据绑定，没有列表同步，也没有反应性的结论性表述。我会试图为在 Web 平台上解决这些问题提供指导，而不是用框架（也就是说，走普通路线）。
让我们回到错误标签的示例上。在 ReactJS 和 SolidJS 中，我们会创建声明性代码，并将其转化为命令性代码，向 DOM 中加入标签或者删除标签。在 Svelte 中，生成这些代码。
但是，如果我们根本没有这些代码，而是用 CSS 来隐藏和显示错误标签呢？
<style>label.error { display: none; }.app.has-error label.error {display: block; }style><label class="error">Messagelabel><script>app.classList.toggle('has-error', true);script>
在这种情况下，反应性是在浏览器中处理的：应用的类变化会传播到它的后代，直到浏览器的内部机制决定是否渲染标签。
这种技术有几个具有以下优点：
包大小为零。
无构建步骤。
变化传播经过优化和良好的测试，在本地浏览器代码中，避免了不必要的昂贵的 DOM 操作，如追加和删除。
选择器是稳定的。在这种情况下，你可以指望标签元素的存在。你可以对它应用动画，而不必依赖复杂的结构，如“过渡组”。你可以在 JavaScript 中保持对它的引用。
如果标签被显示或隐藏，你可以在开发工具的样式面板中看到原因，它显示了整个级联，即最终导致标签可见（或隐藏）的规则链。
即便你阅读了本文，并且选择继续使用框架工作，但是要让 DOM 保持稳定，使用 CSS 的方式发生改变，这个想法还是很强大的。想想看，这对你来说有什么用处。
在大量使用 JavaScript 的单页应用（single-page application，SPA）时代到来之前，表单是创建包含用户输入的 Web 应用的主要方式。传统上，用户填写表格并点击“提交”按钮，服务器端的代码就会处理响应。表单是数据绑定和互动性的多页面应用版本。难怪具有 input 和 output 基本名称的 HTML 元素是表单元素。
表单 API 应用范围广，历史悠久，因此它具有一些潜在优势，可以帮助人们解决在传统上认为不能通过表单来处理的问题。
表单可以通过名称访问（使用 document.forms），每个表单元素可以通过其名称访问（使用 form.elements）。此外，与一个元素相关的表单也可以被访问（使用 form 属性）。这不仅包括 input 元素，还包括其他表单元素，如 output、textarea 和 fieldset，这允许在一个树中对元素进行嵌套访问。
在上一节的错误标签示例中，我们展示了如何反应性地显示和隐藏错误信息。这就是我们在 React 中更新错误信息文本的方法（在 SolidJS 中也类似）：
const [errorMessage, setErrorMessage] = useState(null);return <label className="error">{errorMessage}label>
当我们有一个稳定的 DOM 和稳定的树形表单和表单元素时，我们可以做以下事情：
<form name="contactForm"><fieldset name="email"><output name="error">output>fieldset>form><script>function setErrorMessage(message) {document.forms.contactForm.elements.email.elements.error.value = message;}script>
这个原始格式看起来相当冗长，但是它也非常稳定、直接和高效。
通常，当我们建立一个 SPA 时，我们有某种类似 JSON 的 API，我们用它来更新我们的服务器，或我们使用的任何模型。
这将是一个熟悉的示例（为了可读性，用 Typescript 编写）：
interface Contact {id: string;name: string;email: string;subscriber: boolean;}function updateContact(contact: Contact) { … }
在框架代码中，通过选择输入元素并逐段构建对象来生成这个联系对象是很常见的。通过对表单的正确使用，有一个简洁的替代方案。
<form name="contactForm"><input name="id" type="hidden" value="136" /><input name="email" type="email"/><input name="name" type="string" /><input name="subscriber" type="checkbox" />form><script>updateContact(Object.fromEntries(new FormData(document.forms.contactForm));script>
通过使用隐藏的输入和有用的 FormData 类，我们可以在 DOM 输入和 JavaScript 函数之间无缝转换数值。
通过结合表单的高性能选择器稳定性和 CSS 反应性，我们可以实现更复杂的 UI 逻辑：
<form name="contactForm"><input name="showErrors" type="checkbox" hidden /><fieldset name="names"><input name="name" /><output name="error">output>fieldset><fieldset name="emails"><input name="email" /><output name="error">output>fieldset>form><script>function setErrorMessage(section, message) {document.forms.contactForm.elements[section].elements.error.value = message;}function setShowErrors(show) {document.forms.contactForm.elements.showErrors.checked = show;}script><style>input[name="showErrors"]:not(:checked) ~ * output[name="error"] {display: none;}style>
请注意，在这个示例中并没有使用类：我们从表单的数据中开发 DOM 的行为和风格，而不是通过手动更改元素的类。
我不喜欢过度使用 CSS 类作为 JavaScript 选择器。我认为它们应该被用来将风格相似的元素组合在一起，而不是作为改变组件风格的一种万能机制。
与级联一样，表单是内置于 Web 平台的，其大部分特性是稳定的。这意味着更少的 JavaScript，更少的框架版本不匹配，而且没有“构建”。
默认情况下，表单是可访问的。如果你的应用程序正确地使用表单，就不需要 ARIA 属性、“辅助插件”和最后一分钟的审核。表单适合于键盘导航、屏幕阅读器和其他辅助技术。
表单带有内置的输入验证特性：通过 regex 模式进行验证，对 CSS 中无效和有效表单进行反应性验证，处理必需表单和可选表单，等等。为了享受这些特性，你不需要看起来像表单的东西。
表单的 submit 事件是非常有用的。例如，它允许在没有提交按钮的情况下捕获“Enter”键，并允许通过 submitter 属性来区分多个提交按钮（正如我们将在后面的 TODO 示例中看到的）。
默认情况下，元素与它们所包含的表单相关联，但也可以使用 form 属性与文档中的任何其他表单相关联。这使我们能够在不对 DOM 树产生依赖的情况下进行表单关联。
使用稳定的选择器有助于实现 UI 测试自动化。我们可以使用嵌套的 API 作为一种稳定的方式来钩住 DOM，而不管它的布局和层次结构如何。form > (fieldsets) > element 的层次结构可以作为你的文档的互动骨架。
框架提供了它们自己表达可观察列表的方式。现在很多开发者也依赖提供这种功能的非框架库，如 MobX。
通用的可观察列表的主要问题在于它们是通用的。这以性能为代价增加了便利性，而且还需要特殊的开发者工具来调试那些库在后台做的复杂动作。
使用这些库并理解它们的作用是可以的，无论选择什么样的 UI 框架，它们都是有用的，但使用替代方案可能不会更复杂，而且可以避免一些在你试图推出自己的模型时产生的陷阱。
CHACHA——也被称为变化通道（Changes Channel）——是一个双向流，其目的是通知意图方向和观察方向的变化。
在意图方向上，UI 将用户意图的变化通知给模型。
在观察方向上，模型将对模型所做的改变通知给 UI，而这些改变需要显示给用户。
这也许是一个有趣的名字，但它不是一个复杂或新颖的模式。双向流在 Web 和软件中随处可见（例如，MessagePort）。在这种情况下，我们正在创建一个双向流，它有一个特殊的目的：向 UI 报告实际的模型变化，并向模型报告意图。
CHACHA 的接口通常可以从应用的规范中导出，而不需要任何 UI 代码。
例如，一个允许你添加和删除联系人并从服务器加载初始列表的应用程序（带有刷新选项）可以有一个 CHACHA，它看起来像这样：
interface Contact {id: string;name: string;email: string;}// "Observe" Directioninterface ContactListModelObserver {onAdd(contact: Contact);onRemove(contact: Contact);onUpdate(contact: Contact);}// "Intent" Directioninterface ContactListModel {add(contact: Contact);remove(contact: Contact);reloadFromServer();}
请注意，这两个接口中的所有函数都是无效的，只接收普通对象。这是故意的。CHACHA 被构建成一个通道，有两个端口来发送消息，这使得它可以在 EventSource、HTML MessageChannel、服务工作者或任何其他协议中工作。
CHACHA 的好处是，它们很容易测试。你发送动作并期待对观察者的特定调用作为回报。
HTML 模板是存在于 DOM 中的特殊元素，但不会被显示。它们的目的是生成动态元素。
当我们使用 template 元素时，我们可以避免在 JavaScript 中创建元素和填充它们的所有模板代码。
下面将使用 template 为列表添加名称：
<ul id="names"><template><li><label class="name" />li>template>ul><script>function addName(name) {const list = document.querySelector('#names');const item = list.querySelector('template').content.cloneNode(true).firstElementChild;item.querySelector('label').innerText = name;list.appendChild(item);}script>
通过使用列表项的 template 元素，我们可以在原始 HTML 中看到列表项——它不是用 JSX 或其他语言“渲染”的。你的 HTML 文件现在包含了应用程序的所有 HTML——静态部分是渲染的 DOM 的一部分，而动态部分在模板中表达，准备在时机成熟时被克隆并追加到文档中。
TodoMVC 是一个 TODO 列表的应用规范，用于展示不同的框架。TodoMVC 模板带有现成的 HTML 和 CSS，帮助你专注于框架。
你可以在 GitHub 资源库中使用这个结果，并且可以获得完整的源代码。
我们将从规范开始，并使用它来构建 CHACHA 接口：
interface Task {title: string;completed: boolean;}interface TaskModelObserver {onAdd(key: number, value: Task);onUpdate(key: number, value: Task);onRemove(key: number);onCountChange(count: {active: number, completed: number});}interface TaskModel {constructor(observer: TaskModelObserver);createTask(task: Task): void;updateTask(key: number, task: Task): void;deleteTask(key: number): void;clearCompleted(): void;markAll(completed: boolean): void;}
任务模型中的函数直接来自规范和用户可以做的事情（清除已完成的任务，将所有任务标记为已完成或正在进行，获得正在进行和已完成的计数）。
请注意，它遵循 CHACHA 的准则。
有两个界面，一个是动作的，一个是观察的。
所有的参数类型都是基元或普通对象（很容易翻译成 JSON）。
所有的函数都返回 void。
TodoMVC 的实现使用 localStorage 作为后端。
该模型非常简单，与关于 UI 框架的讨论没有多大关系。它在需要的时候保存到 localStorage，并在某些情况发生变化时向观察者触发回调，这些变化可能是用户操作的结果，也可能是模型第一次从 localStorage 加载的时候。
接下来，我将采用 TodoMVC 模板，并将其修改为面向表单的模板：表单的层次结构，输入和输出元素代表可以用 JavaScript 改变的数据。
我怎么知道某个东西是否需要成为表单元素？作为一个经验法则，如果它与模型中的数据绑定，那么它就应该是一个表单元素。
完整的 HTML 文件是可用的，但这里是其主要部分：
<section class="todoapp"><header class="header"><h1>todosh1><form name="newTask"><input name="title" type="text" placeholder="What needs to be done?" autofocus>form>header><main><form id="main">form><input type="hidden" name="filter" form="main" /><input type="hidden" name="completedCount" form="main" /><input type="hidden" name="totalCount" form="main" /><input name="toggleAll" type="checkbox" form="main" /><ul class="todo-list"><template><form class="task"><li><input name="completed" type="checkbox" checked><input name="title" readonly /><input type="submit" hidden name="save" /><button name="destroy">Xbutton>li>form>template>ul>main><footer><output form="main" name="activeCount">0output><nav><a name="/" href="#/">Alla><a name="/active" href="#/active">Activea><a name="/completed" href="#/completed">Completeda>nav><input form="main" type="button" name="clearCompleted" value="Clear completed" />footer>section>
此 HTML 包括以下内容：
我们有一个 main 表单，其中有所有的全局输入和按钮，还有一个新的表单用于创建一个新任务。请注意，我们使用 form 属性将元素与表单联系起来，以避免表单中的元素嵌套。
template 元素代表一个列表项，它的根元素是另一个表单，代表与特定任务相关的互动数据。当任务被添加时，这个表单将通过克隆模板的内容而被重复。
隐藏的输入表示不直接显示的数据，但用于样式设计和选择。
注意这个 DOM 是如何简洁的。它没有在其元素中散布类。它包括应用程序所需的所有元素，以合理的层次结构排列。多亏了隐藏的输入元素，你已经可以很好地感觉到以后文档中可能会有什么变化。
这个 HTML 不知道它将如何被样式化，也不知道它到底与什么数据绑定。让 CSS 和 JavaScript 为你的 HTML 工作，而不是让你的 HTML 为某个特定的造型机制工作。这将使你在改变设计时变得更加容易。
现在我们在 CSS 中已经有了大部分的反应性，在模型中也有了列表处理，剩下的就是控制器的代码了，也就是把所有的东西固定在一起的“胶带”。在这个小程序中，控制器的 JavaScript 大约是 40 行。
下面是一个版本，每个部分都有解释：
import TaskListModel from './model.js';const model = new TaskListModel(new class {
上面，我们创建了一个新模型。
onAdd(key, value) {const newItem = document.querySelector('.todo-list template').content.cloneNode(true).firstElementChild;newItem.name = `task-${key}`;const save = () => model.updateTask(key, Object.fromEntries(new FormData(newItem)));newItem.elements.completed.addEventListener('change', save);newItem.addEventListener('submit', save);newItem.elements.title.addEventListener('dblclick', ({target}) => target.removeAttribute('readonly'));newItem.elements.title.addEventListener('blur', ({target}) => target.setAttribute('readonly', ''));newItem.elements.destroy.addEventListener('click', () => model.deleteTask(key));this.onUpdate(key, value, newItem);document.querySelector('.todo-list').appendChild(newItem);}
当一个项目被添加到模型中，我们在用 UI 中创建其相应的列表项。
在上面的代码段中，我们克隆了项目 template 的内容，为一个特定的项目分配了事件监听器，并将新的项目添加到列表中。
注意，这个函数，以及 onUpdate、onRemove 和 onCountChange，都是要从模型中调用的回调。
onUpdate(key, {title, completed}, form = document.forms[`task-${key}`]) {form.elements.completed.checked = !!completed;form.elements.title.value = title;form.elements.title.blur();}
当一个项目被更新时，我们设置它的 completed 和 title 值，然后 blur（退出编辑模式）。
onRemove(key) { document.forms[`task-${key}`].remove(); }当从模型中移除一个项时，我们将从视图中移除其对应的列表项。
onCountChange({active, completed}) {document.forms.main.elements.completedCount.value = completed;document.forms.main.elements.toggleAll.checked = active === 0;document.forms.main.elements.totalCount.value = active + completed;document.forms.main.elements.activeCount.innerHTML = `${active} item${active === 1 ? '' : 's'} left`;}
在上面的代码中，当完成的或活动的项目数量发生变化时，我们设置适当的输入来触发 CSS 反应，并格式化显示计数的输出。
const updateFilter = () => filter.value = location.hash.substr(2);window.addEventListener('hashchange', updateFilter);window.addEventListener('load', updateFilter);
而我们从 hash 片段中更新过滤器（以及在启动时）。我们在上面所做的只是设置一个表单元素的值：CSS 处理其余部分。
document.querySelector('.todoapp').addEventListener('submit', e => e.preventDefault(), {capture: true});在这里，我们确保当表单被提交时我们不会重新加载页面。这一行代码把这个应用程序变成了一个 SPA。
document.forms.newTask.addEventListener('submit', ({target: {elements: {title}}}) =>model.createTask({title: title.value}));document.forms.main.elements.toggleAll.addEventListener('change', ({target: {checked}})=>model.markAll(checked));document.forms.main.elements.clearCompleted.addEventListener('click', () =>model.clearCompleted());
而这就处理了主要的操作（创建、标记所有、清除完成）。
完整的 CSS 文件可以供你查看。
CSS 处理了规范中的很多要求（做了一些有利于无障碍的修正）。我们来看看一些示例。
根据规范，“X”（destroy）按钮只在悬停时显示。我还添加了一个辅助位，使它在任务被聚焦时可见。
.task:not(:hover, :focus-within) button[name="destroy"] { opacity: 0 }当 filter 链接是当前链接时，它会得到一个红色边框：
.todoapp input[name="filter"][value=""] ~ footer a[href$="#/"] 。nav a:target {border-color: #CE4646;}
注意，我们可以使用链接元素的 href 作为部分属性选择器 -- 不需要 JavaScript 来检查当前的过滤器，并在适当的元素上设置一个 selected 类。
我们还使用了 :target 选择器，这让我们不必担心是否要添加过滤器。
title 输入的视图和编辑样式根据其只读模式而改变：
.task input[name="title"]:read-only {…}.task input[name="title"]:not(:read-only) {…}
过滤（即只显示活动的和已完成的任务）是用选择器完成的：
input[name="filter"][value="active"] ~ * .task:is(input[name="completed"]:checked, input[name="completed"]:checked ~ *),input[name="filter"][value="completed"] ~ * .task:is(input[name="completed"]:not(:checked), input[name="completed"]:not(:checked) ~ *) {display: none;}
上面的代码可能看起来有点冗长，用 Sass 这样的 CSS 预处理程序可能更容易阅读。但它所做的事情很简单：如果过滤器处于 active 状态，而 completed 的复选框被选中，或者相反，那么我们就会隐藏复选框及其同级。
我选择在 CSS 中实现这个简单的过滤器，以显示它能走多远，但如果它开始变得棘手，那么把它移到模型中是完全有意义的。
我相信，框架为实现复杂的任务提供了方便的方法，而且它们有超越技术的好处，比如使一组开发人员向特定的风格和模式看齐。Web 平台提供了许多选择，而采用一个框架可以让每个人至少部分地在这些选择上达成一致，这是有价值的。另外，声明式编程的优雅性也是值得称道的，而且组件化的大特点也不是我在这篇文章中所处理的。
但请记住，替代模式是存在的，通常成本较低，而且不一定需要较少的开发者经验。允许自己对这些模式感到好奇，即使你决定在使用框架时从它们中挑选。
保持 DOM 树的稳定。它启动了一个连锁反应，使事情变得简单。
如果可以的话，依靠 CSS 的反应性而不是 JavaScript。
使用表单元素作为表示互动数据的主要方式。
使用 HTML template 元素而不是 JavaScript 生成的模板。
使用双向的变化流作为模型的接口。
作者简介：
Noam Rosenthal，Web 平台顾问，WebKit 和 Chromium 的贡献者，标准编辑，也是经验丰富的 Web 开发者。他的工作主要是在 Web 开发和浏览器 / 标准开发之间架起桥梁。
原文链接：
https://www.smashingmagazine.com/2022/02/web-frameworks-guide-part2/
往期推荐
最后
欢迎加我微信，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...
