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.1k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.1k
Other Decks in Technology
See All in Technology
使えそうで使われないCloudHSM
maikamibayashi
0
170
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
560
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
730
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
820
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
Nix入門パラダイム編
asa1984
2
200
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
240
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
120
Emacs x Nostr
hakkadaikon
1
150
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
Featured
See All Featured
Designing for Performance
lara
604
68k
What's new in Ruby 2.0
geeforr
342
31k
Bash Introduction
62gerente
608
210k
Building Your Own Lightsaber
phodgson
102
6k
Code Review Best Practice
trishagee
64
17k
Unsuck your backbone
ammeep
668
57k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
A designer walks into a library…
pauljervisheath
202
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
Navigating Team Friction
lara
183
14k
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?