關于模板引擎二(Jade&&Mustache)

說起來,我昨天有一些分不清模板引擎與MVC類型框架的界限,

于是今天我查了各種資料,發現模板引擎是關于V(view)的動態添加修改,

網上也沒有很多關于模板引擎的詳解,所以估計這幾天都會研究不同模板之間的不同吧

1) Jade(pug)

這個模板  怎么說呢,我是不太會用的,因為他太簡便,省略了所有標簽,

使用空白與縮進敏感的代碼格式編寫HTML頁面?;贜ode.js,運行在服務器端。

gitHub star:14000

              大致如下: 

doctype html
html(lang="en")
 head
 title= pageTitle
 script(type='text/javascript').
 if (foo) bar(1 + 5)
 body
 h1 Pug - node template engine
 #container.col
 if youAreUsingPug
 p You are amazing
 else
 p Get on it!
 p.
 Pug is a terse and simple templating language with a
 strong focus on performance and powerful features.

 

2) Mustache

 Mustache是一個logic-less(無邏輯或輕邏輯)語法模板?;趈s

可以用于組織HTML、配置文件、源代碼在內的任何東西。

Mustache使用JavaScript對象的值,用來擴展模板代碼中的大括號標簽。

支持CommonJS module API和Asynchronous Module Definition API

可以應用在 Javascript、PHP、Python、Perl 等多種編程語言中

常用于微信小程序

  • {{keyName}}

  • {{#keyName}} {{/keyName}}

  • {{^keyName}} {{/keyName}}

  • {{.}}

  • {{<partials}}

  • {{{keyName}}}

  • {{!comments}}

  •              

    1. $(function () {  

    2.             var user = { name: "Olive", age: 23, sex: "girl" };  

    3.             var template = "My name is  {{name}} ,I'm  {{age}} ,Sex is {{sex}}";  

    4.             var view = Mustache.render(template, user);  

    5.             $("#user_info").html(view); 

    6.            }

     

     

            

    1. var users = { result: [{ name: "Only", age: 24, sex: "boy" },  

    2.                                   { name: "for", age: 24, sex: "boy" },  

    3.                                   { name: "Olive", age: 23, sex: "girl" }  

    4.                                   ]  

    5.            };  

    6.            var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>";  

    7.            var views = Mustache.render(template, users);  

    8.            $("#users_info").html(views);

       {{#}}{{/}},如果所給定的數據源是一個對象數組,則可以使用該語法,很方便的用來循環展示。

       {{#}}標記表示從該標記以后的內容全部都要循環展示

       {{/}}標記表示循環結束。這種情況多用于table行的展示。

       有了判空的方法當然還有與之相反的方法{{^}},該方法表示的意思與{{#}}意思相反。

       大括號內的字段名稱要和Mustache.render方法中的第二個參數中的對象的屬性名一致

       主要的渲染方法為Mustache.render,該方法有兩個參數,

    第一個為要渲染的模版,也就是上例中的template,第二個就是數據源也就是上例中的user對象

       

     來源:itnose

上一篇: 取數組值

下一篇: 0前言

分享到: 更多
五分快三技巧 抢庄牛牛赢现金 手机赢钱棋牌游戏名字 比分网即时比分500 重庆时时彩手机版app下载 四川时时12选5开奖结果走势图 腾讯五分彩票计划软件 打麻将技巧常用四招 重庆时时大小走势图 11选5任七聪明组合 网上彩票买大小有什么技巧 口袋棋牌下载安装 pk10赛车直播视频直播 排三5码组六最大遗漏 金库电子游戏平台网址 北京pk10计划官网