让Mustache支持简单的IF语句

转载：https://blog.csdn.net/iteye_16732/article/details/82070065

Mustache是一种Logic-less templates.不支持if这类条件判断是Logic-less的显著特征之一.Mustache的另一个特征是体积小,不依赖其他前端类库,在浏览器端和NodeJS中都可以运行.

并非Logic-less.Mustache的体积小,无依赖,前后兼容才是我们当前的项目选择这套模板系统的真正原因.没有IF有时候感觉并不给力,所以就想办法简单扩展下Mustache,让其具有一些通用的条件判断能力.

比如如下的应用场景,我们需要根据某一字段的值,决定输出有意义的中文,并用颜色加以修饰.

status=="P" ==> <b style="color:green">通过</b>
status=="W" ==> 等待
status=="R" ==> <b style="color:red">拒绝</b>

Logic-less模板实现这个功能就需要在数据上下功夫,如下.

 data = {
     list:[
         { id:"1",status"P"},
         { id:"2",status"W"},
         { id:"3",status"R"}
     ],
     statusRenderer:function(){
         if(this.status=="P"){
             return '<b style="color:green">通过</b>'
         }else if(this.status=="W"){
             return '等待'
         }else{
             return '<b style="color:red">拒绝</b>'
         }
     }
 }

这里的statusRenderer就是在数据这边扩展做的工作,{{{statusRenderer}}}在渲染时,this指向当前context,在取得status之后,经过判断,return正确的渲染字符串.
于是配合下面的模板就可以满足我们的要求

 <ul>
 {{#list}}
 <li>ID:{{id}},status:{{{statusRenderer}}}</li>
 {{/list}}
 </ul>

项目是很复杂的,如果需要写无数statusRenderer那会非常累,所以我想Renderer功能强大,在遇到各种特殊情况时,单独写一下未尝不可,但是想上面这种常见需求是需要抽象一下的.
比如我们希望如下这样的模板,完成同样的需求.

 <ul>
 {{#list}}
 {{#if(status==P)}}<li>ID:{{id}},status:<b style='color:green'>通过</b></li>{{/endif}}
 {{#if(status==W)}}<li>ID:{{id}},status:等待</li>{{/endif}}
 {{#if(status==R)}}<li>ID:{{id}},status:<b style='color:red'>拒绝</b></li>{{/endif}}
 {{/list}}
 </ul>

这个改造看起来一定是会伤筋动骨的,因为完全打破了{{#xxx}}{{/xxx}}这种Mustache的嵌套模式.改过之后Mustache就不再是Mustache了.
于是我们在这里妥协下,把{{/endif}}改为{{/if(status==W)}},这样{{#if(status==W)}}{{/if(status==W)}}就配起对来了.
接下来我们就只要想办法从模板中把这类标签正则出来,然后为这类配对自动添加Renderer即可.
模板变成了下面这样:

 <ul>
 {{#list}}
 {{#if(status==P)}}<li>ID:{{id}},status:<b style='color:green'>通过</b></li>{{/if(status==P)}}
 {{#if(status==W)}}<li>ID:{{id}},status:等待</li>{{/if(status==W)}}
 {{#if(status==R)}}<li>ID:{{id}},status:<b style='color:red'>拒绝</b></li>{{/if(status==R)}}
 {{/list}}
 </ul>

而输入给to_html方法的数据则变成如下这样(里边的Render为自动生成):

 data = {
     list:[
         { id:"1",status"P"},
         { id:"2",status"W"},
         { id:"3",status"R"}
     ],
     //下面Renderer为自动生成.
     "if(status==P)":function(){
         if(this.status=="P"){
             return true;
         }
         return false;
     },
     "if(status==W)":function(){
         if(this.status=="W"){
             return true;
         }
         return false;
     },
     "if(status==R)":function(){
         if(this.status=="R"){
             return true;
         }
         return false;
     }
 }

整个改造的大体流程如下,首先从模板中取出if(x.y.z==abc)这样的key,然后自动生成以"if(x.y.z==abc)"为名字的Renderer.全部代码如下:

     function addFns(template, data){
         var ifs = getConditions(template);
         var key = "";
         for (var i = 0; i < ifs.length; i++) {
             key = "if(" + ifs[i] + ")";
             if (data[key]) {
                 continue;
             }
             else {
                 data[key] = buildFn(ifs[i]);
             }
         }
     }
     function getConditions(template){
         var ifregexp_ig = /\{{2,3}[\^#]?if\((.*?)\)\}{2,3}?/ig;
         var ifregexp_i = /\{{2,3}[\^#]?if\((.*?)\)\}{2,3}?/i;
         var gx = template.match(ifregexp_ig);
         var ret = [];
         if (gx) {
             for (var i = 0; i < gx.length; i++) {
                 ret.push(gx[i].match(ifregexp_i)[1]);
             }
         }
         return ret;
     }
     function buildFn(key){
         key = key.split("==");
         var res = function(){
             var ns = key[0].split("."), value = key[1];
             var curData = this;
             for (var i = ns.length - 1; i > -1; i--) {
                 var cns = ns.slice(i);
                 var d = curData;
                 try {
                     for (var j = 0; j < cns.length - 1; j++) {
                         d = d[cns[j]];
                     }
                     if (cns[cns.length - 1] in d) {
                         if (d[cns[cns.length - 1]].toString() === value) {
                             return true;
                         }
                         else {
                             return false;
                         }
                     }
                 }
                 catch (err) {
                 }
             }
             return false;
         };
         return res;
     }
     // new to_html for exports
     function to_html(template, data){
         addFns(template, data);
         return Mustache.to_html.apply(this, arguments);
     }

看起来这样做的好处是保持了Mustache的配对风格,并且继续无缝支持原生的嵌套以及否定等语法.
但看起来模板挺丑的,性能损耗也一定是有不少的.

后续的扩展,我想elseif肯定不能支持了,if中带"与""或"判断倒是还方便添加的.
当然还可以做很多扩展,比如给数组增加一些内置属性如"_index_", "_first_", "_last_", "_odd_", "_even_".

Mustache仍然足够简单,它本身就具有循环和否定判断等特性,增加了IF后,稍微加了点逻辑,但能少写很多Renderer.

重要的是我们依然保有我们所看重的东西:体积小,无依赖,前后兼容.
在我的项目里破坏了Logic-less是我的事情并不接受批判,但请大家根据自己实际情况谨慎选择.

刚刚接触Mustache,各种特性还在学习摸索中,现在看起来Lambda和子模板等特性,让Mustache的JS实现小巧却功能强大.

或许今天的需求还有更好的解决方案,如果有同学知道还望不吝赐教.