micro-Templating源码解析

formatJson是legos开发模式下很常用的js模板引擎。它其实是jQuery的创始人John Resig 2008年写的Micro-Templating。虽然代码有些旧了，但是其中的思想还是值得借鉴的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
define("formatJson", function(require, exports, module) {
  var _formatJson_cache = {};

  $formatJson = function(str, data) {
    /* 模板替换,str:模板id或者内容，data:数据内容
			\W：匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。
			如果是id,并且cache中有值，直接返回，否则获取innerHTML，再次解析；
			如果不是id，解析并存入cache
		 */
    var fn = !/\W/.test(str)
      ? (_formatJson_cache[str] =
          _formatJson_cache[str] ||
          $formatJson(document.getElementById(str).innerHTML))
      : new Function(
          "obj",
          "var p=[],print=function(){p.push.apply(p,arguments);};" +
            "with(obj){p.push('" +
            str
              .replace(/[\r\t\n]/g, " ")
              .split("<%")
              .join("\t")
              .replace(/((^|%>)[^\t]*)'/g, "$1\r")
              .replace(/\t=(.*?)%>/g, "',$1,'")
              .split("\t")
              .join("');")
              .split("%>")
              .join("p.push('")
              .split("\r")
              .join("\\'") +
            "');}return p.join('');"
        );
    return data ? fn(data) : fn;
  };

  exports.render = $formatJson;
});

稍稍整理下，将字符替换部分提出来·

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
define("formatJson", function(require, exports, module) {
  var _formatJson_cache = {};

  $formatJson = function(str, data) {
    // \W	匹配非字母、数字、下划线。等价于 '[^A-Za-z0-9_]'。
    var fn = !/\W/.test(str)
      ? // 只有模板才有非字母数字字符，用来判断传入的是模板id还是模板字符串，
        // 如果是id的话，判断是否有缓存，没有缓存的话调用$formatJson
        // 如果是模板的话，就调用new Function()解析编译
        (_formatJson_cache[str] =
          _formatJson_cache[str] ||
          $formatJson(document.getElementById(str).innerHTML))
      : new Function(
          "obj", // 解析成html
          "var p=[],print=function(){p.push.apply(p,arguments);};" +
            // 使用with将数据作为局部变量引入
            "with(obj){p.push('" +
            getStr(str) +
            "');}return p.join('');"
        );
    return data ? fn(data) : fn;
  };

  // 将模板转换为纯JavaScript
  function getStr(str) {
    // 1.删除回车，制表，换行
    str = str.replace(/[\r\t\n]/g, " ");

    // 2.替换 <% 为 \t制表符，两种情况（赋值和js代码）
    // 赋值： 例如 <div id="<%=id%>">  ==>  <div id="\t=id%>">
    // js代码：例如 <% for ( var i = 0; i < items.length; i++ ) { %>  ==>  \t for ( var i = 0; i < items.length; i++ ) { %>
    str = str.split("<%").join("\t");

    // 3.替换'为\r ，最后一步会重新替换回来
    // 节点属性操作赋值使用单引号，如果不替换 ,''>' 是会报错的
    // <div style='background:<%=color%>'><%=id%></div>   ==> p.push(' <div style='background:',color,''>',id,'</div>        ');
    str = str.replace(/((^|%>)[^\t]*)'/g, "$1\r");

    // 4.赋值解析：赋值后部分，拆分为三项，结合with，id就会成为实际的值，然后一直被push  <div id="\t=id%>"> ==>    <div id=" ,id, ">
    // 这里会消费掉 <%=xxx%>，
    // 那么剩下的 %>必然是js语句结尾的, \t必然是js语句的开头
    str = str.replace(/\t=(.*?)%>/g, "',$1,'");

    // 5.js语句开始符号替换： 经过上一步后，还剩余的\t，是js语句的，这里就用 ');来结束 ，js语句会单开p.push,
    str = str.split("\t").join("');");

    // 6.js语句结尾符号替换： %> 替换为 p.push, 这里把js语句内生成的字符串或者变量再push一次
    str = str.split("%>").join("p.push('");

    // 7.替换回车为\' ， 恢复str.replace(/((^|%>)[^\t]*)'/g, "$1\r") 去掉的'
    str = str.split("\r").join("\\'");

    return str;
  }

  exports.render = $formatJson;
});

模板的语法很简单，有三条基本规则

1.用正常的方式书写html

2.用<% %>嵌套JavaScript语句

3.用<%= %>嵌套JavaScript 变量值

应用举例：

1
2
3
4
5
6
7
8
// tpl模板
<% for ( var i = 0; i < items.length; i++ ) { %>
        <% if( i%2 == 0) {%>
            <li><%=items[i].id%>:<%=items[i].name%></li>
        <% } %>
    <% } %>
    <% print('数组长度' + items.length ); %>
    <div style='background:<%=color%>'><%=id%></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// data数据

let data={
  id: '158015777',
  i: 10,
  profile_image_url: '',
  from_user: 'Tom cCom',
  text: '啊哈哈',
  color: 'red',
  items: [
    {
      id: 1,
      name: 'Order1'
    }, {
      id: 2,
      name: 'Order2'
    },
    {
      id: 3,
      name: 'Order2'
    }
  ]
}
1
2
3
// 通过模板和data解析的html

<li>1:Order1</li>                                                                                    <li>3:Order2</li>                                数组长度3         <div style="background:red">158015777</div>
1
2
3
4
5
6
7
8
9
// 经过 getStr 处理后

'); for ( var i = 0; i < items.length; i++ ) { p.push('
        '); if( i%2 == 0) {p.push('
            <li>',items[i].id,':',items[i].name,'</li>
        '); } p.push('
    '); } p.push('
    '); print('数组长度' + items.length ); p.push('
    <div style=\'background:',color,'\'>',id,'</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*加上头尾
 "var p=[],print=function(){p.push.apply(p,arguments);};" +
            // 使用with将数据作为局部变量引入
            "with(obj){p.push('" +
            getStr(str) +
            "');}return p.join('');"
*/

var p = [],
  print = function() {
      // arguments 是一个对应于传递给函数的参数的类数组对象。
    p.push.apply(p, arguments);
  };
with (obj) {
  p.push("");
  for (var i = 0; i < items.length; i++) {
    p.push("");
    if (i % 2 == 0) {
      p.push("<li>", items[i].id, ":", items[i].name, "</li>");
    }
    p.push("");
  }
  p.push("");
  print("数组长度" + items.length);
  p.push("<div style='background:", color, "'>", id, "</div>");
}
return p.join("");

步骤分解解释：

第一步: replace(/[\r\t\n]/g, “ “)
去掉回车，换行，制表

1
2
3
4
5
6
7
<% for ( var i = 0; i < items.length; i++ ) { %>                 
    <% if( i%2 == 0) {%>                 
        <li><%=items[i].id%>:<%=items[i].name%></li>             
    <% } %>          
<% } %>         
<% print('数组长度' + items.length ); %>         
<div style='background:<%=color%>'><%=id%></div>

第二步: split(“<%”).join(“\t”)
<%替换为\t

1
2
3
4
5
6
7
\t for ( var i = 0; i < items.length; i++ ) { %>                 
    \t if( i%2 == 0) {%>                 
        <li>\t=items[i].id%>:\t=items[i].name%></li>             
    \t } %>          
\t } %>         
\t print('数组长度' + items.length ); %>         
<div style='background:\t=color%>'>\t=id%></div>

第三步: replace(/((^|%>)[^\t]*)’/g, “$1\r”)
替换需要保留的’为\r, 主要是节点属性操作

1
2
3
4
5
6
7
\t for ( var i = 0; i < items.length; i++ ) { %>                 
    \t if( i%2 == 0) {%>                 
        <li>\t=items[i].id%>:\t=items[i].name%></li>             
    \t } %>          
\t } %>         
\t print('数组长度' + items.length ); %>         
<div style=\rbackground:\t=color%>\r>\t=id%></div>

第四步: replace(/\t=(.*?)%>/g, “‘,$1,’”)
赋值部分替换，’,$1,’,实际是把赋值部分独立出来，那么push到这里的时候，就会进行运算

1
2
3
4
5
6
7
\t for ( var i = 0; i < items.length; i++ ) { %>                 
    \t if( i%2 == 0) {%>                 
    <li>',items[i].id,':',items[i].name,'</li>             
    \t } %>          
\t } %>         
\t print('数组长度' + items.length ); %>         
<div style=\rbackground:',color,'\r>',id,'</div>

第五步: split(“\t”).join(“‘);”)
剩下的\t，代表了js语句开始部分， js语句\t替换为’); ，正是push的结束部分，正好完成push语句

1
2
3
4
5
6
7
'); for ( var i = 0; i < items.length; i++ ) { %>                 
    '); if( i%2 == 0) {%>                 
        <li>',items[i].id,':',items[i].name,'</li>              
    ');} %>          
'); } %>         
'); print('数组长度' + items.length ); %>         
<div style=\rbackground:',color,'\r>',id,'</div>

第六步: split(“%>”).join(“p.push(‘“);
剩下的%>体表了js语句的结束，替换为p.push(‘“，开启新的环节

1
2
3
4
5
6
7
'); for ( var i = 0; i < items.length; i++ ) { p.push('                 
    '); if( i%2 == 0) {p.push('                 
        <li>',items[i].id,':',items[i].name,'</li>             
    '); } p.push('          
'); } p.push('         
'); print('数组长度' + items.length ); p.push('         
<div style=\rbackground:',color,'\r>',id,'</div>

第七部： split(“\r”).join(“\’”)
替换\r为’ ， 恢复str.replace(/((^|%>)[^\t]*)’/g, “$1\r”) 去掉的’

1
2
3
4
5
6
7
'); for ( var i = 0; i < items.length; i++ ) { p.push('
    '); if( i%2 == 0) {p.push('                 
        <li>',items[i].id,':',items[i].name,'</li>             
    '); } p.push('          
'); } p.push('         
'); print('数组长度' + items.length ); p.push('         
<div style=\'background:',color,'\'>',id,'</div>

加上头尾

1
2
3
4
5
6
7
8
9
var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('
'); for ( var i = 0; i < items.length; i++ ) { p.push('
    '); if( i%2 == 0) {p.push('                 
        <li>',items[i].id,':',items[i].name,'</li>             
    '); } p.push('          
'); } p.push('         
'); print('数组长度' + items.length ); p.push('         
<div style=\'background:',color,'\'>',id,'</div>  
');}return p.join('');

最后格式化一下

1
2
3
4
5
6
7
8
9
10
11
var p = [], print = function () { p.push.apply(p, arguments); }; with (obj) {
    p.push('    '); for (var i = 0; i < items.length; i++) {
        p.push('        '); if (i % 2 == 0) {
            p.push('            < li > ', items[i].id, ': ', items[i].name, '</li >            ');
        }
        p.push('      ');
    }
    p.push('      ');
    print('数组长度' + items.length); p.push('                    < div style =\'background:', color, '\'>', id, '</div>      ');
}
return p.join('');

参考资料：

Micro Templating例子
https://codepen.io/xiangwenhu/pen/dJdGBj/

Micro Templating源码分析
https://www.cnblogs.com/cloud-/p/8253123.html

最简单的JavaScript模板引擎
https://www.cnblogs.com/dolphinX/p/3489269.html

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码


tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

啦啦啦～<br><br>我是一枚前端程序媛😄～<br>谢谢大家光临我的小乐园～