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
57
支付宝小程序的开放架构
yiminghe
0
140
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
170
react-based architecture
yiminghe
2
130
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
200
react best practice
yiminghe
3
160
react at alipay
yiminghe
43
4k
Other Decks in Technology
See All in Technology
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
100
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
200
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
110
**強い**エンジニアのなり方 - フィードバックサイクルを勝ち取る / grow one day each day
soudai
62
18k
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
430
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
640
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
230
Databricks におけるデータエンジニアリング
databricksjapan
0
380
Databricks における 『MLOps』
databricksjapan
2
140
PHPカンファレンス小田原2024
ysknsid25
3
670
エンタープライズ環境下での Active Directory の運用 TIPS
tamaiyutaro
1
1.6k
Featured
See All Featured
The Mythical Team-Month
searls
215
42k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Building Applications with DynamoDB
mza
88
5.6k
BBQ
matthewcrist
80
8.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
A Philosophy of Restraint
colly
196
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
How to name files
jennybc
64
92k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Become a Pro
speakerdeck
PRO
10
4.5k
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?