xtemplate internal

D226fdd4b353d92a66a1ef71539357f8?s=47 yiminghe
August 07, 2014

xtemplate internal

implementation about xtemplate

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

August 07, 2014
Tweet

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?