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. 使用Fiddler抓取IOS_APP的请求

    首先在地址https://www.telerik.com/fiddler 下载我们需要的fiddler 在新窗口中写上一些信息然后点击[Download for Windows]进行下载: 安装成功后 ...

  2. MySQL 查询优化之 Multi-Range Read

    MySQL 查询优化之 Multi-Range Read MRR的工作原理 MRR开启与关闭 使用MRR示例 参考文档 在存储引擎中未缓存的大表,使用辅助索引的range scan检索数据, 可能会导 ...

  3. 如何用DOM 元素就能画出国宝熊猫

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

  4. Linux配置使用SSH Key登录并禁用root密码登录(替换同理)

    Linux系统大多说都支持OpenSSH,生成公钥.私钥的最好用ssh-keygen命令,如果用putty自带的PUTTYGEN.EXE生成会不兼容OpenSSH,从而会导致登录时出现server r ...

  5. Python从文件中读取数据

    一.读取整个文件内容 在读取文件之前,我们先创建一个文本文件resource.txt作为源文件. resource.txt my name is joker, I am 18 years old, H ...

  6. （转）python之禅

    凡是用过 Python的人,基本上都知道在交互式解释器中输入 import this 就会显示 Tim Peters 的 The Zen of Python,但它那偈语般的语句有点令人费解,所以我想分 ...

  7. 【C#】【数据结构】002-线性表：单链表

    C#数据结构:单链表 1.自定义单链表结构: 单链节点类 using System.Collections; using System.Collections.Generic; using Unity ...

  8. gitlab之gitlab-ci自动部署

    简介 gitlab-ci全称是gitlab continuous integration的意思,也就是持续集成.中心思想是当每一次push到gitlab的时候,都会触发一次脚本执行,然后脚本的内容包括 ...

  9. Spring注解@Component、@Repository、@Service、@Controller

    @Service用于标注业务层组件 @Controller用于标注控制层组件(如struts中的action) @Repository用于标注数据访问组件,即DAO组件 @Component泛指组件, ...

  10. 在windows下安装flex和bison、GCC

    学习Stellar-core 需要依赖项flex .bison .gcc三个依赖项 下载得网址:链接: https://pan.baidu.com/s/1mitCLcs 密码: 3jaj   通过 w ...