js模板引擎mustache介绍及实例

梦里梦外; 2022-09-13 04:17 234阅读 0赞

#  #

在Javascript中 mustache.js是实现mustache模板系统。

Mustache是一种**没有逻辑的模板语法**。它可以应用于**HTML、配置文件、源代码**等任何地方。 它通过使用**散列或对象中提供的值**在模板中**展开标记**来工作。

我们称它为没有逻辑的模板，是因为它没有if语句、else子句和for循环，它只有标签。一些标签被替换为**值或什么也没有或者一系列的值**。

不能在模板中使用else if做逻辑判断，我们可以在**数据传入之前对数据做逻辑操作**。

我们在那使用mustache.js

你可以在任何可以使用JavaScript的地方使用mustache.js来渲染mustache模板。包括web浏览器、服务器环境（node）。

## 语法 ##

*  模板以\{ \{\}\}包裹住内容，**格式中写入的是模板的内容**。 被替换的内容字段使用双花括号包裹起来。
 *  插值表达式：双花括号\{ \{\}\} 包裹替换的字段
 *  \{ \{\#prop-name\}\}\{ \{/prop-name\}\}用作**for循环渲染**，当prop-name的值为非空数组时，mustach不会遍历该数组，渲染出个数和该数组长度相等的DOM元素
 *  也可以用作if-else判断。\{ \{\#prop-name\}\}\{ \{/prop-name\}\}和\{ \{prop-name\}\}\{ \{/prop-name\}\}两组标签结合使用，**当prop-name的值存在且不为false时，会渲染\{ \{\#prop-name\}\}\{ \{/prop-name\}\}的内容，否则渲染\{ \{prop-name\}\}\{ \{/prop-name\}\}的内容**。

我们注意到上面代码render的第二个参数都是一个**对象**，第二个参数我们通常都会使用对象类型，传入一个对象，在模板中书写对象属性，可以渲染出对象的值。 但也可以是其它类型如 数组、字符串类型、数字，如下:

我们可以看到如果第二个参数是其它类型，那么在模板中双花括号内就用点.来表示，使用起来不方便。 一般在项目中很少会传入其它类型。

对象属性值为数组时 实现forEach遍历数组渲染DOM

//页面部分
    <div id="target">Loading</div>
    //模板
    <script id="template" type="x-tmpl-mustache">
        <ul>
            {
       {#list}}
            <li>
                <span>{
       {name}}</span>
                <span>{
       {age}}</span>
                <span>{
       {job}}</span>
            </li>
            {
       {/list}}
        </ul>
    </script>
    //js部分
    <script type="text/javascript">
        var template = $("#template").html();
        var r = Mustache.render(template,{
            list:[
                {name:'wannianqing',age:18,job:'The Front End'},
                {name:'wangxiaosan',age:19,job:'java'},
                {name:'lixiaosi',age:20,job:'The Front End'},
                {name:'sunxiaowu',age:21,job:'java'}
            ]
        })
        $("#target").html(r)
    </script>

用作if-else,属性无论是显示还是隐式转换为boolean类型，true时渲染\{ \{\#prop-name\}\} false时渲染\{ \{^prop-name\}\}

//页面部分
    <div id="target">Loading</div>
    //模板
    <script id="template" type="x-tmpl-mustache">
        {
       {#isShow}}一{
       {/isShow}}
        {
       {^isShow}}二{
       {/isShow}}
    </script>
    //js部分
    <script type="text/javascript">
        var template = $("#template").html();
        
        var r = Mustache.render(template,{isShow:true}); //isShow存在且为布尔值true时，显示 “一”
        var r = Mustache.render(template,{isShow:false}); //isShow存在且为布尔值true时，显示 “二”
        var r = Mustache.render(template,{}); //isShow不存在时，显示 “二”
        var r = Mustache.render(template,{isShow:[]}); //isShow存在，为空数组时，显示 “二”
        var r = Mustache.render(template,{isShow:undefined}); //isShow存在，为undefined时，显示 “二”
        var r = Mustache.render(template,{isShow:null}); //isShow存在，为null时，显示 “二”
        
        $("#target").html(r)
    </script>

实际使用

用一个唯一id的script标签包裹模板内容，type类型为text/template

使用原生javascript方法或者jquery方法获得唯一id的script标签的html内容

var template = document.getElementById('template').innerHTML.trim();
    //或
    var template = $("#template").html();

使用mustache的render方法处理模板后填充到目标位置

var rendered = Mustache.render(template,obj);
    $('#target').html(rendered)

完整代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body "loadUser()">
        <div id="target">Loading</div>
    
        <script id="template" type="x-tmpl-mustache">
            Hello {
       {}}~
            <ul>
                {
       {#list}}
                <li>{
       {name}}</li>
                {
       {/list}}
            </ul>
        </script>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <script type="text/javascript" src="js/mustache.js"></script>
        <script type="text/javascript">
            function loadUser(){
                var template = $("#template").html();
    
                var obj = {
                    list:[
                        {name:'wan'},
                        {name:'wan'},
                        {name:'wan'}
                    ]
                }
                var rendered = Mustache.render(template,obj);
                $('#target').html(rendered)
            }
        </script>
    </body>
    </html>

上面示例是内部文件使用mustache模板引擎，我们还可以引入外部模板引擎来渲染页面。

首先我们在HTML文档中引入jquery.mustache.js文件配合mustache使用，jquery.mustache.js是jQuery做了一层封装，提供了集中方法让我们更方便使用mustache做模板渲染。 此处我们使用它的.load方法从指定路径加载模板文件，加载成功后使用$.Mustache.render()处理模板渲染页面。

$.Mustache
        .load('./mustache/demo2.mustache')
        .done(function(){
            $("#target").html($.Mustache.render('demo2',{name:'wan'}))
        })

下面我们来看一个完整的案例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="target">Loading</div>
    
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <script type="text/javascript" src="js/mustache.js"></script>
        <script type="text/javascript" src="js/jquery.mustache.js"></script>
        <script type="text/javascript">
            //要传入的数据
            var objData = {
                list:[
                    {name:'wannianqing',age:18,job:'The Front End'},
                    {name:'wangxiaosan',age:19,job:'java'},
                    {name:'lixiaosi',age:20,job:'The Front End'},
                    {name:'sunxiaowu',age:21,job:'java'}
                ]
            }
            //加载模板方法
            function loadTemplateMustache(mustacheName,targetId,templateId,data){
                //模板路径
                var mustacheDir = './mustache/'+mustacheName+'.mustache';
                //渲染目标容器
                var targetContainer = $(targetId);
                if(targetContainer.length > 0){
                    $.Mustache
                        .load(mustacheDir)        //加载模板文件
                        .done(function(){
                            //渲染模板
                            renderTarget(targetContainer,templateId,data)
                        })
                }
            }
            //渲染模板方法
            function renderTarget(dom,templateId,data){
                var el = dom;
                el.html('');
                el.append($.Mustache.render(templateId,data));
            }
    
            loadTemplateMustache('demo4','#target','template',objData)
        </script>
    </body>
    </html>