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
230
支付宝小程序的开放架构
yiminghe
0
190
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
220
react-based architecture
yiminghe
2
160
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
290
react best practice
yiminghe
3
200
react at alipay
yiminghe
43
4.3k
Other Decks in Technology
See All in Technology
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
720
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
220
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
430
TypeScript入門
recruitengineers
PRO
35
11k
Automating Web Accessibility Testing with AI Agents
maminami373
0
300
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
26
12k
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
5
1.4k
見てわかるテスト駆動開発
recruitengineers
PRO
6
2.4k
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
430
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
810
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
240
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
150
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Code Review Best Practice
trishagee
70
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Why Our Code Smells
bkeepers
PRO
339
57k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
The Cult of Friendly URLs
andyhume
79
6.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
What's in a price? How to price your products and services
michaelherold
246
12k
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?