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
2k
xtemplate internal
implementation about xtemplate
yiminghe
August 07, 2014
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
210
支付宝小程序的开放架构
yiminghe
0
180
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
280
react best practice
yiminghe
3
200
react at alipay
yiminghe
43
4.3k
Other Decks in Technology
See All in Technology
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
300
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.2k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
130
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
360
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
110
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.4k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
340
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.4k
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
2
17k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
970
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Visualization
eitanlees
146
16k
Designing Experiences People Love
moore
142
24k
Typedesign – Prime Four
hannesfritz
42
2.7k
Scaling GitHub
holman
460
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Gamification - CAS2011
davidbonilla
81
5.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Optimizing for Happiness
mojombo
379
70k
Transcript
xtemplate internal yiminghe@gmail.com 承玉
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?