简单、强大的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 ...
随机推荐
- kvm虚拟迁移
1. 虚拟迁移 迁移: 系统的迁移是指把源主机上的操作系统和应用程序移动到目的主机,并且能够在目的主机上正常运行.在没有虚拟机的时代,物理机之间的迁移依靠的是系统备份和恢复技术.在源主机上实时备份操作 ...
- Linux下的Memcache安装及安装Memcache的PHP扩展安装
Linux下Memcache服务器端的安装服务器端主要是安装memcache服务器端,目前的最新版本是 memcached-1.3.0 .下载:http://www.danga.com/memcach ...
- usb3.0驱动
usb3.0驱动下载地址 华硕注入usb3.0驱动工具下载地址 https://dlsvr04.asus.com/pub/ASUS/misc/utils/ASUS_EZInstaller_V10306 ...
- Django 开发调试工具:Django-debug-toolbar
介绍 django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息. github地址 文档地址 安装 pip3 in ...
- Python中的socket网络编程(TCP/IP,UDP)讲解
在网络编程中的一个基本组件就是套接字(socket).套接字基本上是两个端点的程序之间的"信息通道".程序可能分布在不同的计算机上,通过套接字互相发送信息.套接字包括两个:服务器套 ...
- 关于security的简单理解和应用
2018年7月30日1.搜索引擎框架百度google Lucene 单机操作,就是一堆jar包中的api的使用,自己干预,如何创建索引库,删除索引库,更新索引库,高亮,自己调度APISolr 支持we ...
- maven 打某一个模块的包
mvn clean mvn clean install -pl benefit-microservice-gateway -am -Dmaven.test.skip=true
- kali2018利用ss和ProxyChains实现任意应用代理
第一步:配置ss 第二步:配置proxychain vim /etc/proxychains.conf 第三步:使用proxychains 终端输入: proxychains firefox 通过代理 ...
- pytest分布式执行(pytest-xdist)
前言 平常我们手工测试用例非常多时,比如有1千条用例,假设每个用例执行需要1分钟.如果一个测试人员执行需要1000分钟才能执行完,当项目非常紧急的时候, 我们会用测试人力成本换取时间成本,这个时候多找 ...
- HDU-5317 RGCDQ ,暴力打表!
RGCDQ 暴力水题,很可惜比赛时没有做出来,理清思路是很简单的. 题意:定义f(i)表示i的素因子个数,给你一段区间[l,r],求max_gcd(f(i),f(j)).具体细节参考题目. 思路:数据 ...