前端新手Vanilla JS实践问题：点击跳转新页、DOM克隆渲染方案问询

问题1解答 #

完全可以实现，原生JS有两种常见实现方案：

• 多页方案：单独开发一个文章详情页，比如命名为post.html，你给标题和内容的a标签的href属性设置为post.html?id=${post.id}，同时加上target="_blank"属性。在post.html页面内用原生JS读取URL中的id参数，请求对应单篇文章接口拿到数据，渲染到页面即可。
• 单页方案：不用新开页面，自己写前端路由逻辑即可。可以监听hashchange事件，或者用History API管理路由状态，当路由跳转到对应文章路径时，隐藏文章列表容器，渲染对应单篇文章的内容，底层逻辑和Vue Router的实现思路一致，原生完全支持。

问题2解答 #

你现在用cloneNode克隆模板的实现方式非常合理，也是原生JS开发中非常常用的渲染方案。相比反复调用document.createElement手动拼接DOM，这种方式的代码更简洁，结构也更易维护，尤其是DOM结构复杂的时候优势会更明显。
更规范的写法是把你的模板放到原生专门的<template>标签中，不用额外写样式隐藏模板节点，浏览器默认不会渲染<template>标签内的内容，用的时候直接克隆<template>的content属性即可。

原生渲染的常规方案主要有三种，可以根据场景选择：

• 克隆DOM模板：就是你现在用的方案，适合大多数中小项目，学习成本低好调试。
• 手动创建DOM节点：适合结构特别简单的场景，结构复杂后代码会非常冗余，可读性差。
• 字符串拼接后插入innerHTML：写起来最快，但要注意如果插入的内容是用户生成的，必须做XSS转义处理，避免安全风险。

小优化建议 #

你现在的代码在循环渲染每篇文章的时候都会单独发送一次用户信息请求，建议可以在拉取文章列表之后，一次性拉取所有用户信息存在变量里，渲染文章的时候直接从本地变量取用户名，能减少不必要的接口请求，提升页面性能。

内容的提问来源于stack exchange，提问作者user587266