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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, ''').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}();

laytpl v1.1 独立版本 js模板渲染引擎相关推荐

html模板渲染引擎有什么作用
你定义好一个模板.最简单的例子,例如<html> <div>{$what}</div> </html> 这只是一个模板.{$what}是数据.此时不知道 ...
nunjucks.js模板渲染
直接用 script 引入文件: <script src="nunjucks.js"></script> 是使用 render 来直接渲染文件,这种方式支持 ...
template.js模板渲染
1.template.js template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板. <script id="tpl" ...
Word 模板渲染引擎-Poi-tl - 标签(二)
在文档的任何地方做任何事情(Do Anything Anywhere)是poi-tl的星辰大海. 上一节我们对 Poi-tl 进行了简单的介绍以及实现了我们永恒的 HelloWorld, 同时对 po ...
对于模板渲染的页面，如何针对渲染出来的对象添加事件
我们在javaweb编程中往往从数据库中将数据取出来,使用模板渲染到页面上,渲染的数据上我们又希望可以产生不同的响应对于这样的问题,我们应该怎样实现场景的描述: <ul class=" ...
Django的模板渲染(render)机制
2019独角兽企业重金招聘Python工程师标准>>> 一旦你创建一个 Template 对象,你可以用 context 来传递数据给它. 一个context 是一系列变量和它们值的 ...
超详解析Flutter渲染引擎|业务想创新，不了解底层原理怎么行？
简介:Flutter 作为一个跨平台的应用框架,诞生之后,就被高度关注.它通过自绘 UI ,解决了之前 RN 和 weex 方案难以解决的多端一致性问题.Dart AOT 和精减的渲染管线,相对与 J ...
js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
使用arttemplate js模板引擎，直接用模板渲染，减少字符串拼接。
html: <div class="box"></div><script id="t1" type="text/html ...

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

laytpl v1.1 独立版本 js模板渲染引擎相关推荐

最新文章

热门文章