Swig.js

A simple, powerful, and extendable JavaScript Template Engine。

简单概括:JS模板引擎。

Why to use

  • 根据路劲渲染页面
  • 面向对象的模板继承,页面更复用
  • 动态页面
  • 高速上手
  • 功能强大
  • Others

How to use

參见swig.js官网

项目实例

页面复用

大部分页面都有header 和 footer区域,能够通过继承页面实现复用,详细例如以下:

layout.html

<html>
<head>
</head>
<body>
<div class="header-container">
...
</div> {% block content %}{% endblock %} <div class="footer-container">
...
</div>
</body>
</html>

welcome.html

// 根据实际文件夹填写
{% extends '../layout.html' %}
{% block content %}
<div class="content-container">
<h1>hello swig.js</h1>
</div>
{% endblock %}

信息、功能函数配置化

企业信息、全部权、工商注冊号等信息,可将这些信息存在在system-params.json中,还能够加入实时计算函数。然后通过swig.js显示和调用:

system-params.json:

{
"isDevMode": "true",
"corporation": "CCCCCCCC",
"ICPNumber": "沪ICP备xxxxxxxx号",
...
}

app.js

var systemParams = require('./config/system-params.json'),
swig = require('swig');
swig.setDefaults({
cache: !systemParams.isDevMode,
locals: {
now: function () {
return new Date();
},
systemParams: systemParams
}
});

layout.html

<html>
...
<body>
{% block content %}{% endblock %} <div class="footer-container">
<p class="text-center">
<span>Copyright © {{now() | date('Y')}}</span>
<span>{{systemParams.corporation}}</span>
<span>{{systemParams.ICPNumber}}</span>
</p>
</div>
</body>
</html>

Express.js 和 Require.js整合

在Express.js中通过swig.js路劲渲染页面,页面中使用require.js的require(deps, callback)形式载入页面须要的js:

app.js

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

routers.js

module.exports = [{
path: '/',
view: 'default/welcome',
data: {
title: 'welcome',
requireScripts: [
'controllers/default/welcome-controller'
],
styles: [
'default/welcome.css'
]
}
}];

config-routers.js

var routers = require('./routers');
...
for ... {
... router.get(routers[i].path, function(req, res) {
res.render(routers[i].view, routers[i].data, routers[i].callback);
});
}

layout.html

<html>
<head>
... {% if styles %}
{% for style in styles %}
<link rel="stylesheet" href="{{style}}" />
{% endfor %}
{% endif %} ...
</head>
<body>
... <script type="text/javascript">
var GlobalConfig = {
requireScripts: []
}; // add require scripts by page config
{% if requireScripts %}
{% for script in requireScripts %}
GlobalConfig.requireScripts.push('{{ script }}');
{% endfor %}
{% endif %}
</script> <script src="/lib/require/require.js"></script>
<!-- require.js配置信息 -->
<script src="/main.js"></script>
<!-- require(deps, callback)载入页面依赖js -->
<script src="/bootstrap.js"></script>
</body>
</html>

bootstrap.js

// add others js
GlobalConfig.requireScripts.push('...'); requirejs(GlobalConfig.requireScripts, function () {
// todo
}

Others

Super Quick Start:

Swig.js docs

简单、强大的swig.js的更多相关文章

  1. PNotify – 简单易用的 JS 通知,消息提示插件

    PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...

  2. Hexo - 快速,轻量,强大的 Node.js 博客框架

    Hexo 是一个快速,轻量,强大的 Node.js 博客框架.带给你难以置信的编译速度,瞬间生成静态文件:支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件:只需要一个命令 ...

  3. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

  4. hexo —— 简单、快速、强大的Node.js静态博客框架

    hexo是一款基于Node.js的静态博客框架.目前在GitHub上已有1375 star 和 219 fork. 特性 风一般的速度 Hexo基于Node.js,支持多进程,几百篇文章也可以秒生成. ...

  5. (转)第01节:初识简单而且强大的Fabric.js库

    Fabric.js是一个功能强大和简单Javascript HTML5的canvas库.Fabric提供了很多可以互动的Canvas元素,还在canvas上提供了SVG的语法分析器. 你可以轻松的使用 ...

  6. javascript常用开发笔记:一个简单强大的js日期格式化方法

    前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...

  7. 简单粗暴地理解js原型链--js面向对象编程

    原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...

  8. 从现在开始,使用简单优雅的validata.js

    表单验证,是后台开发中万年不变的话题,在经历许多实战之后发现 使用优雅便捷的validate.js实现验证实在是一件非常愉悦的事情 <form data-validate> Enter: ...

  9. 从一个简单例子来理解js引用类型指针的工作方式

    <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...

随机推荐

  1. Codeforces Round #477滚粗记&&祭第一次div2场

    4.29 - 23:58:现在似乎在ST的样子……先等一波 Day4.29 prescript : 难得遇上一场9:00开始的div2,看了看大家都打,索性也当一回神仙吧. 晚上出去吃饭,匆匆赶回家, ...

  2. uboot的readme

    ## (C) Copyright 2000 - 2008# Wolfgang Denk, DENX Software Engineering, wd@denx.de.## See file CREDI ...

  3. HDU 2829 斜率优化DP Lawrence

    题意:n个数之间放m个障碍,分隔成m+1段.对于每段两两数相乘再求和,然后把这m+1个值加起来,让这个值最小. 设: d(i, j)表示前i个数之间放j个炸弹能得到的最小值 sum(i)为前缀和,co ...

  4. PYDay6- 内置函数、验证码、文件操作、发送邮件函数

    1.内置函数 1.1Python的内置函数 abs() dict() help() min() setattr() all() dir() hex() next() slice() any() div ...

  5. mysql replication常见错误整理

    这篇文章旨在记录MySQL Replication的常见错误,包括自己工作中遇到的与网友在工作中遇到的,方面自己及别人以后进行查找.每个案例都是通过Last_IO_Errno/Last_IO_Erro ...

  6. centos 7安装libreoffice

    centos 7安装libreoffice Centos下的LibreOffice安装: 关键字: LibreOffice , sdk ,汉化  ,解压 安装Centos7之后,系统安装了libreo ...

  7. 九度oj 题目1262:Sequence Construction puzzles(I)_构造全递增序列

    题目描述: 给定一个整数序列,请问如何去掉最少的元素使得原序列变成一个全递增的序列. 输入: 输入的第一行包括一个整数N(1<=N<=10000). 接下来的一行是N个满足题目描述条件的整 ...

  8. JAVA如何解压缩ZIP文档

    代码片段: package org.yu.units; import java.io.Closeable; import java.io.File; import java.io.FileInputS ...

  9. nginx 的日志切割

    nginx的日志切割脚本 说明:在nginx的配置文件中nginx.conf并没有定义access_log的位置, 在/usr/local/nginx/conf/vhost/下的配置文件中定义了acc ...

  10. HackerRank# Stock Maximize

    原题地址 不知道为什么要用动态规划做,明明是扫几遍就行了啊 HackerRank上的题目特别喜欢long long类型啊,不用就爆.. 代码: #include <cmath> #incl ...