cbT.js: 一个让模板继承变得优雅的 Node.js 模板引擎

在前端工程化日益复杂的今天，选择一个好用的模板引擎往往能让开发效率事半功倍。今天要给大家介绍的是一个我开发的开源项目 ------ cbT.js，一个支持多级模板继承的 Node.js 服务端模板引擎。别看名字简洁，这个"小而美"的工具却蕴含着不少让人眼前一亮的设计亮点。

🎯 为什么又是一个模板引擎？

"模板引擎不是已经有 EJS、Pug、Handlebars 了吗？"相信很多开发者看到这里都会有这样的疑问。确实，市面上的模板引擎已经够多了，但 cbT.js 的出现绝非"重复造轮子"，而是专门为解决模板继承这一痛点而生。

如果你曾经写过复杂的网站，一定遇到过这样的场景：多个页面需要共享相同的头部、尾部，但每个页面的主体内容又不同。传统的模板引擎通常只能通过 include 方式来实现复用，但这种方式在面对多层嵌套时就显得力不从心了。

cbT.js 的多级模板继承就像是给模板世界带来了面向对象编程的思想，让你可以像编写类继承一样来组织模板结构。

🚀 核心特性解析

1. 强大的模板继承系统

这是 cbT.js 最大的卖点。通过 extends、block、parent、child 等指令，你可以构建出非常灵活的模板继承体系：

html 复制代码

<!-- 父模板 parent.html -->
<!DOCTYPE html>
<html>
<head>
  <title><% block title %>默认标题<% /block %></title>
</head>
<body>
  <h1><% block heading %>默认标题<% /block %></h1>
  <div class="content">
    <% block content %>默认内容<% /block %>
  </div>
</body>
</html>

<!-- 子模板 child.html -->
<% extends parent %>

<% block title %>我的页面<% /block %>
<% block heading %>欢迎来到我的页面<% /block %>
<% block content %>
  <% parent %> <!-- 保留父模板的内容 -->
  <p>这是子模板添加的内容</p>
<% /block %>

这种设计让模板的复用变得异常灵活，你可以选择完全替换、保留并扩展，甚至在父模板中为子模板预留插槽。

2. 丰富而实用的语法糖

除了继承功能，cbT.js 还提供了很多贴心的语法糖：

html 复制代码

<!-- 各种转义输出 -->
<%=name%>              <!-- HTML转义输出 -->
<%:=html%>             <!-- 原样输出 -->
<%:u=url%>             <!-- URL 转义 -->
<%:v=attr%>            <!-- HTML 属性转义 -->
<%:a=array|,%>         <!-- 数组输出，逗号分隔 -->
<%:m=price%>           <!-- 金额格式化 -->
<%:s=title|10%>        <!-- 文本截取 -->

<!-- 控制结构 -->
<% if (user.isVip) %>
  <div class="vip-content">VIP 专享内容</div>
<% else %>
  <div class="normal-content">普通内容</div>
<% /if %>

<% foreach (item in products) %>
  <div><%=itemIndex%>: <%=item.name%></div>
<% foreachelse %>
  <div>暂无商品</div>
<% /foreach %>

这些语法糖不仅让模板更简洁，还考虑到了 Web 开发中的常见需求，比如 XSS 防护、数据格式化等。

3. 安全优先的设计理念

从源码中可以看出，cbT.js 默认开启HTML转义（escape: true），这意味着所有变量输出都会自动进行 HTML 转义，有效防止 XSS 攻击。这种"安全优先"的设计理念在当今的Web安全环境下显得尤为重要。

4. 高性能的缓存机制

cbT.js 实现了一套精巧的缓存系统：

编译缓存：模板编译结果会被缓存，避免重复编译
文件锁机制 ：通过 lockfile.js 确保并发环境下的缓存安全
智能失效：基于文件修改时间的缓存失效机制

这套缓存机制让 cbT.js 在保证功能完整性的同时，还能提供出色的性能表现。

5. 零依赖的轻量设计

查看 package.json 会发现，cbT.js 没有任何运行时依赖，整个引擎完全基于 Node.js 原生 API 构建。这种"零依赖"的设计不仅减小了项目体积，还避免了潜在的安全风险和版本冲突问题。

6. 完善的测试体系

让人印象深刻的是，cbT.js 拥有 100% 的测试覆盖率。这不是一个简单的数字，而是代表着项目对代码质量的严格要求：

语句覆盖率 100%：每一行代码都经过测试验证
分支覆盖率 100%：所有条件分支都有对应的测试用例
函数覆盖率 100%：每个函数都有完整的测试场景
行覆盖率 100%：没有遗漏的代码行

项目包含了 169 个测试用例，覆盖了从核心编译功能到边缘情况处理的方方面面。这种全面的测试体系不仅保证了代码的可靠性，也为后续的功能迭代提供了坚实的安全网。对于一个基础工具库来说，这样的测试覆盖率是非常难得的。

7. 完整的 TypeScript 支持

现代 JavaScript 项目离不开 TypeScript 的支持，cbT.js 在这方面做得相当出色。项目提供了完整的类型定义文件（index.d.ts），包含了：

详细的接口定义 ：从基本的 TemplateData 到复杂的 CompiledTemplate 接口
完整的方法签名：所有 API 都有准确的类型注解和重载声明
编译选项类型 ：CompileOptions 接口覆盖了所有配置选项
回调函数类型 ：RenderCallback 和 CompileCallback 确保异步操作的类型安全

这意味着 TypeScript 开发者可以享受到完整的智能提示、类型检查和编译时错误检测，大大提升了开发体验和代码质量。

🛠️ 实战应用场景

场景一：企业官网开发

企业官网通常有相似的页面结构但内容不同，cbT.js 的模板继承特性特别适合这种场景：

javascript 复制代码

const cbT = require('cb-template');

// 设置模板根目录
cbT.basePath = './templates';

// 渲染不同页面
cbT.renderFile('about.html', {
  pageTitle: '关于我们',
  breadcrumb: ['首页', '关于我们']
}, {}, (err, content) => {
  // 处理渲染结果
});

场景二：邮件模板系统

邮件模板往往需要复用相同的样式但内容各异，cbT.js 的 block 系统可以很好地解决这个问题：

html 复制代码

<!-- 邮件基础模板 -->
<% block header %>
  <div style="background: #007cff;">
    <h1><%=companyName%></h1>
  </div>
<% /block %>

<% block content %>
  <!-- 邮件具体内容 -->
<% /block %>

<% block footer %>
  <div style="text-align: center; color: #666;">
    © 2024 <%=companyName%>
  </div>
<% /block %>

📈 与其他模板引擎的对比

特性	cbT.js	EJS	Handlebars	Pug
模板继承	✅ 多级继承	❌	❌	✅ 基础继承
学习曲线	📈 中等	📈 简单	📈 中等	📈 陡峭
安全性	✅ 默认转义	❌ 需手动	✅ 默认转义	✅ 默认转义
运行时依赖	✅ 零依赖	✅ 零依赖	❌ 有依赖	❌ 有依赖
缓存机制	✅ 完善	✅ 基础	✅ 基础	✅ 基础
测试覆盖率	🎯 100%	⚠️ 不完整	⚠️ 不完整	⚠️ 不完整
TypeScript支持	💯 完整	✅ 社区	✅ 内置	✅ 内置

🎨 设计哲学的思考

cbT.js 的设计哲学体现了几个有趣的理念：

实用主义：每个功能都来自真实的开发需求，比如金额格式化、URL 协议自适应等
安全意识：默认转义、文件锁机制等细节体现了对安全性的重视
性能关注：从编译缓存到零依赖设计，处处体现了对性能的考量
质量至上：100% 的测试覆盖率不是偶然，而是对代码质量的严格要求的体现
现代化导向：完整的 TypeScript 支持体现了对现代 JavaScript 生态的拥抱
开发体验：丰富的语法糖和灵活的继承机制让开发变得更愉快

🔧 快速上手

bash 复制代码

npm install cb-template

javascript 复制代码

const cbT = require('cb-template');

// 简单模板渲染
const result = cbT.render('Hello <%=name%>!', { name: 'World' });
console.log(result); // Hello World!

// 文件模板渲染（支持继承）
cbT.renderFile('template.html', data, {}, (err, content) => {
  if (!err) {
    console.log(content);
  }
});

TypeScript 用法示例：

typescript 复制代码

import cbT, { TemplateData, CompileOptions } from 'cb-template';

// 类型安全的数据定义
interface PageData extends TemplateData {
  title: string;
  user: {
    name: string;
    isVip: boolean;
  };
  products: Array<{
    id: number;
    name: string;
    price: number;
  }>;
}

// 编译选项
const options: CompileOptions = {
  cache: true,
  cacheName: 'my-templates'
};

// 类型安全的模板渲染
const data: PageData = {
  title: '产品列表',
  user: { name: '张三', isVip: true },
  products: [
    { id: 1, name: '商品1', price: 100 },
    { id: 2, name: '商品2', price: 200 }
  ]
};

cbT.renderFile('product-list.html', data, options, (err, content) => {
  if (!err) {
    console.log(content);
  }
});

💭 总结思考

cbT.js 虽然在 GitHub 上还不是最热门的项目，但它解决的问题很实际，设计思路也很清晰。在选择技术方案时，我们往往会被各种"大而全"的框架所吸引，但有时候像 cbT.js 这样"小而美"的工具反而更适合特定的业务场景。

特别是对于需要大量模板复用的项目来说，cbT.js 的多级继承功能可能会成为开发效率的一个重要提升点。而其零依赖的特性和 100% 的测试覆盖率也让它在微服务架构中具有天然的优势。

当然，任何技术都有其适用边界。如果你的项目已经深度绑定了某个模板引擎，或者团队对现有方案很满意，那可能没必要迁移。但如果你正在开始一个新项目，并且对模板复用有较高要求，不妨试试 cbT.js，说不定会有意外的惊喜。

项目地址 ：github.com/hex-ci/cbT
NPM 地址 ：www.npmjs.com/package/cb-...
当前版本：3.0.3

你有使用过类似的模板引擎吗？在模板复用方面还遇到过哪些有趣的问题？欢迎在评论区分享你的经验！