自己写的一个轻量级json 转 html的前端工具，因为前端代码也不存在什么加密，索性就公开了，有缘者得之，但希望不要去掉版权信息。。

/***********************************************************
  json to html
  Author: treemonster <https://treemonster.github.io/>
  Latest: 2015-12-05
***********************************************************/
void function(){
  var json2html=function(notInherit){
    var notInherit=notInherit||false; // 如果当前节点没有该属性是否继承父节点的属性
    var if_unset=function(o,k,r){
      for(var i=r.length;i--;){
        if(r[i].hasOwnProperty(k))
          return r[i][k];
        if(notInherit)break;
      }
      return '';
    };
    var render=function(tpl,data,raw){
      var tmp='';
      tpl=tpl||'';
      raw=raw||[];
      if(data&&data.constructor!==Array)data=[data];
      if(!data.length)data=[{'':null}];
      for(var i=0;i<data.length;i++){
        var o=data[i];
        raw.push(o);
        tmp+=tpl.replace(
        /\{\{\#(.+?)\}\}([\s\S]*?)\{\{\/\1\}\}|\{\{(?:([^\.]+?)|(\.))\}\}|([\s\S]+?)(?=\{\{)/g,
        function(){
          var a=arguments;
          if(a[1])return if_unset(o,a[1],raw)?
            render(a[2],if_unset(o,a[1],raw),raw):'';
          if(a[3])return if_unset(o,a[3],raw);
          if(a[4])return o;
          if(a[5])return a[5];
        });
        raw.pop();
      }
      return tmp;
    }
    this.render=render;
  };

  var _global;
  switch(true){
    case typeof window!=='undefined': _global=window; break;
    case typeof global!=='undefined': _global=global; break;
    default: throw new Error('Unknown javascript environment');
  }_global.json2html=json2html;

  if(typeof define!=='undefined' && define.amd)
    define('json2html',function(){return json2html;});
  if(typeof module==='object' && !!module.exports)
    module.exports=json2html;

}();

然后调用的简单例子

<script id='tpl'>
Demo:

String: {{str}}

List: {{#list}}{{.}}{{/list}}

Object: {{#obj}} name={{name}} ; color={{color}} {{/obj}}

Object_Array: {{#obj_array}} {{text}} {{/obj_array}}

</script>

<script>
var j=new json2html;
console.log(j.render(tpl.innerHTML,{

  str: 'this is a string',
  list: [4,5,6,7],
  obj: { name: 'apple', color:'red' },
  obj_array: [ {text: 'A' },{text: 'B'},{text: 'C'} ]

}));
</script>

运行结果：

Demo:

String: this is a string

List: 4567

Object: name=apple ; color=red

Object_Array: A B C

我的原则一贯是简约至上。因此这个插件的功能非常少，只提供四种基础语法，但已经可以满足大部分的前端需求。

相关文档

暂无

随便看看

1. windows电脑防止自动休眠

2. 安卓文字偏上，文字顶部被遮罩

3. css3 文字渐变色

4. nginx用域名来转发请求

5. heroku登陆cli

6. npm设置仓库地址和代理

7. webrtc服务搭建

8. webrtc泄漏本地ip信息

9. 树莓派配置wifi热点

10. webpack使用外部资源

11. centos查看最近一次的开机时间

12. 猴子选大王算法问题

13. centos7 开放或者关闭端口

14. 随机取某个概率区间的代码

15. bootstrap modal弹框导致ie无法获取焦点

16. 数据库清理优化