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

说起来,我昨天有一些分不清模板引擎与MVC类型框架的界限,

于是今天我查了各种资料,发现模板引擎是关于V(view)的动态添加修改,

网上也没有很多关于模板引擎的详解,所以估计这几天都会研究不同模板之间的不同吧

1) Jade(pug)

这个模板  怎么说呢,我是不太会用的,因为他太简便,省略了所有标签,

使用空白与缩进敏感的代码格式编写HTML页面。基于Node.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(无逻辑或轻逻辑)语法模板。基于js

可以用于组织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前言

分享到: 更多