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. Educational Codeforces Round 40千名记

    人生第二场codeforces.然而遇上了Education场这种东西 Educational Codeforces Round 40 下午先在家里睡了波觉,起来离开场还有10分钟. 但是突然想起来还 ...

  2. 更改ubuntu的官方镜像源

    我们自己安装的ubuntu通常默认镜像源是官方的,并不好用,因为网速以及限制比较多,所以为了使用方便,通常都会去更改一下默认的镜像源配置. 这里我们使用清华大学开源镜像软件站,https://mirr ...

  3. HUAWEI交换机配置telnet登录

    Huawei交换机配置Telnet登录 一,交换机开启Telnet服务 <Huawei>system-view                                        ...

  4. RN服务

    https://facebook.github.io/react-native/docs/headless-js-android.html 当app在 后台运行 时,我们可以使用RN服务来同时地刷新数 ...

  5. 如何用纯 CSS 创作一个雷达扫描动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdbGvr 可交互视频 ...

  6. Python9-继承1-day24（大年初一）

    #面向对象编程:'''思想:角色的抽象,创建类,创建角色,面对对象的关键字class 类名: 静态属性 = ‘aaa' def __init__(self):pass 类名.静态属性 ———存储在类的 ...

  7. C#自定义Excel操作类

    C#自定义Excel操作类,可以用于将DataTable导出到Excel文件,从Excel文件读取数据. using System; using System.IO; using System.Dat ...

  8. prometheus + mysqld_exporter + grafana 实现对mysql db的监控

    https://blog.csdn.net/hfut_wowo/article/details/78536022 1.参考这篇博文2.博主的用的是windows版本 prometheus-2.5.0- ...

  9. Java-确定一个类对象代表一个类还是接口

    package com.tj; public class MyClass implements Cloneable { public static void main(String[] args) { ...

  10. 【01】报错：webpack 不是内部或不可执行命令

    [02] webpack 不是内部或不可执行命令 一般来安装完之后是可以直接执行的你可以执行 webpack -v 或者是 webpack --help   这样的就是正确的,我的问题的解决办法是 将 ...