Js模板引擎mustache.js的使用方法，打狗棒法之《挑拨狗爪》

最新推荐文章于 2024-08-09 07:59:22 发布

仓颉大哥

最新推荐文章于 2024-08-09 07:59:22 发布

阅读量892

点赞数 1

分类专栏：三十六式打狗棒法文章标签： mustache mustache模板 js模板引擎

本文链接：https://blog.csdn.net/xiaorui51/article/details/108658203

版权

本文介绍了JavaScript模板引擎mustache.js的使用方法，包括{{prop}}、{{#prop}}{{/prop}}和{{^prop}}{{/prop}}等标签的用法，强调了其在简化HTML编写和提高代码可维护性方面的优势。

摘要由CSDN通过智能技术生成

本文转载Javascript模板引擎mustache.js详解
写的不错，后面部分代码经过注释和加工。

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

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

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

1）在每个系统里登录之后，点击系统名称，可以展开一个下拉菜单，显示所有有权限的子系统；
2）然后用户点击其它子系统，就可以切换到所选中的系统去，到了其它系统之后，由于都做了这个下拉菜单，所以也可以再从该系统切换回来；
3）如果用户只有一个系统的权限，则不显示下拉菜单。

需求其实挺简单，原型大概是这个样子：

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

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

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

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

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('');
    }

    //数组的过滤器：filter 其中的条件是字段 isCurrent是否为true，如果为true则过滤保留，否则pass掉，不要
    var curSysAry = data.filter(function(s) {
    return s.isCurrent; });
    //数组使用Push压入
    html.push(curSysAry[0].systemName + ' <i class="fa fa-caret-down"></i></a><ul class="dropdown-menu">');
    //然后进行排序 sort，其中的条件是后一个比前一个的sortOrder大
    data.sort(function(a, b) {
    return a.sortOrder - b.sortOrder; });
    //进行遍历
    for (var i = 0; i < l; i++) {
   
        //i不为0的时候，就添加一个下划线
        i && html.push('<li role="separator" class="divider"></li>');
        //继续在数据html中进行拼接字符串，同时取出data中的systemHttpUrl链接，注意这里的 单引号和双引号  2020年9月17日
        html.push('<li><a href="' + data[i].systemHttpUrl + '" target="_self">' + data[i].systemName + '</a></li>');
    }
    //最后添加结束匹配字符串
    html.push('</ul></li></ul>');
    //html数组然后通过join合并为一个字符串，元素之间直接拼接在一起
    return html.join('');
}

console.info(data2Html(datas));

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

1）麻烦，尤其是拼接逻辑复杂，拼接的串很长时；
2）不易维护，稍有不慎就会弄错标签的对应关系；
3）结构不清晰。

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

//通过一些根据属性名称对应的标记定义模板

var mustache = require("Mustache");

var datas = [{
   
        "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"
    }
];

//通过一些根据属性名称对应的标记定义模板
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 || [];

    //对isCurrent进行过滤 保留true的

最低0.47元/天解锁文章