Upgrade to Pro — share decks privately, control downloads, hide ads and more …

xtemplate internal

yiminghe
August 07, 2014

xtemplate internal

implementation about xtemplate

yiminghe

August 07, 2014
Tweet

More Decks by yiminghe

Other Decks in Technology

Transcript

  1. xtemplate • Yet Another Extensible Template Engine • Docs: –

    http://kissyteam.github.io/xtpl • Development Source: – https://github.com/kissyteam/xtemplate
  2. 表达式 • + - * / % • && ||

    === >= <= • {{x+2}} • {{#if (x>2)}}xxx{{/if}}
  3. 继承 • Layout.xtpl – {{#block(‘default’)}}default{{/block}} – {{block(‘header’)}} • Page.xtpl –

    {{extend(‘./layout.xtpl’)}} – {{#block(‘header’)}}header{{/block}}
  4. 宏 // 声明 {{#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
  5. parser.js • module • parse() – 标记语法树 – parse(‘my\n{{x}}’) program

    Content: line:1 value: my\n tpl: line:2 Id: line:2 value: x
  6. 翻译代码 • 遍历语法树序列化生成 js 函数 var source = “var buffer

    = new LinkedBuffer().head;”; If(node.type == ‘id’){ source+=‘buffer.write(context.’+ node.name+’)’; } else { … } source+=‘return LinkedBuffer’;
  7. 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(){}; });
  8. 模块划分 • xtemplate/compiler 翻译代码 – 离线 (工具编译) – 在线(客户端浏览器) •

    xtemplate runtime – 运行环境 • xtemplate requires [‘compiler’, ‘runtime’]