在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}}的内容。
<script id="template" type="x-tmpl-mustache">

    {{name}}

</script>

<script type="text/javascript">

    var template = $("#template").html();

    //name值为函数返回值

    var r = Mustache.render(template,{

        name:function(){

            return 'abc'            //abc会替换双花括号内name

        }

    })

    //name值为字符串

    var r = Mustache.render(template,{name:'wan'})  //字符串wan会替换双花括号内的name

</script>

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

<script id="template" type="x-tmpl-mustache">

    {{.}}

</script>

<script type="text/javascript">

    function loadUser(){

        var template = $("#template").html();

        var r = Mustache.render(template,'wan')         //渲染出wan

        //或

        var r = Mustache.render(template,[,d,])       //渲染出1,d,3

        //或

        var r = Mustache.render(template,)             //渲染出1

    }

</script>

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

对象属性值为数组时 实现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:,job:'The Front End'},

            {name:'wangxiaosan',age:,job:'java'},

            {name:'lixiaosi',age:,job:'The Front End'},

            {name:'sunxiaowu',age:,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

<script id="template" type="text/template"></script>

使用原生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:,job:'The Front End'},

                {name:'wangxiaosan',age:,job:'java'},

                {name:'lixiaosi',age:,job:'The Front End'},

                {name:'sunxiaowu',age:,job:'java'}

            ]

        }

        //加载模板方法

        function loadTemplateMustache(mustacheName,targetId,templateId,data){

            //模板路径

            var mustacheDir = './mustache/'+mustacheName+'.mustache';

            //渲染目标容器

            var targetContainer = $(targetId);

            if(targetContainer.length > ){

                $.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>

————————————————

版权声明：本文为CSDN博主「lucky万万」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_30019329/article/details/87895623

js模板引擎mustache介绍及实例的更多相关文章

  1. JS模板引擎-Mustache模板引擎使用实例1-表格树

    1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...

  2. Js模板引擎mustache

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  3. 前端JS模板引擎Mustache.js的用法

    Mustache.js在前端是一个非常强大的模板 Mustache用法参考

  4. js模版引擎Mustache介绍

    Mustache通常被称为JavaScript模板的基础.另一个流行的解决方案Hanldebars实际上就是基于Mustache构建而成的.这并不意味着Mustache是一个不好的模板解决方案. 下面 ...

  5. vue系列---Mustache.js模板引擎介绍及源码解析(十)

    mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...

  6. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  7. 模板引擎mustache.js

    Javascript模板引擎mustache.js详解   阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...

  8. 探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

  9. 使用新一代js模板引擎NornJ提升React.js开发体验

    当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...

随机推荐

  1. 剑指offer-面试题40-最小的k个数-最大堆

    /* 题目: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. */ /* 思路: 利用最大堆,C++中使用multiset& ...

  2. 【pycharm基本操作】项目创建、切换、运行、字体颜色设置，常见包的安装步骤

    创建新项目 退出项目 怎样区别虚拟环境和系统环境? 虚拟环境和系统环境切换:进入项目切换解释器 切换项目 创建python目录和文件 代码运行方式一: 还可以这样执行代码方式二: 文件的剪切.复制.删 ...

  3. idea 阿波罗（apollo）设置

    项目启动时需要配置环境

  4. 11maven的聚合

    我们都知道项目之间的依赖首先要把被依赖的项目先安装install到maven的本地仓库中,然后在本项目中配置被依赖的仓库坐标,才能进行依赖通信. 例如: A项目 >  B项目 A项目依赖B项目中 ...

  5. SQL server安装时显示重启计算机失败问题解决办法

    前几天在装SQL server2016的时候,一直显示重启计算机失败; 网上的方法也找来用了,但是重启完还是同样的问题,试了很多种方法,最后在一次测试中点关机的时候不小心点成了重启(win10有个毛病 ...

  6. USB闪存驱动器未显示在MacOS的Finder或磁盘工具上?为什么Mac无法识别USB该如何解决？

    您可能会在Mac上无法显示的闪存驱动器上形成困扰.您确定驱动器正常,但Mac计算机无法检测到.  阅读这篇文章,闪存驱动器未显示在MacOS的Finder或磁盘工具上?为什么Mac无法识别USB该如何 ...

  7. gulp常用插件之gulp-rev-outdated使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-outdated这是一款旧的静态资产修订文件过滤器. 我们可以使用gulp rev来缓存一些资产.源文件的每次修改都会导致新的修 ...

  8. oracle Insert 一次插入多条记录

    oracle Insert 一次插入多条记录有两种方法: 1)Insert All Into table_name values ... insert all into table_name valu ...

  9. exe 发布为服务

    参考连接: https://www.cnblogs.com/liuxiaoji/p/8016261.html 1.有两个文件 srvany.exe,instsrv.exe 然后放到指定的文件下下: 2 ...

  10. Costco这样的超级零售商，能不能干掉电商？

    名创优品创始人叶国富曾说过,Costco只是没有来到中国(大陆),如果它来了,中国现在的零售业全部都会"死光".叶国富的话,似乎一语成箴. 随着Costco正式入华,其正在彻底搅动 ...