简单、强大的swig.js
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的更多相关文章
- PNotify – 简单易用的 JS 通知,消息提示插件
PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...
- Hexo - 快速,轻量,强大的 Node.js 博客框架
Hexo 是一个快速,轻量,强大的 Node.js 博客框架.带给你难以置信的编译速度,瞬间生成静态文件:支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件:只需要一个命令 ...
- 简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
- hexo —— 简单、快速、强大的Node.js静态博客框架
hexo是一款基于Node.js的静态博客框架.目前在GitHub上已有1375 star 和 219 fork. 特性 风一般的速度 Hexo基于Node.js,支持多进程,几百篇文章也可以秒生成. ...
- (转)第01节:初识简单而且强大的Fabric.js库
Fabric.js是一个功能强大和简单Javascript HTML5的canvas库.Fabric提供了很多可以互动的Canvas元素,还在canvas上提供了SVG的语法分析器. 你可以轻松的使用 ...
- javascript常用开发笔记:一个简单强大的js日期格式化方法
前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...
- 简单粗暴地理解js原型链--js面向对象编程
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
- 从现在开始,使用简单优雅的validata.js
表单验证,是后台开发中万年不变的话题,在经历许多实战之后发现 使用优雅便捷的validate.js实现验证实在是一件非常愉悦的事情 <form data-validate> Enter: ...
- 从一个简单例子来理解js引用类型指针的工作方式
<script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...
随机推荐
- Codeforces Round #477滚粗记&&祭第一次div2场
4.29 - 23:58:现在似乎在ST的样子……先等一波 Day4.29 prescript : 难得遇上一场9:00开始的div2,看了看大家都打,索性也当一回神仙吧. 晚上出去吃饭,匆匆赶回家, ...
- uboot的readme
## (C) Copyright 2000 - 2008# Wolfgang Denk, DENX Software Engineering, wd@denx.de.## See file CREDI ...
- HDU 2829 斜率优化DP Lawrence
题意:n个数之间放m个障碍,分隔成m+1段.对于每段两两数相乘再求和,然后把这m+1个值加起来,让这个值最小. 设: d(i, j)表示前i个数之间放j个炸弹能得到的最小值 sum(i)为前缀和,co ...
- PYDay6- 内置函数、验证码、文件操作、发送邮件函数
1.内置函数 1.1Python的内置函数 abs() dict() help() min() setattr() all() dir() hex() next() slice() any() div ...
- mysql replication常见错误整理
这篇文章旨在记录MySQL Replication的常见错误,包括自己工作中遇到的与网友在工作中遇到的,方面自己及别人以后进行查找.每个案例都是通过Last_IO_Errno/Last_IO_Erro ...
- centos 7安装libreoffice
centos 7安装libreoffice Centos下的LibreOffice安装: 关键字: LibreOffice , sdk ,汉化 ,解压 安装Centos7之后,系统安装了libreo ...
- 九度oj 题目1262:Sequence Construction puzzles(I)_构造全递增序列
题目描述: 给定一个整数序列,请问如何去掉最少的元素使得原序列变成一个全递增的序列. 输入: 输入的第一行包括一个整数N(1<=N<=10000). 接下来的一行是N个满足题目描述条件的整 ...
- JAVA如何解压缩ZIP文档
代码片段: package org.yu.units; import java.io.Closeable; import java.io.File; import java.io.FileInputS ...
- nginx 的日志切割
nginx的日志切割脚本 说明:在nginx的配置文件中nginx.conf并没有定义access_log的位置, 在/usr/local/nginx/conf/vhost/下的配置文件中定义了acc ...
- HackerRank# Stock Maximize
原题地址 不知道为什么要用动态规划做,明明是扫几遍就行了啊 HackerRank上的题目特别喜欢long long类型啊,不用就爆.. 代码: #include <cmath> #incl ...