laytpl v1.1 独立版本 js模板渲染引擎

案例一：

数据

var data = {
  title: '前端圈',
  intro: '一群码js的骚年，幻想改变世界，却被世界改变。',
  list: [{name: '贤心', city: '杭州'},  {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};

模板

<h3>{{ d.title }}</h3>
<p class="intro">{{ d.intro }}</p>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
  <li>
    <span>{{ d.list[i].name }}</span>
    <span>所在城市：{{ d.list[i].city }}</span>
  </li>
{{# } }}
</ul>

效果

案例二：

//第一步：编写模版。你可以使用一个script标签存放模板，如：
<script id="demo" type="text/html">
<h1>{{ d.title }}</h1>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
  <li>
    <span>姓名：{{ d.list[i].name }}</span>
    <span>城市：{{ d.list[i].city }}</span>
  </li>
{{# } }}
</ul>
</script>

//第二步：建立视图。用于呈现渲染结果。
<div id="view"></div>

//第三步：渲染模版
var data = {
  title: '前端攻城师',
  list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]
};
var gettpl = document.getElementById('demo').innerHTML;
laytpl(gettpl).render(data, function(html){
  document.getElementById('view').innerHTML = html;
});

简单的文档：

 一、模版语法
输出一个普通字段，不转义html：   {{ d.field }}
输出一个普通字段，并转义html：   {{= d.field }}
JavaScript脚本： {{# JavaScript statement }}

二、内置方法
1)：laytpl(template);   //核心函数，返回一个对象
  
  var tpl = laytpl(template);
  tpl.render(data, callback);   //渲染方法，返回渲染结果，支持异步和同步两种模式
    a)：异步
    tpl.render(data, function(result){
      console.log(result);
    });
    
    b)：同步
    var result = tpl.render(data);
    console.log(result);

  
2)：laytpl.config(options); //初始化配置
  options是一个对象
  {open: '开始标签', close: '闭合标签'}
  
3)：laytpl.v  //获取版本号

laytpl.js

/**
 @Name : laytpl v1.2 
 @Site : https://github.com/sentsin/laytpl
 @License : MIT
*/

;!function(){
"use strict";

var config = {
  open: '{{',
  close: '}}'
};

var tool = {
  exp: function(str){
    return new RegExp(str, 'g');
  },
  //匹配满足规则内容
  query: function(type, _, __){
    var types = [
      '#([\\s\\S])+?',   //js语句
      '([^{#}])*?' //普通字段
    ][type || 0];
    return exp((_||'') + config.open + types + config.close + (__||''));
  },   
  escape: function(html){
    return String(html||'').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
    .replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;');
  },
  error: function(e, tplog){
    var error = 'Laytpl Error：';
    typeof console === 'object' && console.error(error + e + '\n'+ (tplog || ''));
    return error + e;
  }
};

var exp = tool.exp, Tpl = function(tpl){
  this.tpl = tpl;
};

Tpl.pt = Tpl.prototype;

window.errors = 0;

//编译模版
Tpl.pt.parse = function(tpl, data){
  var that = this, tplog = tpl;
  var jss = exp('^'+config.open+'#', ''), jsse = exp(config.close+'$', '');
  
  tpl = tpl.replace(/\s+|\r|\t|\n/g, ' ').replace(exp(config.open+'#'), config.open+'# ')
  
  .replace(exp(config.close+'}'), '} '+config.close).replace(/\\/g, '\\\\')
  
  .replace(/(?="|')/g, '\\').replace(tool.query(), function(str){
    str = str.replace(jss, '').replace(jsse, '');
    return '";' + str.replace(/\\/g, '') + ';view+="';
  })
  
  .replace(tool.query(1), function(str){
    var start = '"+(';
    if(str.replace(/\s/g, '') === config.open+config.close){
      return '';
    }
    str = str.replace(exp(config.open+'|'+config.close), '');
    if(/^=/.test(str)){
      str = str.replace(/^=/, '');
      start = '"+_escape_(';
    }
    return start + str.replace(/\\/g, '') + ')+"';
  });
  
  tpl = '"use strict";var view = "' + tpl + '";return view;';
  //console.log(tpl);
  
  try{
    that.cache = tpl = new Function('d, _escape_', tpl);
    return tpl(data, tool.escape);
  } catch(e){
    delete that.cache;
    return tool.error(e, tplog);
  }
};

Tpl.pt.render = function(data, callback){
  var that = this, tpl;
  if(!data) return tool.error('no data');
  tpl = that.cache ? that.cache(data, tool.escape) : that.parse(that.tpl, data);
  console.log()
  if(!callback) return tpl;
  callback(tpl);
};

var laytpl = function(tpl){
  if(typeof tpl !== 'string') return tool.error('Template not found');
  return new Tpl(tpl);
};

laytpl.config = function(options){
  options = options || {};
  for(var i in options){
    config[i] = options[i];
  }
};

laytpl.v = '1.2';

"function" == typeof define ? define(function() {
  return laytpl
}) : "undefined" != typeof exports ? module.exports = laytpl : window.laytpl = laytpl

}();