您是否正在使用Vue，React，Angular或Svelte创建应用程序？ 我使用了，如果可以的话，我确定您不必编写没有这些出色工具即可显示信息的应用程序。
曾几何时，我们许多人仅使用浏览器内置的工具编写Web应用程序。 尽管现代工具可以帮助我们忽略这一点（并具有许多其他优点），但是了解他们背后的情况仍然有用。
显示少量信息时，可能需要使用HTML，JavaScript和DOM，而无需任何工具。 我最近写了一些基本示例，这些示例说明了Web开发的基础，并有助于学习DOM，HTML，JavaScript和浏览器原理。 这次经历使我了解到其他开发人员（也许是您）会很高兴记住如何在不使用库的情况下显示信息。
它也很有趣，有用，并且有助于您了解对我们有很多工作的现代图书馆和框架的价值。
让我们看一下显示信息的不同方式。 并保持此
文档方便！
样品申请
这是我在文章中演示的应用程序。 它提取字符列表并在按下按钮时显示它们。 检索列表时，应用程序还会显示进度条。
工具
选择正确的工具很重要。 在本练习中，我们需要使用我们所有人都可以使用的特定工具在浏览器中显示信息。 没有框架。 没有图书馆。 没问题
我们将仅使用HTML，
TypeScript / JavaScript，CSS和基于浏览器的DOM（文档对象模型）。 让我们看看如何显示HTML。
在这里，您可以阅读有关如何使用VS Code编写TypeScript的信息 。您可能已经注意到，我正在使用
TypeScript 。 它的集合功能完美地避免了错误，并且我利用了它可以转换为任何JavaScript格式的能力。 如果需要，可以使用纯JavaScript。 将来，我将写一篇有关
如何转置TypeScript的文章。
方法
我们的应用程序显示进度条和字符列表。 让我们从最简单的指示器开始-考虑显示它的不同方法。 然后，我们将转到列表，看看如果需要显示更多信息，情况将如何变化。
进度条显示
当应用程序决定应列出哪些字符时，应显示一个指示器。 即，首先指示器不可见，然后用户按下更新按钮，指示器出现，并在列表显示后再次消失。
下文描述的所有方法都需要在创建元素时放置它们。 例如，指示符和字符列表必须位于某处。 一种解决方案是引用已经包含它们的现有元素。 或者，您可以引用一个元素并将其替换为新数据。
使用内部HTML的显示指示器
创建HTML并将其放在另一个元素中是最古老的解决方案，但是它可以工作！ 选择显示指示器的元素，然后为新数据
innerHtml属性。 请注意，我们还试图通过使用模式字符串跨越多行来使代码可读。
const heroPlaceholder = document.querySelector('.hero-list'); heroPlaceholder.innerHTML = ` <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^ ></progress> `;
很简单 很简单 为什么不能说任何代码？ 好吧，看看这件作品解决问题有多快！
您可能已经注意到此代码的脆弱性。 HTML中的一个错误-就是这样！ 我们有问题。 真的可读吗？ 是的，是的，但是当HTML变得太复杂时会发生什么？ 当您有20行带有类，属性和值的代码...那么，您就明白了。 是的，解决方案并不完美。 但是使用少量的HTML，它可以很好地工作，我建议所有支持者将所有内容都写在一行中，以进行查看。
还要注意内联内容如何影响代码的可读性和稳定性。 例如，如果您需要在指示符内添加信息以更改下载消息，则可以通过使用替换来完成此操作，例如
${message} 。 这既不是好事也不是坏事，它只是在创建大型模板字符串时增加了便利。
最后一
innerHTML ：
innerHTML 会影响显示速度。 我不热衷于优化，但会更好地检查性能，因为
innerHTML会导致浏览器中的渲染和渲染布局周期。 请记住。
使用DOM API的进度栏
您可以使用DOM API减少长行的体积。 我们创建一个元素，添加必要的类和属性，设置值，然后将其添加到DOM。
const heroPlaceholder = document.querySelector('.hero-list'); const progressEl = document.createElement('progress'); progressEl.classList.add('hero-list', 'progress', 'is-medium', 'is-info'); const maxAttr = document.createAttribute('max'); maxAttr.value = '100'; progressEl.setAttributeNode(maxAttr); heroPlaceholder.replaceWith(progressEl);
好处是您需要编写更多代码并依赖API。 也就是说，与
innerHTML相比，错别字增加了系统报告错误的可能性，这将有助于发现问题的原因并提出解决方案。
缺点是需要六行代码才能输出信息，这些信息使用
innerHTML显示为一行。
用于显示指示器的DOM API代码是否比使用
innerHTML的代码更具可读性？ 我会争辩。 但这不是指示器的HTML代码非常简短的原因吗？ 可能吧 如果有20行，那么
innerHTML就会变得更加难以阅读……但是，DOM API代码也是如此。
使用模板绘制指标
另一种方法是创建一个
<tmplate>并使用它来简化信息的输出。
创建
<tmplate>并为其分配一个ID。 该模板将不会显示在HTML页面上，但是稍后您可以链接到其内容并使用它。 这非常有用，您可以在适当的地方编写HTML：使用HTML编辑器的所有有用功能，在HTML页面上。
<template id="progress-template"> <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^></progress> </template>
然后，代码可以使用DOM API中的
document.importNode()方法获取模板。 必要时，代码可以操纵模板的内容。 现在，将此内容添加到DOM以显示指标。
const heroPlaceholder = document.querySelector('.hero-list'); const template = document.getElementById('progress-template') as HTMLTemplateElement; const fetchingNode = document.importNode(template.content, true); heroPlaceholder.replaceWith(fetchingNode);
模板是构建HTML的好方法。 我喜欢它，因为它允许您在有意义的地方编写HTML，而使用TypeScript / JavaScript代码则可以做得更少。
我可以从其他文件导入模板吗？ 是的，但是在其他库的帮助下。 但是，现在我们故意拒绝了他们。 HTML导入已经讨论了多年，但是正如您可以从“
我可以使用”网站上看到的那样，并非所有现代浏览器都支持此功能。
字符列表显示
现在让我们谈谈如何使用相同的三种技术显示字符列表。 与呈现单个
<prgress> HTML元素和字符列表的区别在于，现在我们：
- 显示几个HTML元素；
- 添加几个类；
- 添加一定顺序的孩子；
- 为每个字符显示很多相同的信息；
- 动态显示元素内部的文本。
使用内部HTML显示字符
使用
innerHTML时，从一个字符数组开始并对其进行迭代
innerHTML有意义的。 这样，您可以一次创建一行。 行的区别仅在于字符名称和描述，可以使用模板行插入。 数组中的每个字符都会创建一个
li标记，该标记与一个字符串数组相关联。 最后，将字符串数组转换为纯HTML，包裹在
ul并分配给
innerHTML 。
function createListWithInnerHTML(heroes: Hero[]) { const rows = heroes.map(hero => { return `<li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name">${hero.name}</div> <div class="description">${hero.description}</div> </div> </div> </div> </li>`; }); const html = `<ul>${rows.join('')}</ul>`; heroPlaceholder.innerHTML = html;
可以用
也许这更具可读性。 性能如何？ 键入代码时难于检测（甚至可能？）打字错误吗？ 要判断你。 但是，在弄清楚其他技术之前，不要得出结论。
使用DOM API进行字符映射
function createListWithDOMAPI(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); heroes.forEach(hero => { const li = document.createElement('li'); const card = document.createElement('div'); card.classList.add('card'); li.appendChild(card); const cardContent = document.createElement('div'); cardContent.classList.add('card-content'); card.appendChild(cardContent); const content = document.createElement('div'); content.classList.add('content'); cardContent.appendChild(content); const name = document.createElement('div'); name.classList.add('name'); name.textContent = hero.name; cardContent.appendChild(name); const description = document.createElement('div'); description.classList.add('description'); description.textContent = hero.description; cardContent.appendChild(description); ul.appendChild(li); }); heroPlaceholder.replaceWith(ul); }
带有模板的字符显示
可以使用模板显示字符列表。 为此，使用与显示
<prgress>元素相同的技术。 首先，在HTML页面上创建一个模板。 此HTML将比
<prgress>复杂一些。 但这不是问题。 它只是HTML页面中的HTML，因此我们可以使用漂亮的
VS Code编辑器轻松修复错误和格式化。
<template id="hero-template"> <li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name"></div> <div class="description"></div> </div> </div> </div> </li> </template>
现在，您可以编写代码来创建字符列表。 首先，创建
ul以使用
li字符换行。 现在，您可以遍历数组，并使用相同的
document.importNode()方法为每个字符应用相同的模板。 注意，可以重复使用该模式来创建每一行。 它变成一个源工程图，该工程图创建所需的线数。
字符列表必须包含名称和描述。 也就是说，有必要替换模板中的特定值。 为此，建议您以某种方式标识并引用要插入这些值的位置。 在我们的示例中，要获取每个字符的链接，我们使用
querySelector('your-selector')方法，然后给出名称和描述。
function createListWithTemplate(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); const template = document.getElementById('hero-template') as HTMLTemplateElement; heroes.forEach((hero: Hero) => { const heroCard = document.importNode(template.content, true); heroCard.querySelector('.description').textContent = hero.description; heroCard.querySelector('.name').textContent = hero.name; ul.appendChild(heroCard); }); heroPlaceholder.replaceWith(ul); }
这个模板比其他技术容易吗？ 我觉得
比较容易。 从我的角度来看，代码建立在模板上，该模板简化了播放和可读性，并更好地防止了错误。
总结
我没有提到流行的框架和库如何显示信息。 Vue，React，Angular和Svelte使这项任务变得更加容易，并且需要更少的代码编写。 它们还具有其他优点。 在本文中，我们仅研究了使用DOM和纯HTML以及TypeScript / JavaScript来显示信息的相对简单的技术。
我们来了什么？
我希望您现在可以想象如何在不使用库的情况下显示信息。 还有其他方法吗？ 当然可以 我可以编写简化代码并允许其重复使用的函数吗？ 当然可以 但是有一天，您将需要尝试使用Vue，React，Angular或Svelte这样的出色工具之一。
这些框架为我们做了很多工作。 您可能还记得如何通过JavaScript或jQuery使用纯DOM代码输出信息。 或如何使用诸如车把或胡须之类的工具来做到这一点。 或者，也许没有框架的帮助，您永远不会将信息输出到DOM。 您可以想象当现代图书馆和框架在屏幕上为您显示信息时，正在发生什么过程。
知道您可以使用纯HTML，TypeScript / JavaScript和CSS做什么是很高兴的，即使您使用的框架可以省掉所有这些。
无论您的经验如何，我都希望对介绍信息显示技术的简短介绍对您有所帮助。