xtemplate internal

implementation about xtemplate

Transcript

1. xtemplate internal yiminghe@gmail.com 承玉
2. xtemplate • Yet Another Extensible Template Engine • Docs: – http://kissyteam.github.io/xtpl • Development Source: – https://github.com/kissyteam/xtemplate
3. 功能简介 • 变量渲染/转义/设置 • 表达式 • 控制语句 • 层次访问 • 子模板 • 继承 • 宏 • 命令扩展 • 报错
4. 变量渲染 • {{x}} – S.escapeHtml • {{{x}}} • {{set x=1}}
5. 表达式 • + - * / % • && || === >= <= • {{x+2}} • {{#if (x>2)}}xxx{{/if}}
6. 控制语句 • {{#if (x)}}{{/if}} • {{#each (x)}}{{xindex}}{{this}}{{/each}} • {{#with (obj)}}{{y}}{{/with}} – {{obj.y}}
7. 层次访问 • {{#each (y)}}{{../../x}}{{x}}{{/each}} • { x: 1, y: [{ x: 2 }] }
8. 子模板 • {{include (‘./x-tpl’)}} • x-tpl.html – {{x}} {{#each}}
9. 继承 • Layout.xtpl – {{#block(‘default’)}}default{{/block}} – {{block(‘header’)}} • Page.xtpl – {{extend(‘./layout.xtpl’)}} – {{#block(‘header’)}}header{{/block}}
10. 宏 // 声明 {{#macro("test","param" default=1)}}param is {{param}} {{default}}{{/macro}} // 调用宏 {{macro("test","2")}} // => param is 2 1 {{macro("test", "2", 2)}} // => param is 2 2
11. 命令扩展 • 同步 • 异步 • 块状 • 行内
12. 报错处理 • {{x}}\n{{y ------------^ unclosed error at line 2
13. 实现 • 设计语法 • 生成解析器 • 翻译代码 • 执行引擎 – 划分模块
14. 设计语法 • {{mustache}} • 词法 • 语法
15. 词法 • 识别基本元素 • Open • Id • operator
16. 语法 • 描述程序结构 • Program • Statement xx • Tpl {{x}}
17. 解析器生成 • kison – https://github.com/yiminghe/kison – LALR 解析器生成工具 • 词法+语法 -> kison -> parse.js
18. parser.js • module • parse() – 标记语法树 – parse(‘my\n{{x}}’) program Content: line:1 value: my\n tpl: line:2 Id: line:2 value: x
19. 翻译代码 • 遍历语法树序列化生成 js 函数 var source = “var buffer = new LinkedBuffer().head;”; If(node.type == ‘id’){ source+=‘buffer.write(context.’+ node.name+’)’; } else { … } source+=‘return LinkedBuffer’;
20. 执行 • {{my}} • new Function(“context”, source)({my:1});
21. 模板渲染拼接
22. include/extend 加载 • nodejs – fs.readFile • Browser – a includes b // a.xtpl modulex.add(function(require){ return function(){ require('./b'); }; }) // b.xtpl .add(function(){ return function(){}; });
23. 模块划分 • xtemplate/compiler 翻译代码 – 离线 （工具编译） – 在线（客户端浏览器） • xtemplate runtime – 运行环境 • xtemplate requires [‘compiler’, ‘runtime’]
24. standalone • 完全无依赖，即放即用 • https://github.com/kissyteam/xtemplate/blob /master/build/xtemplate-standalone-debug.js • <script src=‘’></script>
25. • Questions?