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. kvm虚拟迁移

    1. 虚拟迁移 迁移: 系统的迁移是指把源主机上的操作系统和应用程序移动到目的主机,并且能够在目的主机上正常运行.在没有虚拟机的时代,物理机之间的迁移依靠的是系统备份和恢复技术.在源主机上实时备份操作 ...

  2. Linux下的Memcache安装及安装Memcache的PHP扩展安装

    Linux下Memcache服务器端的安装服务器端主要是安装memcache服务器端,目前的最新版本是 memcached-1.3.0 .下载:http://www.danga.com/memcach ...

  3. usb3.0驱动

    usb3.0驱动下载地址 华硕注入usb3.0驱动工具下载地址 https://dlsvr04.asus.com/pub/ASUS/misc/utils/ASUS_EZInstaller_V10306 ...

  4. Django 开发调试工具:Django-debug-toolbar

    介绍 django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息. github地址 文档地址 安装 pip3 in ...

  5. Python中的socket网络编程(TCP/IP,UDP)讲解

    在网络编程中的一个基本组件就是套接字(socket).套接字基本上是两个端点的程序之间的"信息通道".程序可能分布在不同的计算机上,通过套接字互相发送信息.套接字包括两个:服务器套 ...

  6. 关于security的简单理解和应用

    2018年7月30日1.搜索引擎框架百度google Lucene 单机操作,就是一堆jar包中的api的使用,自己干预,如何创建索引库,删除索引库,更新索引库,高亮,自己调度APISolr 支持we ...

  7. maven 打某一个模块的包

    mvn clean mvn clean install -pl benefit-microservice-gateway -am -Dmaven.test.skip=true

  8. kali2018利用ss和ProxyChains实现任意应用代理

    第一步:配置ss 第二步:配置proxychain vim /etc/proxychains.conf 第三步:使用proxychains 终端输入: proxychains firefox 通过代理 ...

  9. pytest分布式执行(pytest-xdist)

    前言 平常我们手工测试用例非常多时,比如有1千条用例,假设每个用例执行需要1分钟.如果一个测试人员执行需要1000分钟才能执行完,当项目非常紧急的时候, 我们会用测试人力成本换取时间成本,这个时候多找 ...

  10. HDU-5317 RGCDQ ,暴力打表!

    RGCDQ 暴力水题,很可惜比赛时没有做出来,理清思路是很简单的. 题意:定义f(i)表示i的素因子个数,给你一段区间[l,r],求max_gcd(f(i),f(j)).具体细节参考题目. 思路:数据 ...