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. vuex其实超简单,只需3步

    前言 之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术选型上选用了 vuex, 但是不知道为什么,团队里的一些新人一听 ...

  2. json数据格式 与 for in

    格式一: var json1={ name:'json', age:'23' }; json1.name='金毛'; 格式二: (比较安全)  属性名字里有空格或者有连字符‘-’或者有保留字例如‘fo ...

  3. Codeforces Round #877 (Div. 2) D. Olya and Energy Drinks

    题目链接:http://codeforces.com/contest/877/problem/D D. Olya and Energy Drinks time limit per test2 seco ...

  4. JavaScript正则表达式-定义

    通过RegExp()构造函数创建RegExp对象来定义正则表达式. var reg_pattern = new RegExt("a\d"); 通过字面语法直接定义正则表达式. va ...

  5. 关于django form验证是否用户名已存在

    想通过django的Form模块进行数据库中是否已存在用户名的验证,首先我先调用了数据库用户名字段所有的值,发现是个queryset对象. 随后经过查询后发现queryset查询集对象可以调用list ...

  6. ython——杂货铺

    三目运算: >>> 1 if 5>3 else 0 1 >>> 1 if 5<3 else 0 0 深浅拷贝: 一.数字和字符串 对于 数字 和 字符串 ...

  7. appium+python自动化-xpath定位

    基本属性定位 以淘宝app为例,定位左上角扫一扫按钮 1.可以通过text文本定位到 //*[@text='text文本属性'] # 定位text driver.find_element_by_xpa ...

  8. 总结搭建Oracle11g DG踩的坑

    此次的操作环境是Oracle11g 单实例,os为Linux,采用duplicate在线创建物理备库 primary上设置相关参数 ALTER SYSTEM SET LOG_ARCHIVE_CONFI ...

  9. CentOS 7.0如何安装配置iptables和seLinux以及firewalld

    一.配置防火墙,开启80端口.3306端口 CentOS .0默认使用的是firewall作为防火墙,这里改为iptables防火墙. .关闭firewall: systemctl stop fire ...

  10. redis主从原理介绍（三）

    博客参考:散尽浮华的Redis主从复制下的工作原理梳理 此作者写的非常好,此处只做挪用,方便自己查看. Redis主从复制的配置十分简单,它可以使从服务器是主服务器的完全拷贝.需要清除Redis主从复 ...