Nodejs 我要写一个express3下解决mustache-like模板引擎针对layout和partial处理的完美解决插件，你们会用么？

Nodejs 我要写一个express3下解决mustache-like模板引擎针对layout和partial处理的完美解决插件，你们会用么？

express 3.0开始移除了所有模板引擎layout的支持，hogan和handlebar里虽然部分支持了layout，但只有一层。另外partial的处理也非常蛋疼，得开发者自己去写路径。

所以准备写个npm包解决掉这些问题，将支持多层嵌套（类似smarty的模板继承），自动预处理所有模板，缓存等。基本不影响原有使用方式。不知道用mustache-like模板引擎的人多么，有这需求么？

5 回复

Node.js: 我要写一个Express 3下解决Mustache-like模板引擎针对Layout和Partial处理的完美解决插件，你们会用么？

背景介绍

Express 3.0 开始移除了对所有模板引擎的布局（layout）支持。虽然Hogan和Handlebars部分支持了布局，但是仅限于一层。此外，Partial的处理也非常繁琐，需要开发者手动编写路径。

因此，我计划开发一个npm包来解决这些问题。该插件将支持多层嵌套布局（类似于Smarty的模板继承）、自动预处理所有模板、缓存等功能。同时，它将尽可能不改变原有的使用方式。

需求分析

  • 多层嵌套布局：允许模板之间进行嵌套，形成复杂的页面结构。
  • 自动预处理模板：自动处理模板中的Partial，减少开发者的工作量。
  • 缓存机制：提高性能，减少重复渲染的时间。

示例代码

以下是一个简单的示例代码，展示了如何使用这个插件：

// 安装插件
const express = require('express');
const mustacheExpress = require('mustache-express');
const LayoutEngine = require('mustache-layout-engine'); // 假设这是你开发的插件名称

const app = express();

// 设置模板引擎
app.engine('html', LayoutEngine({
    engine: mustacheExpress(),
    layoutsDir: __dirname + '/views/layouts/',
    partialsDir: __dirname + '/views/partials/'
}));

app.set('view engine', 'html');
app.set('views', __dirname + '/views');

// 示例路由
app.get('/', (req, res) => {
    res.render('index', { title: 'Hello World' });
});

app.listen(3000, () => console.log('App listening on port 3000!'));

解释

  1. 安装与配置：首先安装mustache-express和你的自定义插件mustache-layout-engine。
  2. 设置模板引擎：通过app.engine()方法设置模板引擎，并指定布局目录和Partial目录。
  3. 视图渲染：在路由中使用res.render()方法渲染模板，传入数据对象。

结论

如果你正在使用Mustache-like模板引擎并且希望简化布局和Partial的处理，那么这个插件可能会非常有用。它旨在提供一种更高效的方式来处理复杂的模板结构，而不需要开发者手动编写大量的路径和逻辑。

希望这个插件能满足你的需求！如果有任何反馈或建议，请随时告诉我。


支持一个。

目前的基本思路是在express应用启动前完成多层模板嵌套（继承）的解析合并，并在app.engine阶段直接将当期使用的模板引擎目录指向到完成了解析合并的target目录。这样做一来可以做完预先解析，二来对原有的使用方式完全没有影响。

于是设计了下面几种API的usage，想看看大家更倾向于哪种？

1. 基本原生模式

var app = express();

var mustlayout = require(‘mustlayout’);


// 这一段完成对views目录中模板的解析合并
mustlayout.resolve(views, options);


// 在原有使用hogan的基础上进行包装调用
app.engine(viewExt, mustlayout.delegate(hogan));
app.set(‘view engine’, viewExt);
app.set(‘views’, views);

2. 封装调用模式

var app = express();

require('mustlayout').engine(app, {
    engine: require('handlebars'),
    ext: '.tpl',
    views: '/views',
    partials: '/views/partials',
    layouts: '/views/layouts',
    cache: '/views/cache'
});

这种模式直接将所有express模板引擎的配置封装到mustlayout包的里，一个调用搞定，而不用考虑原来express中的写法，可以让模板引擎的相关配置更加统一。

不论使用上述何种方式，最终在模板渲染的时候都只有一句话：

app.get('/test', function (req, res, next)) {
    // 选择`/views`目录中的`test.tpl`模板作为目标渲染
    res.render('test', {
        name: 'abc',
        value: 12345
    });
}

而不用考虑layouts和partials要去自己写，这些都应该是模板test.tpl本身当中应该自己定义好的事情。

另外还想征集一下npm的名字，总觉得mustlayout太直白了点。

说好的插件写好了，名字就还是暂定mustlayout了，有兴趣的可以围观一下：https://github.com/mytharcher/mustlayout

对于这个问题，确实有一些开发者可能需要处理 Mustache-like 模板引擎中的 layout 和 partial 的问题。我理解你的目标是开发一个 npm 包来解决这些问题，并且能够兼容现有的 Mustache-like 模板引擎。

下面是一个简单的示例，展示如何在 Express 3 中通过中间件的方式扩展 Mustache.js 来实现多层布局和部分处理的功能。注意，Express 4 之后版本的 API 已经发生了变化，这里主要针对 Express 3 版本进行说明。

首先，你需要安装 Mustache.js 和 express：

npm install mustache express

接下来，你可以创建一个简单的中间件来处理 Mustache.js 的 layout 和 partials：

var express = require('express');
var app = express();
var fs = require('fs');

// 配置模板引擎
app.set('view engine', 'html');
app.engine('html', function (path, options, callback) {
    fs.readFile(path, 'utf8', function (err, str) {
        if (err) return callback(err);
        var rendered = mustache.render(str, options);
        // 处理 layout
        if (options.layout !== false) {
            var layoutPath = path.replace(/[^\/]+$/, options.layout || 'layout.html');
            fs.readFile(layoutPath, 'utf8', function (err, layoutStr) {
                if (err) return callback(err);
                rendered = mustache.render(layoutStr, options, {content: rendered});
                return callback(null, rendered);
            });
        } else {
            return callback(null, rendered);
        }
    });
});

// 部分处理
app.get('/partials/:name', function (req, res) {
    var name = req.params.name;
    fs.readFile(__dirname + '/views/partials/' + name + '.html', 'utf8', function (err, str) {
        if (err) return res.send(500, err);
        res.send(mustache.render(str, req.query));
    });
});

// 路由示例
app.get('/', function (req, res) {
    res.render('index', {title: '主页', layout: 'main'});
});

app.listen(3000);

这段代码中，我们通过自定义 app.engine 函数来渲染 HTML 模板，并处理 layout 和 partials。在路由 /partials/:name 中，我们可以为每个部分创建一个单独的路由，这样就可以通过不同的 URL 请求获取部分模板。

这样的实现方式可以根据具体需求进行调整和完善，以满足更多复杂的布局和部分处理的需求。希望这个示例对你有所帮助！

回到顶部