velocity.js 使用教程

2026-01-18 10:15:05作者：凌朦慧Richard

项目介绍

velocity.js 是一个基于 JavaScript 的模板引擎，它实现了 Apache Velocity 的语法，并提供了在浏览器和 Node.js 环境中使用的能力。velocity.js 的主要目标是提供一个轻量级、高性能的模板渲染解决方案，适用于前后端分离的项目。

项目快速启动

安装

首先，你需要通过 npm 安装 velocity.js：

npm install velocityjs

基本使用

以下是一个简单的示例，展示如何在 Node.js 环境中使用 velocity.js：

const Velocity = require('velocityjs');

const template = 'Hello, $name! Welcome to $city.';
const context = { name: 'John', city: 'New York' };

const result = Velocity.render(template, context);
console.log(result); // 输出: Hello, John! Welcome to New York.

应用案例和最佳实践

前端模板渲染

velocity.js 可以用于前端模板渲染，特别是在需要动态生成 HTML 内容的场景中。以下是一个简单的 HTML 模板示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Velocity.js 示例</title>
</head>
<body>
    <div id="content"></div>
    <script src="https://cdn.jsdelivr.net/npm/velocityjs/dist/velocity.min.js"></script>
    <script>
        const template = 'Hello, $name! Welcome to $city.';
        const context = { name: 'John', city: 'New York' };
        const result = Velocity.render(template, context);
        document.getElementById('content').innerHTML = result;
    </script>
</body>
</html>

后端渲染

在 Node.js 后端服务中，velocity.js 可以用于渲染动态内容并返回给客户端。以下是一个 Express 应用的示例：

const express = require('express');
const Velocity = require('velocityjs');

const app = express();

app.get('/', (req, res) => {
    const template = 'Hello, $name! Welcome to $city.';
    const context = { name: 'John', city: 'New York' };
    const result = Velocity.render(template, context);
    res.send(result);
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});