xtemplate internal

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?