Node.js中EJS局部视图结合Fetch实现数据驱动UI的可行性问询

一、EJS Partials 不支持前端动态渲染的用法 #

EJS 是**服务器端渲染（SSR）**模板引擎，<%- include('partials/config', {data: ...}) %> 这类语法只会在服务器渲染页面的阶段执行，最终发送给浏览器的是已经编译好的静态 HTML。浏览器无法识别 EJS 的模板标签，因此你没法在前端通过 Fetch 获取数据后，直接调用 EJS 的 include 语法来动态渲染局部视图——这种用法从原理上就不成立。

二、不使用 React 的可复用数据绑定方案 #

如果不想手动拼接 HTML，以下几种方案可以实现可复用的前端组件式渲染：

1. 封装模板字符串渲染函数

把渲染逻辑封装成可复用的函数，用 JavaScript 模板字符串拼接 HTML 结构，传入数据即可生成对应的 DOM 内容。这种方式轻量且易维护：

// 可复用的渲染函数
function renderConfigDetail(data) {
  return `
    <div class="config-detail">
      <h3>${data.title}</h3>
      <p>ID: ${data.id}</p>
      <div class="config-content">${data.content}</div>
    </div>
  `;
}

// 点击事件处理
function configClickHandler(id) {
  fetch(`/api/configs/${id}`)
    .then(res => res.json())
    .then(data => {
      // 插入到页面容器
      const container = document.getElementById('configDetailContainer');
      container.innerHTML = renderConfigDetail(data);
    });
}

2. 使用 <template> 标签预定义结构

用 HTML5 的 <template> 标签存放组件的静态结构，通过 DOM 操作克隆模板并填充数据，结构与逻辑分离，可读性更好：

<!-- 页面中预定义模板 -->
<template id="configDetailTemplate">
  <div class="config-detail">
    <h3></h3>
    <p class="config-id"></p>
    <div class="config-content"></div>
  </div>
</template>

function configClickHandler(id) {
  fetch(`/api/configs/${id}`)
    .then(res => res.json())
    .then(data => {
      const template = document.getElementById('configDetailTemplate');
      // 克隆模板内容
      const detailElement = template.content.cloneNode(true);
      // 填充数据
      detailElement.querySelector('h3').textContent = data.title;
      detailElement.querySelector('.config-id').textContent = `ID: ${data.id}`;
      detailElement.querySelector('.config-content').textContent = data.content;
      // 更新页面
      const container = document.getElementById('configDetailContainer');
      container.innerHTML = '';
      container.appendChild(detailElement);
    });
}

3. 轻量级前端模板引擎

如果需要更复杂的模板语法（如条件判断、循环），可以引入轻量级的前端模板引擎（如 Handlebars、Mustache），它们体积小，语法和 EJS 类似，专门用于前端动态渲染：

<!-- 预定义 Handlebars 模板 -->
<script id="configDetailTemplate" type="text/x-handlebars-template">
  <div class="config-detail">
    <h3>{{title}}</h3>
    <p>ID: {{id}}</p>
    {{#if content}}
      <div class="config-content">{{content}}</div>
    {{/if}}
  </div>
</script>

// 编译模板
const template = Handlebars.compile(document.getElementById('configDetailTemplate').innerHTML);

function configClickHandler(id) {
  fetch(`/api/configs/${id}`)
    .then(res => res.json())
    .then(data => {
      // 生成 HTML 并插入页面
      const container = document.getElementById('configDetailContainer');
      container.innerHTML = template(data);
    });
}

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