scrat 后端渲染解决方案的模板扩展
scrat后端渲染组件化开发模式通过扩展 swig 模板引擎实现了组件资源管理方案。
var express = require('express');
var engine = require('scrat-swig');
var app = express();
app.set('view engine', 'tpl');
app.set('views', 'path/to/template/dir');
app.engine('tpl', engine.renderFile);
engine.setDefaults(options); //模板引擎默认配置
app.get('/page/*', engine.middleware(opt)); //中间件配置项http://paularmstrong.github.io/swig/docs/api/#setDefaults
- map：
Object|String资源表数据或资源表文件路径 - cacheMap：
Boolean是否缓存资源表（上线时应设置为true，以提高性能；本地开发中应设置为false，方便自动更新） - comboURI：
Function加工Combo请求的处理函数，不用关心，默认写好了 - logger：
Console日志对象 - root：
String模板目录
-
功能：资源/组件引用接口，调用后只是收集资源，并不会有内容输出。
-
闭合：NO
-
参数：
- $id：字符串或模板变量。要引用的组件id或相对路径
-
示例：
{% require $id="header" %} {# 组件id #} {% require $id="./lib.js" %} {# 工程路径 #} {% for val in obj %} {% require $id=val %} {# 模板变量 #} {% endfor %}
-
功能：替代原生的
<html>标签包裹页面主体部分，用于实现资源url输出时替换页面占位 -
闭合：YES
-
参数：
- cdn:指定pagelet加载时所用的域名,可以是字符串字面量,也可以是模板变量
- 任何其他参数都将转换为输出的html标签的属性。
-
示例：
{% html class="abc" data-value="bcd" %} ... {% endhtml %}渲染后的html：
<html class="abc" data-value="bcd"> ... </html>
-
功能：替代原生的
<head>标签包裹页面head部分，用于实现资源CSS输出占位 -
闭合：YES
-
参数：任何参数都将转换为输出的head标签的属性。
-
示例：
{% html%} {% head class="abc" data-xxx="bcd" %} ... {% endhead %} ... {% endhtml %}渲染后的html：
<html> <head class="abc" data-xxx="bcd"> ... </head> ... </html>
-
功能：替代原生的
<body>标签包裹页面body部分，用于实现资源JS输出占位 -
闭合：YES
-
参数：任何参数都将转换为输出的body标签的属性。
-
示例：
{% html%} {% head %} ... {% endhead %} {% body class="main" id="main" data-ooo="abc" %} ... {% endbody %} {% endhtml %}渲染后的html：
<html> <head> ... </head> <body class="main" id="main" data-ooo="abc"> ... </body> </html>
-
功能：替代原生的
script标签，收集页面中散落的script脚本统一放到页面尾部输出。 -
闭合：YES
-
参数：无
-
示例：
{% html%} {% head %} ... {% require $id="../lib/jquery.js" %} {# 引用资源 #} {% endhead %} {% body %} ... {% script %} var header = require('header'); header.init(); {% endscript %} {% require $id="./index.js" %} {# 引用资源 #} {% endbody %} {% endhtml %}渲染后的html：
<html> <head> ... </head> <body> ... <script src="/views/lib/jquery.js"></script> <script src="/views/index/index.js"></script> <script> !function(){ var header = require('header'); header.init(); }(); </script> </body> </html>
-
注意：在body闭合标签之前，js输出的顺序是：
- require标签加载的外链js
- script标签收集的内联js
-
功能：页面区域划分，用于quickling加载页面
-
闭合：YES
-
注意：pagelet默认会生成一个dom结构，如果希望不生成任何结构，须设置
$tag属性值为字符串"none" -
参数：
- $id：字符串|模板变量。定义pagelet的id
- $tag：字符串|模板变量|"none"。要生成的占位标签的标签名，可以不指定，默认是
div。如果指定为none，框架会输出一个注释来标注pagelet的范围。 - 任何其他参数都将转换为输出的pagelet占位标签的属性。
-
示例：
{% html%} {% head %} ... {% endhead %} {% body %} ... {% pagelet $id="main" class="main" %} <ul> {% pagelet $id="list" $tag="none" %} {% for item in list %} <li>{{ loop.index }} - {{ loop.key }}: {{ x }}</li> {% endfor %} {% endpagelet %} </ul> {% pagelet $id="form" $tag="form" id="my-form" class="form-control" %} <input type="text" name="username"> {% endpagelet %} {% endpagelet %} ... {% endbody %} {% endhtml %}渲染后的html：
<html> <head> ... </head> <body> ... <div class="main" data-pagelet="main"> <ul> <!-- pagelet [main.list] start --> <li>0 - a: 123</li> <li>0 - b: 456</li> <!-- pagelet [main.list] end --> </ul> <form id="my-form" class="form-control" data-pagelet="main.form"> <input type="text" name="username"> </form> </div> ... </body> </html>
-
功能：如果使用quickling切换页面，你的页面此标签替代原生的
<title>标签用以收集页面标题数据，这样页面切换后框架可以自动修改页面的title显示。 -
闭合：YES
-
参数：无
-
示例：
{% html%} {% head %} ... {% title %}首页{% endtitle %} {% endhead %} {% body %} ... {% endbody %} {% endhtml %}渲染后的html：
<html> <head> ... <title>首页</title> </head> <body> ... </body> </html>
-
功能：在pagelet区域内收集模板数据将来在quickling加载时可以传递给前端框架。
-
闭合：NO
-
参数：请参考swig的 set标签 用法
-
示例：
{% html%} {% head %} ... {% title %} 列表页 - 第{{ offset }}页 {% endtitle %} {% endhead %} {% body %} ... {% pagelet $id="main" class="main" %} {% pagelet $id="list" $tag="ul" %} {% for item in list %} <li>{{ loop.index }} - {{ loop.key }}: {{ x }}</li> {% endfor %} {% datalet page=offset %} {% endpagelet %} {% endpagelet %} ... {% endbody %} {% endhtml %}假设前端获取main.list的pagelet数据：
{ "title": "列表页 - 第5页", // title收集 "html": { "main.list": "..." // pagelet的html内容 }, "data": { page: 5 // datalet收集 }, "js": [ ... ], // js依赖 "css": [ ... ], // css依赖 "script": [ ... ] // script收集 }
-
功能：收集位于
ATF标签以上的css资源，并内嵌到主文档的head标签中。只会收集使用require标签加载的css资源，并不会收集link标签的css资源。用于加快首屏渲染速度的优化。 -
闭合：NO
-
参数：无
-
示例：
{% html%} {% head %} ... {% endhead %} {% body %} ... {% require $id="header" %} {% require $id="./index.css" %} {% ATF %} {% require $id="footer" %} ... {% endbody %} {% endhtml %}渲染后的html：
<html> <head> ... <style> .header {...} .index {...} </style> </head> <body> ... <link rel="stylesheet" href="/co??c/footer/footer.css" data-defer> ... </body> </html>