文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-02 03:12

关注

普通的选择

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

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

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

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

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

<style>
label.error { display: none; }
.app.has-error label.error {display: block; }
</style>
<label class="error">Message</label>


<script>
app.classList.toggle('has-error', true);
</script>

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

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

即便你阅读了本文,并且选择继续使用框架工作,但是要让 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 选择器。我认为它们应该被用来将风格相似的元素组合在一起,而不是作为改变组件风格的一种万能机制。

表单的优点

CHACHA 和 HTML 模板

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

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

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

变化通道(或 CHACHA)

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

这也许是一个有趣的名字,但它不是一个复杂或新颖的模式。双向流在 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 为列表添加名称:

<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

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 的准则。

TodoMVC 的实现使用 localStorage 作为后端。

该模型非常简单,与关于 UI 框架的讨论没有多大关系。它在需要的时候保存到 localStorage,并在某些情况发生变化时向观察者触发回调,这些变化可能是用户操作的结果,也可能是模型第一次从 localStorage 加载的时候。

精简的、面向表单的 HTML

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

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

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

<section class="todoapp">
<header class="header">
<h1>todos</h1>
<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">X</button>
</li>
</form>
</template>
</ul>
</main>


<footer>
<output form="main" name="activeCount">0</output>
<nav>
<a name="/" href="#/">All</a>
<a name="/active" href="#/active">Active</a>
<a name="/completed" href="#/completed">Completed</a>
</nav>
<input form="main" type="button" name="clearCompleted" value="Clear completed" />
</footer>
</section>

此 HTML 包括以下内容:

注意这个 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$="#/"] 
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 平台提供了许多选择,而采用一个框架可以让每个人至少部分地在这些选择上达成一致,这是有价值的。另外,声明式编程的优雅性也是值得称道的,而且组件化的大特点也不是我在这篇文章中所处理的。

但请记住,替代模式是存在的,通常成本较低,而且不一定需要较少的开发者经验。允许自己对这些模式感到好奇,即使你决定在使用框架时从它们中挑选。

模式概述

作者简介:

Noam Rosenthal,Web 平台顾问,WebKit 和 Chromium 的贡献者,标准编辑,也是经验丰富的 Web 开发者。他的工作主要是在 Web 开发和浏览器 / 标准开发之间架起桥梁。

来源:前端Q内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯