Nodejs 有没有办法在浏览器端进行Jade的解析

Nodejs 有没有办法在浏览器端进行Jade的解析

RT，最近在做HTML5的WebApp，十分怀念Jade的简单高效 …

请问Jade有没有办法在浏览器端进行解析呢？ 只要能兼容Webkit平台就可以了

或者说有没有什么高性能的，语法简洁优雅的浏览器端模板引擎，能推荐呢

感谢~

9 回复

当然可以！Jade（现在更名为Pug）是一种简洁且高效的模板引擎，虽然它最初是为服务器端设计的，但也可以在浏览器端使用。你可以通过引入一个JavaScript库来实现这一点。

在浏览器端解析Pug（原Jade）

1. 引入Pug库

首先，你需要在你的HTML文件中引入Pug的JavaScript库。可以通过CDN来加载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pug in Browser</title>
    <!-- 引入Pug的JS库 -->
    <script src="https://cdn.jsdelivr.net/npm/pug@3.0.2/dist/pug.min.js"></script>
</head>
<body>
    <div id="content"></div>

    <script>
        // Pug模板字符串
        const pugTemplate = `
            h1 Hello, Pug!
            p This is a simple example.
        `;

        // 渲染Pug模板到指定的DOM元素
        document.getElementById('content').innerHTML = pug.compile(pugTemplate)();
    </script>
</body>
</html>

2. 使用Pug模板

上面的代码片段展示了如何在浏览器中使用Pug模板。pug.compile()函数将Pug模板字符串编译成一个函数，该函数接受数据并返回渲染后的HTML字符串。然后，你可以将这个字符串插入到页面中的某个元素里。

推荐其他高性能的模板引擎

如果你在寻找其他高性能且语法简洁优雅的模板引擎，这里有几个推荐：

  1. Handlebars - 非常流行，支持预编译，性能优秀。

    <script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.7/dist/handlebars.min.js"></script>

  2. Mustache - 轻量级，跨语言支持。

    <script src="https://cdn.jsdelivr.net/npm/mustache@4.0.0/mustache.min.js"></script>

  3. EJS (Embedded JavaScript templates) - 简洁易用，支持嵌入JavaScript表达式。

    <script src="https://cdn.jsdelivr.net/npm/ejs@3.1.6/ejs.min.js"></script>

这些模板引擎都有各自的优点，可以根据项目需求选择最适合的一个。希望这对你有所帮助！


html,css一开始设计成jade这样子就好了

有浏览器版的

能说的更详细一点么~ 感谢了

html 5 的webapp 用客户端进行渲染???这个不是应该力求避免的事情来的吗?

非在线运行的WebApp，会配合PhoneGap打包为本地App来运行

https://github.com/visionmedia/jade#browser-support 这个0,0

只要求简洁的话我是写 coffee 的供参考, 啥时候应该测下性能… https://github.com/jiyinyiyong/lilyturf

要在浏览器端解析Jade（现在称为Pug），可以使用Pug的客户端版本。不过，需要注意的是，Pug的主要设计目的是作为服务器端的模板引擎。尽管如此，在浏览器端使用Pug仍然是可行的，并且有一些库可以帮助你实现这一点。

示例代码

首先，你需要在HTML文件中引入Pug的客户端库：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pug in Browser</title>
    <!-- 引入Pug客户端库 -->
    <script src="https://cdn.jsdelivr.net/npm/pug-runtime@1.0.1/pug-runtime.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        // Pug模板字符串
        const pugTemplate = `
            h1 Hello, Pug!
            p This is a paragraph generated by Pug.
        `;

        // 渲染Pug模板到指定的DOM元素
        document.getElementById('content').innerHTML = pug.compile(pugTemplate)({});
    </script>
</body>
</html>

解释

  1. 引入Pug客户端库：

    • 使用<script>标签从CDN引入Pug的运行时库。这将允许你在浏览器端使用Pug编译器。

  2. 定义Pug模板：

    • 在JavaScript代码中，你可以直接定义一个Pug模板字符串。这里使用了ES6模板字符串，但你也可以使用普通字符串。

  3. 渲染Pug模板：

    • 使用pug.compile()方法编译Pug模板字符串，然后调用返回的函数并传入一个空对象作为上下文。编译结果会被设置为#content元素的innerHTML。

高性能的替代方案

如果你正在寻找高性能且语法简洁优雅的浏览器端模板引擎，以下是一些备选方案：

  • Handlebars：非常流行，具有良好的性能和丰富的功能。
  • Mustache：轻量级，易于学习和使用。
  • Nunjucks：类似于Pug，功能强大，支持自定义过滤器和扩展。

这些模板引擎都有各自的优点，可以根据项目需求选择合适的库。例如，你可以考虑使用Handlebars或Mustache来代替Pug。

希望这些信息对你有所帮助！

回到顶部