SlideShare une entreprise Scribd logo
1  sur  36
Télécharger pour lire hors ligne
邦彦
           Mastering {{Mustache}}

          Mastering === 从入门到精通

          2011.12.19

http://mustache.github.com/
substitute
模版:
<a href=‚{url}‛>{title}</a>


数据:
{url:‚http://www.taobao.com‛,title:‚淘宝网‛}


替换:
substitute(template, data)
var template = ‘*****{a}*****{b}*****’,
          data = {a:‚&&&&&‛,b:‚@@@@@‛};

      template.replace(/{([^{}]+)}/g, function
      (match, key) {

          return (data[key] !== undefined) ?
      data[key] : ‘’;

      });

      这里 data 表示传入的 JSON 对象


http://yuilibrary.com/yui/docs/api/files/substitute_js_substitute.js.html#l16
原理
      replace 函数结合正则匹配,对字符串模版执行搜索替换


      YUI3:
      Y.substitute(s, o, f, recurse)


      KISSY:
      KISSY.substitute(str, o, regexp)



http://www.planabc.net/2011/05/31/simple_javascript_template_substitute/
Mastering Mustache
开始入门
少逻辑
Logic-less template.


多语言支持
Support JavaScript, Ruby, Python, PHP, Java,
node.js…


编辑器插件
Support TextMate, Vim, Emacs, Coda.
Demo
      <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}}
http://mustache.github.com/#demo
Demo
      {
            "header": "Colors",
            "items": [
                  {"name": "red", "first": true, "url":
      "#Red"},
                 {"name": "green", "link": true, "url":
      "#Green"},
                  {"name": "blue", "link": true, "url":
      "#Blue"}
            ],
            "empty": false
      }
http://mustache.github.com/#demo
Demo
      <h1>Colors</h1>
      <li><strong>red</strong></li>
      <li><a href=‚#Green‛>green</a></li>
      <li><a href=‚#Blue‛>blue</a></li>

      通过标记字段为 true 或 false 实现仅有的逻辑操作功能




http://mustache.github.com/#demo
权衡
缺少逻辑能力 =>
模版 => 简洁
数据 => 复杂、冗余
开始精通
{} => {{}}
标签形式和 KISSY Template 一致


if, else, 循环 =>
{{#tag}}{{/tag}}
通过纯粹标签实现
标签说明
Mustache Tag Types
变量
Variables
模版:                      数据:
*   {{name}}             {"name":"Chris","company
*   {{age}}              ":"<b>GitHub</b>"}
*   {{company}}
*   {{{company}}}




结果:
                     +
* Chris
*
* &lt;b&gt;GitHub&lt;/b&gt;
* <b>GitHub</b>
区块
Sections
情况一
值为 false 或空列表,标签
对内的信息不被展现
模版:                  数据:
Shown.               {"person": true,}
{{#nothin}}
      Never shown!
{{/nothin}}


                     +
结果:
Shown.
情况二
1)如果键名存在并且值为非
false,执行输出

2)如果值为非空列表,以循
环形式逐一输出
模版:                     数据:
{{#repo}}               {
      <b>{{name}}</b>         "repo": [
{{/repo}}               { "name": "resque" },

                   +    { "name": "hub" },
                        { "name": "rip" }

                        }
                              ]


结果:
<b>resque</b>
<b>hub</b>
<b>rip</b>
情况三
值为可调用对象(callable
object)时(通常是匿名函
数),该对象将被调用,并同
时将当前取值作为参数传入
模版:                      数据:
{{#wrapped}}             {
{{name}} is awesome.     "name":
{{/wrapped}}             "Willy","wrapped":

                   +     function() {
                               return
                               function(text) {
                                     return "<b>"
                         + render(text) + "</b>‚

结果:                      }
                               }

<b>Willy is awesome.</b> }
情况四
值为非 false 且非列表,则
进行单一条目渲染
模版:                数据:
{{#person}}         {"person": { "name":
Hi {{name}}!       "Jon" }}
{{/person?}}

               +
结果:
Hi Jon!
反向区块
Inverted Sections
{{^person}}
{{/person}}

输出反向情况
换句话说,就是当值不存在、
false、空列表时进行输出
模版:                     数据:
{{#repo}}               {"repo": []}
      <b>{{name}}</b>
{{/repo}}
{{^repo}}
      No repos :(
{{/repo}}           +
结果:
      No repos :(
注释
Comments
模版:
<h1>Today{{! ignore me }}.</h1>



结果:
<h1>Today.</h1>
局部模版
 Comments
var view = {
        name: "Joe",
        winnings: {
          value: 1000
        }
      };

      var template = "Welcome, {{name}}! {{>winnings}}"
      var partials = {
        winnings: "You just won ${{value}}‚
      };

      var output = Mustache.to_html(template, view,
      partials)

      output will be:
      Welcome, Joe! You just won $1000

https://github.com/janl/mustache.js
模版结构
      结构(建议):
      <script id=‚example-tpl‛ type=‚text/template‛>
            <div>{{mustache}} template here…</div>
      </script>




http://documentcloud.github.com/backbone/examples/todos/index.html
MIME
     浏览器不懂 text/template
     => 忽略该 script 标签对
     => 放置任何代码片段




http://www.rfc-editor.org/rfc/rfc4329.txt
MIME
     <script><script>
     <script type="text/javascript"><script>
     <script type="application/javascript"><script>
     <script type="application/x-javascript"><script>


     jquery:
     <script type="text/x-jquery-tmpl"><script>
     backbone.js:
     <script type="text/template"><script>


http://www.rfc-editor.org/rfc/rfc4329.txt
请求数据
XHR or JSONP:
success : function (data) {

      if (data.status === ‘ok’) {
             //do sth a…
      } else {
             //do sth b…
      }

}
渲染过程
data.status === ‘ok’:
a.   数据预处理 data.xxx = function () {…}
b.   执行渲染 Mustache.to_html(template, data);
c.   构建 DOM 树
d.   事件绑定等后续操作
完
Game over

Contenu connexe

Tendances

Flex 4.5 action data communication
Flex 4.5 action data communicationFlex 4.5 action data communication
Flex 4.5 action data communicationjexchan
 
从问题开始,谈前端架构
从问题开始,谈前端架构从问题开始,谈前端架构
从问题开始,谈前端架构裕波 周
 
Mysql 高级优化之 逻辑处理
Mysql 高级优化之 逻辑处理Mysql 高级优化之 逻辑处理
Mysql 高级优化之 逻辑处理nigel889
 
Mongodb
MongodbMongodb
Mongodbbj
 
Mysql 高级优化之 理解查询执行
Mysql 高级优化之 理解查询执行Mysql 高级优化之 理解查询执行
Mysql 高级优化之 理解查询执行nigel889
 
jsp基础速成精华讲解
jsp基础速成精华讲解jsp基础速成精华讲解
jsp基础速成精华讲解wensheng wei
 
dbug in mysql
dbug in mysqldbug in mysql
dbug in mysqlTim Chou
 
Python入門:5大概念初心者必備 2021/11/18
Python入門:5大概念初心者必備 2021/11/18Python入門:5大概念初心者必備 2021/11/18
Python入門:5大概念初心者必備 2021/11/18Derek Lee
 
LazyRecord: The Fast ORM for PHP
LazyRecord: The Fast ORM for PHPLazyRecord: The Fast ORM for PHP
LazyRecord: The Fast ORM for PHPLin Yo-An
 
Maintainable PHP Source Code
Maintainable PHP Source CodeMaintainable PHP Source Code
Maintainable PHP Source CodeBo-Yi Wu
 
常見設計模式介紹
常見設計模式介紹常見設計模式介紹
常見設計模式介紹Jace Ju
 
Python入門:5大概念初心者必備
Python入門:5大概念初心者必備Python入門:5大概念初心者必備
Python入門:5大概念初心者必備Derek Lee
 
Javascript模板引擎
Javascript模板引擎Javascript模板引擎
Javascript模板引擎Jerry Xie
 
網頁設計 - 資料庫存取
網頁設計 - 資料庫存取網頁設計 - 資料庫存取
網頁設計 - 資料庫存取Vincent Chi
 
走马观花— Haskell Web 开发
走马观花— Haskell Web 开发走马观花— Haskell Web 开发
走马观花— Haskell Web 开发Gump Law
 

Tendances (18)

Flex 4.5 action data communication
Flex 4.5 action data communicationFlex 4.5 action data communication
Flex 4.5 action data communication
 
从问题开始,谈前端架构
从问题开始,谈前端架构从问题开始,谈前端架构
从问题开始,谈前端架构
 
Mysql 高级优化之 逻辑处理
Mysql 高级优化之 逻辑处理Mysql 高级优化之 逻辑处理
Mysql 高级优化之 逻辑处理
 
Mongodb
MongodbMongodb
Mongodb
 
Mysql 高级优化之 理解查询执行
Mysql 高级优化之 理解查询执行Mysql 高级优化之 理解查询执行
Mysql 高级优化之 理解查询执行
 
jsp基础速成精华讲解
jsp基础速成精华讲解jsp基础速成精华讲解
jsp基础速成精华讲解
 
dbug in mysql
dbug in mysqldbug in mysql
dbug in mysql
 
Ch8 教學
Ch8 教學Ch8 教學
Ch8 教學
 
Python入門:5大概念初心者必備 2021/11/18
Python入門:5大概念初心者必備 2021/11/18Python入門:5大概念初心者必備 2021/11/18
Python入門:5大概念初心者必備 2021/11/18
 
Ch8
Ch8Ch8
Ch8
 
LazyRecord: The Fast ORM for PHP
LazyRecord: The Fast ORM for PHPLazyRecord: The Fast ORM for PHP
LazyRecord: The Fast ORM for PHP
 
Maintainable PHP Source Code
Maintainable PHP Source CodeMaintainable PHP Source Code
Maintainable PHP Source Code
 
常見設計模式介紹
常見設計模式介紹常見設計模式介紹
常見設計模式介紹
 
Ch7 範例
Ch7 範例Ch7 範例
Ch7 範例
 
Python入門:5大概念初心者必備
Python入門:5大概念初心者必備Python入門:5大概念初心者必備
Python入門:5大概念初心者必備
 
Javascript模板引擎
Javascript模板引擎Javascript模板引擎
Javascript模板引擎
 
網頁設計 - 資料庫存取
網頁設計 - 資料庫存取網頁設計 - 資料庫存取
網頁設計 - 資料庫存取
 
走马观花— Haskell Web 开发
走马观花— Haskell Web 开发走马观花— Haskell Web 开发
走马观花— Haskell Web 开发
 

Similaire à Mastering Mustache

CSS 培训
CSS 培训CSS 培训
CSS 培训S S
 
Mongo db introduction
Mongo db introductionMongo db introduction
Mongo db introductionDai Qifeng
 
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練32016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3Duran Hsieh
 
HTML5概览
HTML5概览HTML5概览
HTML5概览Adam Lu
 
HTML5 介绍
HTML5 介绍HTML5 介绍
HTML5 介绍S S
 
Swift Functional Programming
Swift Functional ProgrammingSwift Functional Programming
Swift Functional Programming林藍 東
 
Mongo快速入门
Mongo快速入门Mongo快速入门
Mongo快速入门Lucien Li
 
旺铺前端设计和实现
旺铺前端设计和实现旺铺前端设计和实现
旺铺前端设计和实现hua qiu
 
Node.js开发体验
Node.js开发体验Node.js开发体验
Node.js开发体验QLeelulu
 
Ruby程式語言入門導覽
Ruby程式語言入門導覽Ruby程式語言入門導覽
Ruby程式語言入門導覽Mu-Fan Teng
 
Groovy Introduction for Java Programmer
Groovy Introduction for Java ProgrammerGroovy Introduction for Java Programmer
Groovy Introduction for Java ProgrammerLi Ding
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器jay li
 
in in der 響應式編程
in in der 響應式編程in in der 響應式編程
in in der 響應式編程景隆 張
 
Mopcon2014 - 使用 Sinatra 結合 Ruby on Rails 輕鬆打造完整 Full Stack 網站加 API Service服務
Mopcon2014 - 使用 Sinatra 結合 Ruby on Rails 輕鬆打造完整 Full Stack 網站加 API Service服務Mopcon2014 - 使用 Sinatra 結合 Ruby on Rails 輕鬆打造完整 Full Stack 網站加 API Service服務
Mopcon2014 - 使用 Sinatra 結合 Ruby on Rails 輕鬆打造完整 Full Stack 網站加 API Service服務Mu-Fan Teng
 
OpenWebSchool - 02 - PHP Part I
OpenWebSchool - 02 - PHP Part IOpenWebSchool - 02 - PHP Part I
OpenWebSchool - 02 - PHP Part IHung-yu Lin
 
组件交互模式的非主流研究
组件交互模式的非主流研究组件交互模式的非主流研究
组件交互模式的非主流研究youalab
 
JCConf2015: groovy to gradle
 JCConf2015: groovy to gradle JCConf2015: groovy to gradle
JCConf2015: groovy to gradleChing Yi Chan
 
React vs Flux
React vs FluxReact vs Flux
React vs FluxLC2009
 
Python learn guide
Python learn guidePython learn guide
Python learn guiderobin yang
 

Similaire à Mastering Mustache (20)

CSS 培训
CSS 培训CSS 培训
CSS 培训
 
Node way
Node wayNode way
Node way
 
Mongo db introduction
Mongo db introductionMongo db introduction
Mongo db introduction
 
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練32016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
 
HTML5概览
HTML5概览HTML5概览
HTML5概览
 
HTML5 介绍
HTML5 介绍HTML5 介绍
HTML5 介绍
 
Swift Functional Programming
Swift Functional ProgrammingSwift Functional Programming
Swift Functional Programming
 
Mongo快速入门
Mongo快速入门Mongo快速入门
Mongo快速入门
 
旺铺前端设计和实现
旺铺前端设计和实现旺铺前端设计和实现
旺铺前端设计和实现
 
Node.js开发体验
Node.js开发体验Node.js开发体验
Node.js开发体验
 
Ruby程式語言入門導覽
Ruby程式語言入門導覽Ruby程式語言入門導覽
Ruby程式語言入門導覽
 
Groovy Introduction for Java Programmer
Groovy Introduction for Java ProgrammerGroovy Introduction for Java Programmer
Groovy Introduction for Java Programmer
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器
 
in in der 響應式編程
in in der 響應式編程in in der 響應式編程
in in der 響應式編程
 
Mopcon2014 - 使用 Sinatra 結合 Ruby on Rails 輕鬆打造完整 Full Stack 網站加 API Service服務
Mopcon2014 - 使用 Sinatra 結合 Ruby on Rails 輕鬆打造完整 Full Stack 網站加 API Service服務Mopcon2014 - 使用 Sinatra 結合 Ruby on Rails 輕鬆打造完整 Full Stack 網站加 API Service服務
Mopcon2014 - 使用 Sinatra 結合 Ruby on Rails 輕鬆打造完整 Full Stack 網站加 API Service服務
 
OpenWebSchool - 02 - PHP Part I
OpenWebSchool - 02 - PHP Part IOpenWebSchool - 02 - PHP Part I
OpenWebSchool - 02 - PHP Part I
 
组件交互模式的非主流研究
组件交互模式的非主流研究组件交互模式的非主流研究
组件交互模式的非主流研究
 
JCConf2015: groovy to gradle
 JCConf2015: groovy to gradle JCConf2015: groovy to gradle
JCConf2015: groovy to gradle
 
React vs Flux
React vs FluxReact vs Flux
React vs Flux
 
Python learn guide
Python learn guidePython learn guide
Python learn guide
 

Dernier

SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLPJamie (Taka) Wang
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven designJamie (Taka) Wang
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_patternJamie (Taka) Wang
 

Dernier (15)

20200323 - AI Intro
20200323 - AI Intro20200323 - AI Intro
20200323 - AI Intro
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
 
Entities in DCPS (DDS)
Entities in DCPS (DDS)Entities in DCPS (DDS)
Entities in DCPS (DDS)
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven design
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
20151111 - IoT Sync Up
20151111 - IoT Sync Up20151111 - IoT Sync Up
20151111 - IoT Sync Up
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
20161027 - edge part2
20161027 - edge part220161027 - edge part2
20161027 - edge part2
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
20200226 - AI Overview
20200226 - AI Overview20200226 - AI Overview
20200226 - AI Overview
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_pattern
 

Mastering Mustache