一文了解 Web 框架的替代方案

推出自己的框架？

普通的选择

Web 平台已经提供了一个开箱即用的声明性编程机制：HTML 和 CSS。这种机制是成熟的、经过良好测试的、流行的、广泛使用的，并且有文档记录。然而，它并没有提供明确的数据绑定、条件渲染和列表同步的内置概念，并且反应性是一个细微的细节，散布于多个平台的特性之中。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了上城免费建站欢迎大家使用！

在浏览常见框架的文档后，我就直接找到了第一部分中提及的特性。我在阅读诸如 MDN 之类的 Web 平台的文档时，会发现很多工作方式都是杂乱无章的，没有数据绑定，没有列表同步，也没有反应性的结论性表述。我会试图为在 Web 平台上解决这些问题提供指导，而不是用框架（也就是说，走普通路线）。

具有稳定的 Dom 树和级联的反应性

让我们回到错误标签的示例上。在 ReactJS 和 SolidJS 中，我们会创建声明性代码，并将其转化为命令性代码，向 DOM 中加入标签或者删除标签。在 Svelte 中，生成这些代码。

但是，如果我们根本没有这些代码，而是用 CSS 来隐藏和显示错误标签呢？


Message

在这种情况下，反应性是在浏览器中处理的：应用的类变化会传播到它的后代，直到浏览器的内部机制决定是否渲染标签。

这种技术有几个具有以下优点：

包大小为零。
无构建步骤。
变化传播经过优化和良好的测试，在本地浏览器代码中，避免了不必要的昂贵的 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 {errorMessage}

当我们有一个稳定的 DOM 和稳定的树形表单和表单元素时，我们可以做以下事情：

这个原始格式看起来相当冗长，但是它也非常稳定、直接和高效。

用于输入的表单

通常，当我们建立一个 SPA 时，我们有某种类似 JSON 的 API，我们用它来更新我们的服务器，或我们使用的任何模型。

这将是一个熟悉的示例（为了可读性，用 Typescript 编写）：

interface Contact {
  id: string;
  name: string;
  email: string;
  subscriber: boolean;
}


function updateContact(contact: Contact) { … }

在框架代码中，通过选择输入元素并逐段构建对象来生成这个联系对象是很常见的。通过对表单的正确使用，有一个简洁的替代方案。

通过使用隐藏的输入和有用的 FormData 类，我们可以在 DOM 输入和 JavaScript 函数之间无缝转换数值。

结合表单和反应性

通过结合表单的高性能选择器稳定性和 CSS 反应性，我们可以实现更复杂的 UI 逻辑：

请注意，在这个示例中并没有使用类：我们从表单的数据中开发 DOM 的行为和风格，而不是通过手动更改元素的类。

我不喜欢过度使用 CSS 类作为 JavaScript 选择器。我认为它们应该被用来将风格相似的元素组合在一起，而不是作为改变组件风格的一种万能机制。

表单的优点

与级联一样，表单是内置于 Web 平台的，其大部分特性是稳定的。这意味着更少的 JavaScript，更少的框架版本不匹配，而且没有“构建”。
默认情况下，表单是可访问的。如果你的应用程序正确地使用表单，就不需要 ARIA 属性、“辅助插件”和最后一分钟的审核。表单适合于键盘导航、屏幕阅读器和其他辅助技术。
表单带有内置的输入验证特性：通过 regex 模式进行验证，对 CSS 中无效和有效表单进行反应性验证，处理必需表单和可选表单，等等。为了享受这些特性，你不需要看起来像表单的东西。
表单的 submit 事件是非常有用的。例如，它允许在没有提交按钮的情况下捕获“Enter”键，并允许通过 submitter 属性来区分多个提交按钮（正如我们将在后面的 TODO 示例中看到的）。
默认情况下，元素与它们所包含的表单相关联，但也可以使用 form 属性与文档中的任何其他表单相关联。这使我们能够在不对 DOM 树产生依赖的情况下进行表单关联。
使用稳定的选择器有助于实现 UI 测试自动化。我们可以使用嵌套的 API 作为一种稳定的方式来钩住 DOM，而不管它的布局和层次结构如何。form > (fieldsets) > element 的层次结构可以作为你的文档的互动骨架。

CHACHA 和 HTML 模板

框架提供了它们自己表达可观察列表的方式。现在很多开发者也依赖提供这种功能的非框架库，如 MobX。

通用的可观察列表的主要问题在于它们是通用的。这以性能为代价增加了便利性，而且还需要特殊的开发者工具来调试那些库在后台做的复杂动作。

使用这些库并理解它们的作用是可以的，无论选择什么样的 UI 框架，它们都是有用的，但使用替代方案可能不会更复杂，而且可以避免一些在你试图推出自己的模型时产生的陷阱。

变化通道（或 CHACHA）

CHACHA——也被称为变化通道（Changes Channel）——是一个双向流，其目的是通知意图方向和观察方向的变化。

在意图方向上，UI 将用户意图的变化通知给模型。
在观察方向上，模型将对模型所做的改变通知给 UI，而这些改变需要显示给用户。

这也许是一个有趣的名字，但它不是一个复杂或新颖的模式。双向流在 Web 和软件中随处可见（例如，MessagePort）。在这种情况下，我们正在创建一个双向流，它有一个特殊的目的：向 UI 报告实际的模型变化，并向模型报告意图。

CHACHA 的接口通常可以从应用的规范中导出，而不需要任何 UI 代码。

例如，一个允许你添加和删除联系人并从服务器加载初始列表的应用程序（带有刷新选项）可以有一个 CHACHA，它看起来像这样：

interface Contact {
  id: string;
  name: string;
  email: string;
}
// "Observe" Direction
interface ContactListModelObserver {
  onAdd(contact: Contact);
  onRemove(contact: Contact);
  onUpdate(contact: Contact);
}
// "Intent" Direction
interface ContactListModel {
  add(contact: Contact);
  remove(contact: Contact);
  reloadFromServer();  
}

请注意，这两个接口中的所有函数都是无效的，只接收普通对象。这是故意的。CHACHA 被构建成一个通道，有两个端口来发送消息，这使得它可以在 EventSource、HTML MessageChannel、服务工作者或任何其他协议中工作。

CHACHA 的好处是，它们很容易测试。你发送动作并期待对观察者的特定调用作为回报。

列表项的 HTML 模板元素

HTML 模板是存在于 DOM 中的特殊元素，但不会被显示。它们的目的是生成动态元素。

当我们使用 template 元素时，我们可以避免在 JavaScript 中创建元素和填充它们的所有模板代码。

下面将使用 template 为列表添加名称：

通过使用列表项的 template 元素，我们可以在原始 HTML 中看到列表项——它不是用 JSX 或其他语言“渲染”的。你的 HTML 文件现在包含了应用程序的所有 HTML——静态部分是渲染的 DOM 的一部分，而动态部分在模板中表达，准备在时机成熟时被克隆并追加到文档中。

集大成者：TodoMVC

TodoMVC 是一个 TODO 列表的应用规范，用于展示不同的框架。TodoMVC 模板带有现成的 HTML 和 CSS，帮助你专注于框架。

你可以在 GitHub 资源库中使用这个结果，并且可以获得完整的源代码。

从规范派生的 CHACHA 开始

我们将从规范开始，并使用它来构建 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 加载的时候。

精简的、面向表单的 HTML

接下来，我将采用 TodoMVC 模板，并将其修改为面向表单的模板：表单的层次结构，输入和输出元素代表可以用 JavaScript 改变的数据。

我怎么知道某个东西是否需要成为表单元素？作为一个经验法则，如果它与模型中的数据绑定，那么它就应该是一个表单元素。

完整的 HTML 文件是可用的，但这里是其主要部分：

此 HTML 包括以下内容：

我们有一个 main 表单，其中有所有的全局输入和按钮，还有一个新的表单用于创建一个新任务。请注意，我们使用 form 属性将元素与表单联系起来，以避免表单中的元素嵌套。
template 元素代表一个列表项，它的根元素是另一个表单，代表与特定任务相关的互动数据。当任务被添加时，这个表单将通过克隆模板的内容而被重复。
隐藏的输入表示不直接显示的数据，但用于样式设计和选择。

注意这个 DOM 是如何简洁的。它没有在其元素中散布类。它包括应用程序所需的所有元素，以合理的层次结构排列。多亏了隐藏的输入元素，你已经可以很好地感觉到以后文档中可能会有什么变化。

这个 HTML 不知道它将如何被样式化，也不知道它到底与什么数据绑定。让 CSS 和 JavaScript 为你的 HTML 工作，而不是让你的 HTML 为某个特定的造型机制工作。这将使你在改变设计时变得更加容易。

最小控制器 JavaScrip

现在我们在 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 文件可以供你查看。

CSS 处理了规范中的很多要求（做了一些有利于无障碍的修正）。我们来看看一些示例。

根据规范，“X”（destroy）按钮只在悬停时显示。我还添加了一个辅助位，使它在任务被聚焦时可见。

.task:not(:hover, :focus-within) button[name="destroy"] { opacity: 0 }

当 filter 链接是当前链接时，它会得到一个红色边框：

.todoapp input[name="filter"][value=""] ~ footer a[href$="#/"

分享标题：一文了解 Web 框架的替代方案
当前地址：http://www.shufengxianlan.com/qtweb/news22/215022.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容