KISSY XTemplate

801 views

Published on

Introduction to KISSY XTemplate

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
801
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

KISSY XTemplate

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

×