更现代的方式来动态创建 HTML 内容？
Posted
技术标签:
【中文标题】更现代的方式来动态创建 HTML 内容？【英文标题】：More modern ways to dynamically create HTML content? 【发布时间】：2022-01-03 02:03:27 【问题描述】：我有一些编写 html/JS/CSS 页面的经验，并且我广泛使用 javascript 来添加元素、更改元素、更新样式、类等，否则会在响应用户操作时弄乱页面。我不是在谈论那个。我的意思是我可以写类似的东西
var win = window.open('','newWindow');
win.document.write("<html>");
win.document.write("<head>");
win.document.write("<style>body color:red;</style>");
win.document.write("</head>");
win.document.write("<body>");
win.document.write("<h1>This is it</h1>");
win.document.write("</body>");
win.document.write("</html>");
甚至
var win = window.open('','newWindow');
var header = win.document.createElement("H1");
header.innerHTML = "This is it";
header.style.backgroundColor="red";
win.document.body.appendChild(header);
但这两种解决方案似乎都相当笨拙。我知道人们使用 AJAX 从不同来源请求数据以生成一些屏幕内容。我知道有些人使用 Node.js、JQuery 和 Angular 等工具来创建 HTML/JS/CSS 内容。我只是觉得有一种更好的方法我还没有遇到过。
所以，这就是场景。您可以从中提取大量数据，例如书名、作者等库，为简单起见，我们将所有这些数据放在一个带有单个 JSON 数据对象的 .js 文件中。
var library =
"Anne of Green Gables": "Author": "Lucy Maud Montgomery", "Date":1908...,
...
;
我想让用户浏览书籍列表，选择一本书并使用该记录的内容自动生成一个新页面。也许我可以在其中放置书籍描述等。也许像https://bookaudio.online。
您将如何动态生成这些页面？
我可以想到几种方法，但他们都觉得我在使用 1990 年的技术。我希望有人能告诉我更多关于 2020 年的方法。
【问题讨论】：
你可以通过promise获取内容，并将服务器发送的响应变成可读的内容。像这样的东西可能会起作用：fetch(url).then(function(response) document.write(response);).catch(function(error) document.write(error););。您可能会得到不同的数据，例如 JSON，在 fetch API 中有一个名为 json 的方法。 与***.com/questions/20036264/… 相关，其中更详细地讨论了 AngularJS。 【参考方案1】：它是“动态前端库”领域的老手，但它在功能、浅学习曲线（与 Vue 或 Ember 等重量级产品相比）、快速原型设计、可扩展性、并且几乎不存在“辅助工具”要求：Knockout.js
function BookList(data)
this.books = data.books;
this.selectedBook = ko.observable();
this.selectBoxTitle = ko.pureComputed(() => `There are $this.books.length books, pick one!`);
var data =
books: [
Title: "Anne of Green Gables", Author: "Lucy Maud Montgomery", Date: 1908,
Title: "Wuthering Heights", Author: "Emily Brontë", Date: 1847,
Title: "Dracula", Author: "Bram Stoker", Date: 1897,
]
;
ko.applyBindings(new BookList(data));<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<select data-bind="
options: books,
optionsText: 'Title',
optionsCaption: selectBoxTitle,
value: selectedBook
"></select>
<div data-bind="with: selectedBook">
<h3 data-bind="text: Title"></h3>
<p>Written by <b data-bind="text: Author"></b> in <span data-bind="text: Date"></span>.</p>
</div>
<hr>
View Model:
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>【讨论】：
非常好。所以这比 AJAX 稍微好一点，它允许你编写 HTML 来直接从数据中更新。数据绑定“with”会根据小动作自动更新大部分内容。 @BSD 这就是想法 - 将视图（HTML）与数据（模型）分离并允许从两端进行动态更新。 Knockout 用途广泛，但像这样的特别简单的任务非常简单。【参考方案2】：在回答另一个问题 (https://***.com/a/70425478?noredirect=1) 时，一个回答表明弹出窗口虽然仍在使用，但并不是最佳选择。具有动态内容的新窗口没有适当的相对地址基础，他找到了解决该问题的方法。不过，他评论道：
“我认为你可以通过不使用 window.open（在弹出窗口的糟糕日子里得到一个非常糟糕的说唱）并使用你可以加载（或编写）的隐藏模式 div 来为自己省去一些麻烦html 进入，然后取消隐藏。但是，您可能有完全正当的理由使用弹出窗口。”
这给了我更多信息，并且快速搜索发现了各种文章，其中有一些关于“弹出窗口 vs 模态 vs 覆盖 vs 插页式”的变化。显然，这是用于动态添加内容的四种技术，而弹出窗口是最不受欢迎的，正如最初所怀疑的那样。
例如，本网站 (https://moz.com/blog/popups-seo-whiteboard-friday) 讨论了在窗口中显示动态内容的不同方法。该镜头专门针对提高搜索引擎排名，但对优缺点的描述非常有帮助。它表明 window.open 方法可能是现代 Web 开发中最不受欢迎的方法。该视频还建议将 Google 作为最佳实践的来源。考虑到这一点，我找到了来自 Google 的 (https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on) 2016 年指南。
因此，除了如何将内容动态加载到这些元素之一之外，显示动态内容的首选方法可能不是新窗口。
【讨论】：
以上是关于更现代的方式来动态创建 HTML 内容？的主要内容，如果未能解决你的问题，请参考以下文章
更改由AngularJs从Chrome内容脚本动态创建的包装选择的值