kissy xtemplate

KISSY xtemplate 实现与展望

yiminghe@gmail.com

承玉

KISSY xtemplate

• Another Template Engine

• Docs: – http://docs.kissyui.com/docs/html/api/componen

t/xtemplate/

• Development Source: – https://github.com/kissyteam/kissy/tree/master/s

rc/xtemplate

功能简介

• 变量渲染/转义

• 表达式

• 控制语句

• 层次访问

• 命令扩展

• 子模板

• 报错

变量渲染

• {{x}}

• {{{x}}}

表达式

• + - * / %

• && || === >= <=

• {{x+2}}

• {{#if x>2}}

控制语句

• {{#if}}{{/if}}

• {{#each}}{{xindex}}{{this}}{{/each}}

• {{#with obj}}{{y}}{{/with}}

• obj.y.z

层次访问

• {{#with y}}{{../../x}}{{x}}{{/each}}

• {

x: 1,

y: {

x: 2

}

}

命令扩展

• {{myCommand 1 2 3 4 x x+2 x*3}} • {{#my xx}}{{x}}{{y}}{{/my}}

• function myCommand(scopes,option){

option.params //=> [‘x’,1] option.hash // {y:2} scopes.unshift({ xindex: 1}); “html”+option.fn(scopes,)+”end” return “xxx”; }

子模板

• {{include ‘x-tpl’}}

• x-tpl

– {{x}}

• 1.3

– Xtemplate.addSubTpl(‘x-tpl’,’{{x}}’)

range

• {{set x=1}}

• Array [1 .. 10]

• {{#range x y}}{{/range}}

报错处理

• ‘{{x}}\n{{y’

• xx.tpl

• {{x}}\n{{y

------------^ unclosed error at line 2

实现

• 设计语法

• 生成解析器

• 翻译代码

• 执行引擎

• 划分模块

设计语法

• {{mustache}}

• 词法

• 语法

词法

• 识别基本元素

• Open

• Id

• operator

语法

• 描述程序结构

• lalr

• Program

• Statement xx

• Tpl {{x}}

解析器生成

• kison

– https://github.com/kissyteam/kissy/tree/master/src/kison

–解析器生成工具

• 词法+语法 -> kison -> parse.js

parser.js

• module

• parse()

–标记语法树

– parse(‘my\n{{x}}’)

program

Content:

line:1

value: my\n

tpl:

line:2

Id:

line:2

value: x

翻译代码

• 遍历序列化生成 js 函数

• var source = “var out=[];”;

If(node.type == ‘id’){

source+=‘out.push(context.’+ node.name+’)’;

} else { … }

source+=‘return out.join(“”);’;

执行

• {{my}}

• new Function(“context”, source)({my:1});

划分模块

• xtemplate/compiler 翻译代码

–离线 （工具编译）

–在线（客户端浏览器）

• xemplate runtime

–在线

• xtemplate requires [‘compiler’, ‘runtime’]

展望

• 功能

–模板与模块

• {{include “x/y”}}

– x/y.js

• KISSY.add(‘x/y’, ‘{{x}}{{include “x/z”}}’,{requires:[‘x/z’]});

展望

• 功能

– extend

• Layout.tpl – {{header}}

{{#override content}}<b>{{x}}</b>{{/override }}

- Item2.tpl

{{extend layout}}

• Item1.tpl – {{extend layout}}

{{#override content}} <i>{{x}}</i>{{/override }}

展望

• 前后端统一模板

–同步渲染

• Java/php

–异步渲染 • Js

• 同一套语法，离线翻译成不同语言的原生实现

展望

• 数组类型支持

• Range 命令

• python django jinja2

• jade