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. 2018-10-09中国裁判文书网爬虫vl5x和DocID分析

    本来是想要抓取食药监的药品数据,看到js加密很繁琐,调了一个星期没有结果,想看看其他类似网站的js加密情况,发现裁判文书网的加密好像不是太复杂,经过两天的分析和编写,基本把vl5x加密和DocID解密 ...

  2. Flux reference

    https://facebook.github.io/flux/docs/dispatcher.html#content 首先安装 npm install --save flux Dispatcher ...

  3. Dajngo admin

    Dajngo admin admin app Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.p ...

  4. 代理授权验证_web客户端授权验证

    HTTPPasswordMgrWithDefaultRealm() HTTPPasswordMgrWithDefaultRealm()类将创建一个密码管理对象,用来保存 HTTP 请求相关的用户名和密 ...

  5. Knockout v3.4.0 中文版教程-13-控制文本内容和外观-css绑定

    4. css绑定 目的 css绑定可以给关联的DOM元素添加或移除一个或多个CSS类.该绑定很有用,比如,当一些值为负数时高亮这些值为红色. (注意:如果你不想使用一个CSS类选择器来附加样式而想直接 ...

  6. linux -- 查找（find）命令 一

    find: find命令是非常有用的linux命令,我们可以用它来根据指定的搜索条件来搜索整个文件系统来查找文件或目录. 基本的‘find file’命令 find . -name "foo ...

  7. C++ char数组和string类简单使用总结

    使用char数组,进行字符串的操作,是c风格的操作方式. string是C++的风格,感觉string本质上就是一个vector<char> 以下代码详细展示了字符串的常见操作 #incl ...

  8. HDU 5527 Too Rich

    Too Rich Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  9. 【Go】错误处理

    · error类型是一个接口类型,也是一个Go语言的内建类型.在这个接口类型的声明中只包含了一个方法Error.这个方法不接受任何参数,但是会返回一个string类型的结果.它的作用是返回错误信息的字 ...

  10. P1140 相似基因 (动态规划)

    题目背景 大家都知道,基因可以看作一个碱基对序列.它包含了4种核苷酸,简记作A,C,G,T.生物学家正致力于寻找人类基因的功能,以利用于诊断疾病和发明药物. 在一个人类基因工作组的任务中,生物学家研究 ...