客户端框架介绍

2024-07-14 02:42| 来源: 网络整理| 查看: 265

构建 HTML 元素并适时在浏览器中呈现它们需要大量的 JavaScript 代码。假设我们的状态——底层数据，是一个结构如下的对象数组：

jsconst state = [ { id: "todo-0", name: "Learn some frameworks!", }, ];

如何向用户展示其中一个任务？我们想将每个任务表示为一个列表项——无序列表元素（）中的一个 HTML 元素。我们该如何实现？可以像下面这样：

jsfunction buildTodoItemEl(id, name) { const item = document.createElement("li"); const span = document.createElement("span"); const textContent = document.createTextNode(name); span.appendChild(textContent); item.id = id; item.appendChild(span); item.appendChild(buildDeleteButtonEl(id)); return item; }

在这里，我们使用 document.createElement() 方法来创建我们的元素，以及另外几行代码来创建它需要的属性和子元素。

该代码片段的第十行引用了另一个构建函数：buildDeleteButtonEl()。它遵循与我们用来构建列表项元素时类似的模式：

jsfunction buildDeleteButtonEl(id) { const button = document.createElement("button"); const textContent = document.createTextNode("Delete"); button.setAttribute("type", "button"); button.appendChild(textContent); return button; }

这个按钮只有当我们决定实现删除功能时，才会生效。要在页面上渲染我们的列表项，代码看起来可能是这样的：

jsfunction renderTodoList() { const frag = document.createDocumentFragment(); state.tasks.forEach((task) => { const item = buildTodoItemEl(task.id, task.name); frag.appendChild(item); }); while (todoListEl.firstChild) { todoListEl.removeChild(todoListEl.firstChild); } todoListEl.appendChild(frag); }

我们现在已经有超过 30 行仅服务于用户界面的代码——只作用于在 DOM 中渲染某些内容的步骤——并且我们还没有为列表添加样式呢！

如本例所示，直接使用 DOM，我们需要了解有关 DOM 工作原理的许多内容：如何创建元素；如何改变它们的属性；如何将元素放在一起；如何让它们出现在页面上。这些代码实际上都没有处理用户交互，或添加删除之类任务。如果我们添加这些功能，我们必须记得在正确的时间以正确的方式更新我们的用户界面。

JavaScript 框架的出现是为了使这些工作变得更容易——它们的存在是为了提供更好的开发体验。它们没有给 JavaScript 带来新的功能；但它们使你可以更轻松地使用 JavaScript 来构建现代的 web。

如果你想查看本节中的代码示例，可以查看 CodePen 上该应用的可用版本, 该版本还允许用户添加和删除新任务。

有关本节中使用的 JavaScript 的更多信息：

document.createElement() document.createTextNode() document.createDocumentFragment() eventTarget.addEventListener() node.appendChild() node.removeChild()

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章