Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
xtemplate internal
Search
yiminghe
August 07, 2014
Technology
1
1.9k
xtemplate internal
implementation about xtemplate
yiminghe
August 07, 2014
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k
Other Decks in Technology
See All in Technology
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
Lexical Analysis
shigashiyama
1
150
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
280
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
480
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
840
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
320
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
520
複雑なState管理からの脱却
sansantech
PRO
1
150
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
520
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Producing Creativity
orderedlist
PRO
341
39k
The Invisible Side of Design
smashingmag
298
50k
For a Future-Friendly Web
brad_frost
175
9.4k
A better future with KSS
kneath
238
17k
Building Your Own Lightsaber
phodgson
103
6.1k
4 Signs Your Business is Dying
shpigford
180
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Facilitating Awesome Meetings
lara
50
6.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Transcript
xtemplate internal
[email protected]
承玉
xtemplate • Yet Another Extensible Template Engine • Docs: –
http://kissyteam.github.io/xtpl • Development Source: – https://github.com/kissyteam/xtemplate
功能简介 • 变量渲染/转义/设置 • 表达式 • 控制语句 • 层次访问 •
子模板 • 继承 • 宏 • 命令扩展 • 报错
变量渲染 • {{x}} – S.escapeHtml • {{{x}}} • {{set x=1}}
表达式 • + - * / % • && ||
=== >= <= • {{x+2}} • {{#if (x>2)}}xxx{{/if}}
控制语句 • {{#if (x)}}{{/if}} • {{#each (x)}}{{xindex}}{{this}}{{/each}} • {{#with (obj)}}{{y}}{{/with}}
– {{obj.y}}
层次访问 • {{#each (y)}}{{../../x}}{{x}}{{/each}} • { x: 1, y: [{
x: 2 }] }
子模板 • {{include (‘./x-tpl’)}} • x-tpl.html – {{x}} {{#each}}
继承 • Layout.xtpl – {{#block(‘default’)}}default{{/block}} – {{block(‘header’)}} • Page.xtpl –
{{extend(‘./layout.xtpl’)}} – {{#block(‘header’)}}header{{/block}}
宏 // 声明 {{#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
命令扩展 • 同步 • 异步 • 块状 • 行内
报错处理 • {{x}}\n{{y ------------^ unclosed error at line 2
实现 • 设计语法 • 生成解析器 • 翻译代码 • 执行引擎 –
划分模块
设计语法 • {{mustache}} • 词法 • 语法
词法 • 识别基本元素 • Open • Id • operator
语法 • 描述程序结构 • Program • Statement xx • Tpl
{{x}}
解析器生成 • kison – https://github.com/yiminghe/kison – LALR 解析器生成工具 • 词法+语法
-> kison -> parse.js
parser.js • module • parse() – 标记语法树 – parse(‘my\n{{x}}’) program
Content: line:1 value: my\n tpl: line:2 Id: line:2 value: x
翻译代码 • 遍历语法树序列化生成 js 函数 var source = “var buffer
= new LinkedBuffer().head;”; If(node.type == ‘id’){ source+=‘buffer.write(context.’+ node.name+’)’; } else { … } source+=‘return LinkedBuffer’;
执行 • {{my}} • new Function(“context”, source)({my:1});
模板渲染拼接
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(){}; });
模块划分 • xtemplate/compiler 翻译代码 – 离线 (工具编译) – 在线(客户端浏览器) •
xtemplate runtime – 运行环境 • xtemplate requires [‘compiler’, ‘runtime’]
standalone • 完全无依赖,即放即用 • https://github.com/kissyteam/xtemplate/blob /master/build/xtemplate-standalone-debug.js • <script src=‘’></script>
• Questions?