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. 【线段树 集合hash】bzoj4373: 算术天才⑨与等差数列

    hash大法好(@ARZhu):大数相乘及时取模真的是件麻烦事情 Description 算术天才⑨非常喜欢和等差数列玩耍.有一天,他给了你一个长度为n的序列,其中第i个数为a[i].他想考考你,每次 ...

  2. 【dp 贪心】bzoj4391: [Usaco2015 dec]High Card Low Card

    巧妙的贪心 Description Bessie the cow is a huge fan of card games, which is quite surprising, given her l ...

  3. （22）zabbix触发器依赖关系详解

    概述 zabbix触发器可以设置依赖性,例如我配置了两个触发器,一个触发器定义www.ttlsa.com这个HOST是否在运行中,另一个是www.ttlsa.com的网络是否通畅. 假如网络出现故障, ...

  4. 手动搭建redis集群（3台）

    安装redis 1.搜索源中的redis包 apt-cache pkgnames | grep redis 2.安装redis-server apt-get install redis-server ...

  5. 前端Web框架的实现过程

    一.Web框架的本质: 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 i ...

  6. Python 列表相关

    python列表 列表推导式 例1 [ i*i for i in range(10) ] 打印如下: >>> [i*i for i in range(10)] [0, 1, 4, 9 ...

  7. linux文本界面../和./的区别

    linux文本界面../和./的区别 ../代表的是上一个目录 ./代表的当前目录

  8. LeetCode（1）Two Sum

    题目: Given an array of integers, find two numbers such that they add up to a specific target number. ...

  9. 杭电 5773 The All-purpose Zero

    Description ?? gets an sequence S with n intergers(0 < n <= 100000,0<= S[i] <= 1000000). ...

  10. PHP读取xlsx Excel 文件

    <?php require_once 'simplexlsx.class.php'; if ( $xlsx = SimpleXLSX::parse('pricelist.xlsx') ) { p ...