简单、强大的swig.js

来源：互联网发布：java并发框架支持锁编辑：程序博客网时间：2024/05/20 16:09

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 jsGlobalConfig.requireScripts.push('...');requirejs(GlobalConfig.requireScripts, function () {  // todo}

Others

Super Quick Start:
Swig.js docs

1 0