• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
331
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. KISSY xtemplate 实现与展望 yiminghe@gmail.com 承玉
  • 2. 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
  • 3. 功能简介 • 变量渲染/转义 • 表达式 • 控制语句 • 层次访问 • 命令扩展 • 子模板 • 报错
  • 4. 变量渲染 • {{x}} • {{{x}}}
  • 5. 表达式 • + - * / % • && || === >= <= • {{x+2}} • {{#if x>2}}
  • 6. 控制语句 • {{#if}}{{/if}} • {{#each}}{{xindex}}{{this}}{{/each}} • {{#with obj}}{{y}}{{/with}} • obj.y.z
  • 7. 层次访问 • {{#with y}}{{../../x}}{{x}}{{/each}} • { x: 1, y: { x: 2 } }
  • 8. 命令扩展 • {{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”; }
  • 9. 子模板 • {{include ‘x-tpl’}} • x-tpl – {{x}} • 1.3 – Xtemplate.addSubTpl(‘x-tpl’,’{{x}}’)
  • 10. range • {{set x=1}} • Array [1 .. 10] • {{#range x y}}{{/range}}
  • 11. 报错处理 • ‘{{x}}n{{y’ • xx.tpl • {{x}}n{{y ------------^ unclosed error at line 2
  • 12. 实现 • 设计语法 • 生成解析器 • 翻译代码 • 执行引擎 • 划分模块
  • 13. 设计语法 • {{mustache}} • 词法 • 语法
  • 14. 词法 • 识别基本元素 • Open • Id • operator
  • 15. 语法 • 描述程序结构 • lalr • Program • Statement xx • Tpl {{x}}
  • 16. 解析器生成 • kison – https://github.com/kissyteam/kissy/tree/master/s rc/kison – 解析器生成工具 • 词法+语法 -> kison -> parse.js
  • 17. parser.js • module • parse() – 标记语法树 – parse(‘myn{{x}}’) program Content: line:1 value: myn tpl: line:2 Id: line:2 value: x
  • 18. 翻译代码 • 遍历序列化生成 js 函数 • var source = “var out=[];”; If(node.type == ‘id’){ source+=‘out.push(context.’+ node.name+’)’; } else { … } source+=‘return out.join(“”);’;
  • 19. 执行 • {{my}} • new Function(“context”, source)({my:1});
  • 20. 划分模块 • xtemplate/compiler翻译代码 – 离线 (工具编译) – 在线(客户端浏览器) • xemplate runtime – 在线 • xtemplate requires [‘compiler’, ‘runtime’]
  • 21. 展望 • 功能 – 模板与模块 • {{include “x/y”}} – x/y.js • KISSY.add(‘x/y’, ‘{{x}}{{include “x/z”}}’,{requires:[‘x/z’]});
  • 22. 展望 • 功能 – extend • Layout.tpl – {{header}} {{#override content}}<b>{{x}}</b>{{/override }} - Item2.tpl {{extend layout}} • Item1.tpl – {{extend layout}} {{#override content}} <i>{{x}}</i>{{/override }}
  • 23. 展望 • 前后端统一模板 – 同步渲染 • Java/php – 异步渲染 • Js • 同一套语法,离线翻译成不同语言的原生 实现
  • 24. 展望 • 数组类型支持 • Range 命令 • python django jinja2 • jade