What & Why?

html = '<h1>' + title + '</h1>';

↓

data = {title: 'abc'};
html = '<h1>{title}</h1>'.replace(/\{([^\}]+)\}/g, function (all, v) {

return data[v];
});

↓

逻辑控制if/else/for

↓

模板复用include/layout

那些年我们用过的模板引擎

ASP, JSP, PHP
Velocity, FreeMarker, Smarty
ctpl, Jinja2, Liquid...

Node.js 时代的模板引擎

ejs

表达式和控制语法都是原生 JavaScript 的

<ul>
<% for(var i=0; i<supplies.length; i++) { %>
    <li><%= supplies[i] %></li>
<% } %>
</ul>

Mustache.js

轻逻辑体系的始祖（Hogan, Handlebars.js）

<h1>{{header}}</h1>
{{#bug}}
{{/bug}}
{{#items}}
    {{#first}}
    <li><strong>{{name}}</strong></li>
    {{/first}}
    {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
    {{/link}}
{{/items}}
{{#empty}}
    <p>The list is empty.</p>
{{/empty}}

jade

完全没有html了，代码比较像zencoding的风格

doctype 5
html(lang="en")
    head
    title= pageTitle
    body
    h1 Jade - node template engine
    #container

if youAreUsingJade

p You are amazing

else

p Get on it!

HAML

又一个不写HTML标签的模板

%section.container
    %h1= post.title
    %h2= post.subtitle
    .content
    = post.content

CoffeeKup

CoffeeScript 的 Ruby 风格

doctype 5
html ->
    head ->
    meta charset: 'utf-8'
    title "#{@title or 'Untitled'} | A completely plausible website"
    body ->
    header ->

h1 @title or 'Untitled'



nav ->

ul ->

    (li -> a href: '/', -> 'Home') unless @path is '/'

    li -> a href: '/chunky', -> 'Bacon!'

    switch @user.role

    when 'owner', 'admin'


li -> a href: '/admin', -> 'Secret Stuff'

    when 'vip'


li -> a href: '/vip', -> 'Exclusive Stuff'

    else


li -> a href: '/commoners', -> 'Just Stuff'

尝试自己造一个

我需要的功能

基本功能
语法简洁，可自定义
可高度复用
兼容前后端
预编译

简易版的实现

解析并渲染如下模板内容

{$ list = ["a", "b", "c"] /}
<h1>Hello {{name}}!</h1>
{? list.length }
<ul>
    {# list : item @ index }
    <li>{{index}}: {{item}}</li>
    {/}
</ul>
{^}
<p>none in {{ date | date:"Y-m-d" | html }}</p>
{/}

JS 模板引擎的 Destination

进击！前端模板工程化

To be continued...

https://github.com/mytharcher/yust

Powered by reveal.js

再造轮子之--

JS 模板引擎

What & Why?

那些年我们用过的模板引擎

Node.js 时代的模板引擎

ejs

Mustache.js

jade

HAML

CoffeeKup

百花齐放

尝试自己造一个

我需要的功能

怎么造？

两种解析类型

折中方案

简易版

完整版

利用现有的强大工具

简易版的实现

JS 模板引擎的 Destination

To be continued...