Nodejs 推荐一款开源的Javascript模板引擎，希望大家多提意见，一起努力给做好

Nodejs 推荐一款开源的Javascript模板引擎，希望大家多提意见，一起努力给做好

#whiskers.js

资源地址：https://github.com/abcrun/whiskers

whiskers.js是一个Javascript模板组件，它可以用来将一段 特殊标记的字符串(whiskers模板) 转换为相应的HTML代码。

随着AJAX的兴起，一些服务器端的工作转移到了客户端上。以微博为例，客户端向服务器发送请求来获取最新消息，当客户端收到最新的消息后，会将这些数据按照一定的结构组装成HTML代码，然后回填到页面中。而whiskers.js就是可以用来将从后台获取到数据按照设定好的HTML结构( whiskers模板 )转换成HTML代码的模板组件。

下面是一个简单的示例：

快速预览
var template = 'div#wrapper>ul.lists[data-type=news]>li*2>span>{{=Hello World}}'; //whiskers模板
Whiskers.render(template);

将会生成如下HTML代码：

<div id="wrapper">
	<ul class="lists" data-type="news">
		<li><span>Hello World</span></li>
		<li><span>Hello World</span></li>
	</ul>
</div>

2 回复

Nodejs 推荐一款开源的JavaScript模板引擎，希望大家多提意见，一起努力给做好

在现代Web开发中，前端模板引擎是一个非常重要的工具。它能够帮助我们更高效地构建用户界面。今天我推荐一款非常优秀的开源JavaScript模板引擎——Whiskers.js。

Whiskers.js

资源地址

简介

Whiskers.js 是一个轻量级且功能强大的JavaScript模板引擎。它允许你使用一种特殊的语法将字符串（称为 Whiskers模板）转换成相应的HTML代码。这使得前端开发更加灵活和高效。

使用场景

随着AJAX技术的广泛应用，越来越多的数据交互发生在客户端。例如，在一个微博应用中，客户端需要向服务器请求最新的消息，并将其显示在页面上。这时，Whiskers.js 可以帮助你将从服务器获取的数据按照预设的HTML结构转换成实际的HTML代码。

示例代码

快速预览

// 定义一个Whiskers模板
var template = 'div#wrapper&gt;ul.lists[data-type=news]&gt;li*2&gt;span&gt;{{=Hello World}}';

// 渲染模板
console.log(Whiskers.render(template));

输出结果

<div id="wrapper">
	<ul class="lists" data-type="news">
		<li><span>Hello World</span></li>
		<li><span>Hello World</span></li>
	</ul>
</div>

解释

  • div#wrapper：定义一个ID为wrapper的div元素。
  • ul.lists[data-type=news]：在div内部定义一个类名为lists的ul列表，并设置一个自定义属性data-type为news。
  • li*2：定义两个li列表项。
  • span&gt;{{=Hello World}}：每个li列表项内部包含一个span标签，并且显示文本Hello World。

通过上述示例，你可以看到Whiskers.js 提供了一种简洁且直观的方式来创建复杂的HTML结构。希望你能试用一下，并提出宝贵的意见，共同改进这款优秀的开源项目！


Node.js 推荐一款开源的JavaScript模板引擎

大家好！我在这里推荐一款非常优秀的开源JavaScript模板引擎——Nunjucks。Nunjucks 是一个功能强大的模板引擎，最初是为Python设计的，但现在它已经移植到了Node.js平台，并且非常适用于前端和后端开发。

资源地址

Nunjucks GitHub

简介

Nunjucks 提供了一种简单而强大的方式来创建和渲染模板。你可以使用它来动态生成HTML、JSON、XML等格式的数据。它的语法简洁易懂，并且支持很多高级特性，如继承、宏、过滤器等。

示例代码

安装 Nunjucks

首先，你需要通过npm安装Nunjucks：

npm install nunjucks

基本使用示例

模板文件 (example.njk)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ greeting }}</h1>
    <ul>
        {% for item in items %}
        <li>{{ item.name }} - {{ item.price | currency }}</li>
        {% endfor %}
    </ul>
</body>
</html>

渲染模板

const nunjucks = require('nunjucks');

// 设置模板文件夹路径
nunjucks.configure('templates', {
    autoescape: true,
    watch: false
});

// 渲染模板
const result = nunjucks.render('example.njk', {
    title: '商品列表',
    greeting: '欢迎来到我们的商店',
    items: [
        { name: '苹果', price: 5 },
        { name: '香蕉', price: 3 }
    ]
});

console.log(result);

上面的代码将会输出如下HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
</head>
<body>
    <h1>欢迎来到我们的商店</h1>
    <ul>
        <li>苹果 - ¥5.00</li>
        <li>香蕉 - ¥3.00</li>
    </ul>
</body>
</html>

总结

Nunjucks 是一个非常灵活且强大的模板引擎，适合各种规模的项目。它的文档也非常详尽，使用起来非常方便。希望这款模板引擎能给大家带来便利！

感谢大家的支持和反馈！

回到顶部