前端模板引擎mustache.js详解

最新推荐文章于 2024-09-28 07:35:24 发布
最新推荐文章于 2024-09-28 07:35:24 发布
阅读量144 收藏
点赞数
文章标签： 前端 javascript 测试 ViewUI
原文链接：http://www.cnblogs.com/AllenR/p/8466391.html
版权

mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用。本文总结它的使用方法和一些使用心得，内容不算很高深，纯粹是入门内容，看看即可。不过要是你还没有用过此类的javascript引擎库，那么本文还是值得你一读的，相信在你了解完它强大的功能和简单用法之后，一定会迫不及待地将之用于你的工作当中。

 

1. 从一个简单真实的需求讲起

在一个统一的开发平台，后台封装了MVC的接口和数据增删改查的接口，前端用bootstrap+手写各类组件的方式弄了一套开发框架；集成了CAS，在CAS的基础上，首先做了一套统一权限管理系统，这个系统是第一个子系统，用来管理配置所有子系统的菜单和授权以及管理整个公司的组织结构和用户，后来又陆陆续续地开发了业务系统A和业务系统B。由于这三个子系统对应的是三个java工程，最终部署的时候，在tomcat里部署了三个应用，现在有一个需求是：

1）在每个系统里登录之后，点击系统名称，可以展开一个下拉菜单，显示所有有权限的子系统；

2）然后用户点击其它子系统，就可以切换到所选中的系统去，到了其它系统之后，由于都做了这个下拉菜单，所以也可以再从该系统切换回来；

3）如果用户只有一个系统的权限，则不显示下拉菜单。

原型大概是这个样子：

image

 

功能实现方法是，在每个子系统登录完成之后，调用获取系统列表的接口，用js渲染一个下拉菜单出来，该接口返回的格式为：

data: [
    {
        "sortOrder": 1,
        "isCurrent": true, 
        "systemHttpUrl": "http://xxxx:8080/permission",
        "systemName": "统一权限管理系统"
    },
    {
        "sortOrder": 2,
        "isCurrent": false, 
        "systemHttpUrl": "http://xxxx:8080/systemA",
        "systemName": "业务系统A"
    },
    {
        "sortOrder": 3,
        "isCurrent": false, 
        "systemHttpUrl": "http://xxxx:8080/systemB",
        "systemName": "业务系统B"
    }
]

如果不采用模板引擎，那么传统的方式去解析这个数据并把它转变成html串的方法通常是：

function data2Html(data) {
    data = data || [];
    var html = ['<ul class="nav navbar-nav navbar-left nav-system">',
            '      <li class="dropdown">',
            '        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" title="切换系统">'],
        l = data.length;

    if(l < 2) {
        l == 1 && html.push(data[0].systemName || '');
        html.push('</a></li></ul>');
        return html.join('');
    }

    var curSysAry = data.filter(function(s){ return s.isCurrent; });
    html.push(curSysAry[0].systemName + ' <i class="fa fa-caret-down"></i></a><ul class="dropdown-menu">');
    data.sort(function(a, b){ return a.sortOrder - b.sortOrder;});
    for(var i = 0; i < l; i++) {
        i && html.push('<li role="separator" class="divider"></li>');
        html.push('<li><a href="' + data[i].systemHttpUrl + '" target="_self">' + data[i].systemName + '</a></li>');
    }
    html.push('</ul></li></ul>');
    return html.join('');
}

这种拼接字符串的方式有诸多弊端：

1）麻烦，尤其是拼接逻辑复杂，拼接的串很长时；

2）不易维护，稍有不慎就会弄错标签的对应关系；

3）结构不清晰。

能够简化这个场景的工具就是模板引擎，模板引擎的技术后台最先有，如果你用过jsp，就一定知道jsp也就是一个模板，用来解析呈现数据用的，其它后台模板引擎还有velocity和freemarker等等。前端的模板引擎也有很多，mustache.js算是比较流行的一个，git上有8000多个赞，如果这个问题我们用mustache.js来做，就可以变成这样：

//通过一些根据属性名称对应的标记定义模板
var _template = [
        '<ul class="nav navbar-nav navbar-left nav-system">',
        '  <li class="dropdown">',
        '    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" title="切换系统">',
        '     {{curSystemName}} {{#multiple}}<i class="fa fa-caret-down"></i>{{/multiple}}',
        '    </a>',
        '    {{#multiple}}<ul class="dropdown-menu">',
        '        {{#systems}}',
        '           {{^first}}<li role="separator" class="divider"></li>{{/first}}',
        '           <li>',
        '               <a href="{{{systemHttpUrl}}}" target="_self">{{systemName}}</a>',
        '           </li>',
        '        {{/systems}}',
        '    </ul>{{/multiple}}',
        '  </li>',
        '</ul>'
    ].join('');

//初始化这个模板
Mustache.parse(_template);
function data2Html(data) {
    data = data || [];
    var curSysAry = data.filter(function(s){ return s.isCurrent; });
    data.sort(function(a, b){ return a.sortOrder - b.sortOrder;});
    data = data.map(function(s, i){s.first = i == 0; return s});

    //模板渲染成字符串
    return Mustache.render(_template, {
        curSystemName: curSysAry.length ? curSysAry[0].systemName : '',
        multiple: !!data.length,
        systems: data
    });
}

对比两个代码，会发现后面的代码，相对于前面的有以下这些优点：

1）结构清晰，所有待渲染的html都定义在一个位置，而且没有任何拼接的现象；

2）逻辑清晰，那些在模板里的标记，实际上与模板渲染时传进去的对象的属性名称都是对应的；

3）易维护，要增删标签都只用调整模板对应的数组就行了。

通过这个例子，应该能对模板引擎有了一个大概的认识，这类工具在前端开发中越来越普遍，尤其是前后端分离的应用中用的更多，已经是这类应用的基础架构的内容了。mustache.js是一个非常简单易用的引擎实现，接下来的内容将会对这个工具常用的模板配置

 

2. mustache的用法

mustache的使用非常简单，先通过script标签引入它的js文件，然后按下面的步骤操作： 
1）定义模板字符串 
定义模板有2种方式，方式一就是在前面部分中看到的，直接用[...].join('')的方式在js代码中定义，方式二直接把模板内容用script定义在html中：

<script id="tpl" type="text/html">
    Hello {{name}}!
</script>

然后在编译模板之前，通过获取tpl的innerHTML定义原始模板串：

var tpl = document.getElementById('tpl').innerHTML.trim();

具体要用哪种方式来定义模板，可以参考下面的建议： 
如果这个模板要用于多个页面，推荐把模板定义在js代码中；如果这个模板只用于当前页面，推荐直接定义到script标签中，管理更方便。 
2）预编译模板 
假设原始模板串已经定义好，并用tpl变量来引用，就可以通过下面的代码来预编译模板：

Mustache.parse(tpl);

要注意的是，经过预编译之后的tpl已经不再是原来的模板串了，连数据类型都变成数组类型了，这都是预编译的结果。 
3）渲染模板 
渲染方式很简单：

var htmlAfterRendered = Mustache.render(tpl1, obj);

obj引用的是一个数据源对象，mustache会把模板中那些属性标签，根据约定的规则，替换成对象的内容。htmlAfterRendered就是替换之后的字符串，你可以用它完成你需要的DOM操作。

 

3. mustache的思想

mustache的核心是标签和logic-less。从前面的代码中可以看到定义模板时，使用了{{name}}这样的标记，还有{{#systems}}{{/systems}}，这就是mustache的标签，只不过它用{{}}替代了<>，以免跟html标签的<>混淆。logic-less，可以翻译为轻逻辑，因为在定义模板的时候不会用到if-else，不会有循环式的编码，一切都用标签来解决，它的标签非常简单，但是能应付所有场景，只要用以下几个标签几乎就能解决所有的问题： 
{{prop}} 
{{{prop}}} 
{{#prop}}{{/prop}} 
{{^prop}}{{/prop}}

 

4. {{prop}}标签

这个标签是mustache模板里用的最多的，可以将数据源对象上prop属性对应的值，转换成字符串进行输出，以下是同一个属性，对应不同类型的值，在经过mustache渲染之后输出结果的测试（前后那根短横线的作用是为了让这个标签的渲染结果看起来更清楚）：

<script id="tpl1" type="text/html">
    -{{prop}}-
</script>
<script>
    var tpl1 = document.getElementById('tpl1').innerHTML.trim();
    Mustache.parse(tpl1);
    //测试falsy值
    console.log(Mustache.render(tpl1, {prop: ''}));//--
    console.log(Mustache.render(tpl1, {prop: 0}));//-0-
    console.log(Mustache.render(tpl1, {prop: null}));//--
    console.log(Mustache.render(tpl1, {prop: undefined}));//--
    console.log(Mustache.render(tpl1, {prop: false}));//-false-
    console.log(Mustache.render(tpl1, {prop: NaN}));//-NaN-

    //测试简单对象
    console.log(Mustache.render(tpl1, {prop: {name: 'jason'}}));//-[object Object]-
    //测试数组
    console.log(Mustache.render(tpl1, {prop: [{name: 'jason'}, {name: 'frank'}]}));//-[object Object],[object Object]-
    //测试日期对象
    console.log(Mustache.render(tpl1, {prop: new Date()}));//-Mon Jan 18 2016 15:38:46 GMT+0800 (中国标准时间)-
    //测试自定义toString的简单对象
    var obj1 = {name: 'jason'};
    obj1.toString = function () {
        return this.name;
    };
    console.log(Mustache.render(tpl1, {prop: obj1}));//-jason-

    //测试boolean number string
    console.log(Mustache.render(tpl1, {prop: true}));//-true-
    console.log(Mustache.render(tpl1, {prop: 1.2}));//-1.2-
    console.log(Mustache.render(tpl1, {prop: 'yes'}));//-yes-

    //测试function
    console.log(Mustache.render(tpl1, {
        prop: function () {
        }
    }));//--
    console.log(Mustache.render(tpl1, {
        prop: function () {
            return 'it\'s a fun'
        }
    }));//-it&#39;s a fun-
    console.log(Mustache.render(tpl1, {
        prop: function () {
            return false;
        }
    }));//-false-
    console.log(Mustache.render(tpl1, {
        prop: function(){
            return function (text, render) {
                return "<b>" + render(text) + "</b>"
            };
        }
    }));
    //-function (text, render) {
    //   return &quot;&lt;b&gt;&quot; + render(text) + &quot;&lt;&#x2F;b&gt;&quot;
    //}-

</script>

mustache渲染{{prop}}标签的逻辑是：

1）如果prop引用的值是null或undefined，则渲染成空串；

2）如果prop引用的是一个函数，则在渲染时自动执行这个函数，并把这个函数的返回值作为渲染结果，假如这个返回值为null或者undefined，那么渲染结果仍然为空串，否则把返回值转成字符串作为渲染结果（注意最后一个用例，直接把函数代码渲染出来了）；

3）其它场景，直接把prop引用的值转成字符串作为渲染结果。

由于默认情况下，mustache在渲染prop时，都是对prop的原始值进行url编码或者html编码之后再输出的，所以有一个用例的渲染结果，把英文的单引号，转成了html实体符：

console.log(Mustache.render(tpl1, {
     prop: function () {
         return 'it\'s a fun'
     }
}));//-it&#39;s a fun-

如果要阻止这种编码行为，只要把标签形式改成{{{prop}}}就可以了：

<script id="tpl1" type="text/html">
    -{{{prop}}}-
</script>
console.log(Mustache.render(tpl1, {
    prop: function () {
        return 'it\'s a fun'
    }
}));//-it's a fun-

 

5. {{#prop}}{{/prop}}标签

这对标签的作用非常强大，可以同时完成if-else和for-each以及动态渲染的模板功能。在这对标签之间，可以定义其它模板内容，嵌套所有标签。接下来看看mustache如何利用这个对标签完成这三个模板功能。

1) if-else渲染

只有prop属性在数据源对象上存在，并且不为falsy值（javascript 6个falsy值：null,undefined,NaN,0,false,空字符串），并且不为空数组的情况下，标签之间的内容才会被渲染，否则都不会被渲染：

<script id="tpl2" type="text/html">
    -{{#prop}}content{{/prop}}-
</script>
<script>
    var tpl2 = document.getElementById('tpl2').innerHTML.trim();
    Mustache.parse(tpl2);
    //测试falsy值
    console.log(Mustache.render(tpl2, {prop: ''}));//--
    console.log(Mustache.render(tpl2, {prop: 0}));//--
    console.log(Mustache.render(tpl2, {prop: null}));//--
    console.log(Mustache.render(tpl2, {prop: undefined}));//--
    console.log(Mustache.render(tpl2, {prop: false}));//--
    console.log(Mustache.render(tpl2, {prop: NaN}));//--
    //测试空数组
    console.log(Mustache.render(tpl2, {prop: []}));//--
    //测试不存在的属性
    console.log(Mustache.render(tpl2, {prop2: 
true
}));//--
    //测试function
    console.log(Mustache.render(tpl2, {
        prop: function () {
        }
    }));//--
    console.log(Mustache.render(tpl2, {
        prop: function () {
            return false;
        }
    }));//--
    console.log(Mustache.render(tpl2, {
        prop: function() {
            return [];
        }
    }));//--
    
    //测试简单对象
    console.log(Mustache.render(tpl2, {prop: {name: 'jason'}}));//-content-
   //测试日期对象
    console.log(Mustache.render(tpl2, {prop: new Date()}));//-content-
    //测试boolean number string
    console.log(Mustache.render(tpl2, {prop: true}));//-content-
    console.log(Mustache.render(tpl2, {prop: 1.2}));//-content-
    console.log(Mustache.render(tpl2, {prop: 'yes'}));//-content-
    //测试返回非falsy，非空数组的function
    console.log(Mustache.render(tpl2, {
        prop: function () {
            return 'it\'s a fun'
        }
    }));//-content-
</script>

以上用例中特殊点的就是prop属性引用的是一个函数的时候，{{#prop}}会自动调用这个函数，并把函数的返回值作为if-else渲染逻辑的判断依据，也就是说如果这个函数返回的是falsy值或者是空数组的时候，那么这对标签之间的内容还是不会显示。

2）for-each渲染

当prop属性所引用的是一个非空数组时，这对标签之间的内容将会根据数组大小进行迭代，并且当数组元素为对象时，还会把该对象作为每一次迭代的上下文，以便迭代时的标签可以直接引用数组元素上的属性：

<script id="tpl2" type="text/html">
    -{{#prop}}{{name}},{{/prop}}-
</script>
<script>
     var tpl2 = document.getElementById('tpl2').innerHTML.trim();
     Mustache.parse(tpl2);
     console.log(Mustache.render(tpl2, {prop: [{name: 'jason'}, {name: 'frank'}]}));//-jason,frank,-
</script>

从这个测试结果中可以看到，{{#prop}}{{/prop}}之间的模板内容根据prop所引用的数组迭代了两次，并且在这对标签内部直接通过{{name}}标签，输出了数组元素对象上的name属性对应的值。

如果prop属性所引用的是一个函数，但是这个函数返回值是一个数组类型，那么仍然会进行for-each渲染：

<script id="tpl2" type="text/html">
    -{{#prop}}{{name}},{{/prop}}-
</script>
<script>
     var tpl2 = document.getElementById('tpl2').innerHTML.trim();
     Mustache.parse(tpl2);
     console.log(Mustache.render(tpl2, {
         prop: function(){
             return [{name: 'jason'}, {name: 'frank'}];
         }
     }));//-jason,frank,-
</script>

3） 动态渲染

当prop属性所引用的是一个函数，并且这个函数的返回值还是一个函数的话，mustache会再次调用这个返回的函数，并给它传递2个参数：text表示原来的模板内容，render表示mustache内部的执行渲染的对象，以便在这个函数内部可以通过这render对象，结合原来的模板内容，自定义渲染的逻辑，并把函数的返回值作为渲染结果（这个返回值渲染的逻辑跟{{prop}}标签完全一样）：

<script id="tpl2" type="text/html">
    -{{#prop}}content{{/prop}}-
</script>
<script>
     var tpl2 = document.getElementById('tpl2').innerHTML.trim();
     Mustache.parse(tpl2);
     console.log(Mustache.render(tpl2, {
        prop: function(){
            return function (text, render) {
                return "<b>" + render(text) + "</b>"
            };
        }
    }));//-<b>content</b>-
</script>

 

6. {{^prop}}{{/prop}}标签

这对标签，与{{#prop}}{{/prop}}的if-else渲染执行相反逻辑，即只有在prop属性不存在，或者引用的是一个falsy值，或者是一个空数组的时候才会显示标签之间的内容，否则不会显示：

<script id="tpl2" type="text/html">
    -{{^prop}}content{{/prop}}-
</script>
<script>
    var tpl2 = document.getElementById('tpl2').innerHTML.trim();
    Mustache.parse(tpl2);
    //测试falsy值
    console.log(Mustache.render(tpl2, {prop: ''}));//-content-
    console.log(Mustache.render(tpl2, {prop: 0}));//-content-
    console.log(Mustache.render(tpl2, {prop: null}));//-content-
    console.log(Mustache.render(tpl2, {prop: undefined}));//-content-
    console.log(Mustache.render(tpl2, {prop: false}));//-content-
    console.log(Mustache.render(tpl2, {prop: NaN}));//-content-
    // 测试空数组
    console.log(Mustache.render(tpl2, {prop: []}));//-content-
    // 测试不存在的属性
    console.log(Mustache.render(tpl2, {prop2: true}));//-content-
    //测试function
    console.log(Mustache.render(tpl2, {
        prop: function () {
        }
    }));//-content-
    console.log(Mustache.render(tpl2, {
        prop: function () {
            return false;
        }
    }));//-content-
    console.log(Mustache.render(tpl2, {
        prop: function () {
            return [];
        }
    }));//-content-


    //测试简单对象
    console.log(Mustache.render(tpl2, {prop: {name: 'jason'}}));//--
    //测试日期对象
    console.log(Mustache.render(tpl2, {prop: new Date()}));//--
    // 测试非空数组
    console.log(Mustache.render(tpl2, {prop: [{name: 'jason'},{name: 'tom'}]}));//--

    //测试boolean number string
    console.log(Mustache.render(tpl2, {prop: true}));//--
    console.log(Mustache.render(tpl2, {prop: 1.2}));//--
    console.log(Mustache.render(tpl2, {prop: 'yes'}));//--
    
    //测试返回非falsy，非空数组的function
    console.log(Mustache.render(tpl2, {
        prop: function () {
            return 'it\'s a fun'
        }
    }));//--

    //测试返回function的function
    console.log(Mustache.render(tpl2, {
        prop: function () {
            return function(text,render){
                return '<b>' + render(text) +'</b>'
            }
        }
    }));//--
</script>

 

7. 渲染上下文

mustache有一个渲染上下文栈的概念，在模板渲染的开始的时候，把数据源对象作为当前的渲染上下文 ，并压入上下文栈。在遇到{{#prop}}标签的时候，如果prop引用的是一个对象或者是一个非空的对象数组，或者prop引用的是一个函数，并且这个函数返回的是一个对象或者是一个非空的对象数组，就会把这个对象或者数组的元素作为当前渲染上下文，并压入上下文栈，当这个标签渲染完毕的时候，才会把该上下文弹出，恢复上一层标签所使用的上下文。由于{{#prop}}标签可以多层嵌套，所以在有的模板渲染的时候，会有多层上下文存在。mustache在解析标签时，根据标签名称查找当前上下文对象是否存在该属性，如果不存在就会到上层上下文对象中查找，只要在某一层找到，就会用该层上下文对象的值来渲染。

<script id="tpl2" type="text/html">
    -{{#person}}{{#student}}{{#address}}address: {{home}},age: {{age}}{{/address}}{{/student}}{{/person}}-
</script>
<script>
    var tpl2 = document.getElementById('tpl2').innerHTML.trim();
    var obj2 = {
        age: 20,
        person: {
            student: {
                address: {
                    home: 'xxxxx'
                }
            }
        }
    };
    console.log(Mustache.render(tpl2, obj2));//-address: xxxxx,age: 20-
</script>

上面这个例子中，在渲染{{#address}}{{/address}}时，上下文对象已经变成了obj2.person.student.address所引用的对象，所以{{home}}渲染时用到的就是obj2.person.student.address.home属性，而{{age}}渲染时，由于obj2.person.student.address不存在age属性，所以就会到上层上下文中查找，一直到obj2对象才找到，于是就把obj2.age当成了渲染结果。

还有一种方法，不用通过{{#prop}}创建新的上下文，也可以做到递归渲染属性的属性：

<script id="tpl2" type="text/html">
    -address: {{person.student.address.home}},age: {{age}}-
</script>
<script>
    var tpl2 = document.getElementById('tpl2').innerHTML.trim();
    var obj2 = {
        age: 20,
        person: {
            student: {
                address: {
                    home: 'xxxxx'
                }
            }
        }
    };
    console.log(Mustache.render(tpl2, obj2));//-address: xxxxx,age: 20-
</script>

这种方法其实很好理解，只要知道当前的上下文对象，再根据属性操作串person.student.address.home，当然就能找到需要的值了。

 

8. 结束语

本文介绍了一个非常好用的前端模板引擎，涵盖的内容包含了在日常工作肯定会用到的知识点，剔除了那些我认为一定不会用到的知识点，如果还想了解更多关于mustache配置方面的知识，可以继续学习它的相关文档：

http://mustache.github.io/mustache.5.html

 

原文链接

转载于:https://www.cnblogs.com/AllenR/p/8466391.html

aih29538
关注
Js模板引擎mustache.js的使用方法，打狗棒法之《挑拨狗爪》
我是Cj，一个正义之人
09-18 875
本文转载Javascript模板引擎mustache.js详解 写的不错，后面部分代码经过注释和加工。 mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用。本文总结它的使用方法和一些使用心得，内容不算很高深，纯粹是入门内容，看看即可。不过要是你还没有用过此类的javascript引擎库，那么本文还是值得你一读的，相信在你了解完它强大的功能和简单用法之后，一定会迫不及待地将之用于你的工作当中。 1. 从一个简单真
mustache模板技术简介
qq_39714973的博客
03-16 600
mustache模板技术简介 一、简介 Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，通常是标准的 HTML 文档。当然不同的开发语言有不同模板引擎，如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty，这里主要介绍基于 Javascript 语言的模板引擎，目前流行有 Mustache、...
探究Javascript模板引擎mustache.js使用方法
10-22
主要为大家介绍了Javascript模板引擎mustache.js使用方法，mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用，感兴趣的小伙伴们可以参考一下
Javascript模板引擎mustache.js详解
weixin_34393428的博客
01-20 287
mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用。本文总结它的使用方法和一些使用心得，内容不算很高深，纯粹是入门内容，看看即可。不过要是你还没有用过此类的javascript引擎库，那么本文还是值得你一读的，相信在你了解完它强大的功能和简单用法之后，一定会迫不及待地将之用于你的工作当中。 1. 从...
Frame.js 开源项目教程
最新发布
gitblog_00376的博客
09-28 475
Frame.js 开源项目教程 frame.js JavaScript Sequence Editor 项目地址: https://gitcode.com/gh_mirrors/fr/frame.js ...
Mustache.js源码分析
weixin_34378922的博客
01-28 339
mustache.js是一个弱逻辑的模板引擎，语法十分简单，使用很方便。源码（v2.2.1）只有600+行，且代码结构清晰。 一般来说，mustache.js使用方法如下： var template = 'Hello, {{name}}'; var rendered = Mustache.render(template, { na...
详解Javascript模板引擎mustache.js
10-22
**JavaScript 模板引擎 Mustache.js 详解** Mustache.js 是一个轻量级且功能强大的JavaScript模板引擎，它遵循无逻辑模板语言（Logic-less templates）的设计原则，这意味着模板引擎本身不包含任何条件判断或循环...
前端模板引擎Mustache教程.zip
12-24
3. "Javascript模板引擎mustache.js详解 - 流云诸葛 - 博客园"：该文章深入解析了Mustache.js的工作原理，对于理解其内部机制非常有帮助。 4. "Mustache模板技术，一个比freemarker轻量级的模板引擎 - cnhome的专栏 ...
JavaScript模板引擎Template.js使用详解
11-26
JavaScript模板引擎Template.js是一款高效的模板引擎，主要用于生成HTML片段，以根据输入的数据动态渲染不同的页面效果。该引擎设计简洁易用，提供了丰富的语法特性，确保了高性能和安全性。以下是Template.js的一些...
前端项目-mustache.js.zip
09-02
前端项目-mustache.js,无逻辑胡须带javascript的模板
探索Mustache.js：强大的模板引擎，让Web开发更灵活
gitblog_00041的博客
03-19 672
探索Mustache.js：强大的模板引擎，让Web开发更灵活 项目地址:https://gitcode.com/gh_mirrors/mu/mustache.js 是一个简洁、无逻辑的模板语言，它的JavaScript实现使得它在Web开发中扮演了重要角色。这篇技术文章将详细介绍Mustache.js的核心原理、应用场景和独特优势，帮助开发者更好地理解和利用这一强大工具。 1. 项目简介 Mus...
探究Vue源码:mustache模板引擎(2) mustache使用方法
weixin_45966674的博客
06-06 628
mustache是最早的模板引擎 比vue的诞生还要早很多 而他的语法 就是基于 {{ }} 这样的双花括号。我们可以看到 我们直接通过 {{ 属性名 }} 就可以像vue的写法一样 去那响应式数据了。然后循环遍历他 里面写的 {{ name }} 就是取循环出来的每个下标的name值。我们就用刚刚改变script的type的方法将页面模板放进去了 然后 定义了一个id。简单说 就是 {{ #需要循环的字段 }} 内容 {{ /需要循环的字段 }}
js模板引擎mustache介绍及实例
u010227042的博客
06-25 457
Loading
mustache.js
06-06 96
mustache.js 是一个Mustache模板系统的 JavaScript 实现。 Mustache模板语法的逻辑比较简单。它用于HTML，配置文件，源代码等。它的工作方式是通过通过以哈希值或者对象的方式扩展模板标签。 下面是一个简单的如何用mustache.js的例子： var view = { title: "Joe", calc: function () {...
js模板引擎库mustache中类似if判断的处理 及handlebars.js
热门推荐
每天进步一点点
09-21 1万+
mustache是短小精悍速度超快的js模板引擎库，地址：http://github.com/janl/mustache.js
mustache语法
lddnzx的博客
04-16 244
今天在自学vue时，看到mastache插值，并不是很明白，于是上网搜了一下，了解到是一款前端模板引擎。找到一篇博客 感觉写的不错，码一下。 mustache 模板，用于构造html页面内容。在实际工作中，当同一个模板中想要调用不同的函数来渲染画面，在已经自定义好了的前提下，可以在渲染页面时对传入的参数进行手动判断。【在不好判断的情况下，我们可以通过改变传入参数来进行判断】 ...
Vue模板语法 mustache语法列表渲染 事件
你好的博客
05-25 354
Vue模板语法 mustache语法 双大括号语法 1.指令 Vue 指令 作用： 是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM 以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM 这个指令需要模板语法的支持，所以我们采用jsx语法糖 2.组件 模板语法 模板语法支持性还是很高的，数据类型都是支持的，但是不...
使用教程：Javascript模板引擎mustache.js实战解析
"本文详细介绍了JavaScript模板引擎Mustache.js的使用，包括其在实际项目中的应用场景和基本操作。文章以一个具体的需求为例，展示了如何利用Mustache.js来动态生成和渲染HTML内容，以此来解决在多系统间切换的问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值