如何在JavaScript中正确地使用和集成Freemarker模板引擎？

在JavaScript中使用和集成FreeMarker模板引擎通常需要两个步骤：首先在服务器端设置环境，然后通过Ajax或其他方式从服务器获取并处理渲染后的HTML。

1. **服务器端设置**:
- 安装FreeMarker库：对于Node.js，你可以使用`npm install freemarker`命令安装。
- 配置FreeMarker：创建一个配置文件，比如`freemarker.config.js`，指定模板文件的位置、编码等信息，并初始化模板引擎。

const config = {
  // 模板目录
  template_DIRS: ['templates'],
  // 编码
  default_encoding: 'UTF-8',
};

const freemarker = new freemarker.TemplateService(config);

2. **模板编写**:
创建HTML模板文件（如`index.ftl`），其中包含变量和控制结构，例如：

   <h1>Welcome, ${username}!</h1>

3. **模板渲染**:
在Node.js服务器端，可以读取模板内容，将数据绑定到模板，然后生成最终的HTML：

function renderTemplate(username) {
  const template = freemarker.getTemplate('index.ftl');
  const data = { username };
  return template.process(data);
}

// 示例：返回渲染后的HTML作为字符串
const renderedHtml = renderTemplate('John Doe');

4. **客户端请求和接收**:
通过前端发送Ajax请求，向服务器获取已渲染的HTML，然后插入到页面上：

fetch('/render', { method: 'POST', body: JSON.stringify({ username: 'John Doe' }) })
  .then(response => response.text())
  .then(html => document.getElementById('content').innerHTML = html);