Node.js教程简单、强大的swig.js-职坐标

Node.js教程简单、强大的swig.js

沉沙 2018-10-19 来源：阅读 1282 评论 0

摘要：本篇教程介绍了Node.js教程简单、强大的swig.js，希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。

本篇教程介绍了Node.js教程简单、强大的swig.js，希望阅读本篇文章以后大家有所收获，帮助大家对Node.js的理解更加深入。

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>
  
  <script src="/main.js"></script>
  
  <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

            $(function () {
                $(‘pre.prettyprint code‘).each(function () {
                    var lines = $(this).text().split(‘\n‘).length;
                    var $numbering = $(‘<ul/>‘).addClass(‘pre-numbering‘).hide();
                    $(this).addClass(‘has-numbering‘).parent().append($numbering);
                    for (i = 1; i <= lines; i++) {
                        $numbering.append($(‘<li/>‘).text(i));
                    };
                    $numbering.fadeIn(1700);
                });
            });