非常简单,性能估计一般,方法最原始。

//第一代模板引擎
//只支持{{key}}的替换,不支持语句
//支持Object和Array对象
function template_setdata(template, data) {
try {
if (!!data && '[object Array]' == Object.prototype.toString.call(data)) {//数组
var out = '';
for (var obj in data) {
var tempout = template;
for (var key in data[obj]) {
tempout = tempout.replace(/\{\{(\S+)\}\}/g,
function (m, i, j) {
return (data[obj])[i];
});
}
out += tempout;
}
return out;
}
else if(!!data && '[object Object]' == Object.prototype.toString.call(data)){//对象
for (var key in data) {
template = template.replace(/\{\{(\S+)\}\}/g,
function (m, i, j) {
return data[i];
});
}
return template;
}
else{//不做处理
return template;
}
} catch (e) {
console.log(e);
return template;
}
}
//使用方法:
/*
html页面的模板:
<script type="text/template" id="template_info_content">
<section class="m_article m_list_item m_list_article clearfix">
<a href="{{url}}">
<div class="m_article_img">
<img src="{{img}}" onerror="$(this).attr('src',$ViewBag.ThemeContent+'img/article/article_img1.jpg');">
</div>
<div class="m_article_info">
<div class="m_article_title">
<span>{{title}}</span>
</div>
<div class="m_article_desc clearfix">
<div class="m_article_desc_l">
<span class="m_article_channel">{{classname}}</span>
<span class="m_article_time">{{time}}</span>
</div>
<div class="m_article_desc_r">
<div class="left_hands_desc">
<span class="read_icon"></span>{{pv}}
</div>
</div>
</div>
</div>
</a>
</section>
</script>
替换语句:
var setdata = {
img: '图片',
url: '地址',
title: '标题',
classname: '类别名',
time: '时间',
pv: '点击数'
};
var outhtml = template_setdata($('#template_info_content').html(),setdata);
console.log('单对象'+outhtml);
var setdatas =[{
img: '图片1',
url: '地址1',
title: '标题1',
classname: '类别名1',
time: '时间1',
pv: '点击数1'
},{
img: '图片2',
url: '地址2',
title: '标题2',
classname: '类别名2',
time: '时间2',
pv: '点击数2'
}];
var outhtml2 = template_setdata($('#template_info_content').html(),setdatas);
console.log('数组'+outhtml2);

第二代模板引擎,支持语法

参考:

http://ejohn.org/blog/javascript-micro-templating/

http://www.cnblogs.com/dolphinX/p/3489269.html

实现如下:

//第二代模板引擎
//支持语句,不支持key的替换,全部采用对象进行赋值
function template2_setdata(template, data) {
var html=template;
/*
<#=xxx#> => ');p.push(xxx);p.push('
<# => ');
#> => p.push('
* */
var result="var p=[];with(obj){ p.push('"
+html.replace(/[\r\n\t]/g," ")//换行去掉
.replace(/<#=(.*?)#>/g,"');p.push($1);p.push('")//<#=xxx#> => ');p.push(xxx);p.push('
.replace(/<#/g,"');")//<# => ');
.replace(/#>/g,"p.push('")//#> => p.push('
+" ');}return p.join('');";
var func = new Function('obj',result);
return func(setdatas);
}
/*
使用方法:
html页面模板:
<script type="text/template" id="template2_info_content">
<ul>
<# for ( var i = 0; i < setdatas.length; i++ ) { #>
<li><a href="<#=setdatas[i].url#>"><#=setdatas[i].title#></a></li>
<# } #>
</ul>
</script>
替换语句:
var setdatas =[{
img: '图片1',
url: '地址1',
title: '标题1',
classname: '类别名1',
time: '时间1',
pv: '点击数1'
},{
img: '图片2',
url: '地址2',
title: '标题2',
classname: '类别名2',
time: '时间2',
pv: '点击数2'
}];
var outhtml3 = template2_setdata($('#template2_info_content').html(),setdatas);
console.log(outhtml3);
* */

源码:https://github.com/easonjim/JavascriptTemplateEngine

bug提交:https://github.com/easonjim/JavascriptTemplateEngine/issues

Javascript最简单的模板引擎的更多相关文章

  1. Javascript:自己写模板引擎

    背景 因为JS没有提供“字符串插入”和“多行字符串”特性,传统的拼凑字符串容易出错.性能不高和不容易理解代码,为了应对这些问题,很多个人和团队开发了模板引擎,现在主流的JS框架几乎都提供此类功能了. ...

  2. 自定义简单的模板引擎-JS模板引擎

    http://www.cnblogs.com/52fhy/p/5393673.html

  3. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  4. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  5. 10 个强大的JavaScript / jQuery 模板引擎推荐

    模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易. 本文 ...

  6. JavaScript模板引擎实例应用(转)

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  7. Javascript模板引擎插件收集

    为什么要用JS的模板引擎,打个比方,如果你要通过接口绑定数据,最终要加进去DOM中,我们普遍的做法就是不断的+,最终append进去,但是这样的做法就是后续人员压根就没法维护.所以这时模板引擎出来了. ...

  8. php实现简单视图模板(视图引擎)

    视图 视图,你所看见的部分. <?php echo 'hello, world'; 从简单开始理解 这就是个视图文件中的代码,没错就这么简单.视图,实际上是在 MVC 这种架构上提出的.MVC ...

  9. Node.js模板引擎的深入探讨

    每次当我想用 node.js 来写一个 web 相关项目的时候.我总是会陷入无比的纠结.原因是 JavaScript 生态圈里的模板引擎实在太多了,但那么多却实在找不出一个接近完美的,所谓完美的概念就 ...

随机推荐

  1. springmvc+spring+mybatis+maven项目集成shiro进行用户权限控制【转】

    项目结构:   1.maven项目的pom中引入shiro所需的jar包依赖关系 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  2. VBA常用代码解析

    031 删除工作表中的空行 如果需要删除工作表中所有的空行,可以使用下面的代码. Sub DelBlankRow() DimrRow As Long DimLRow As Long Dimi As L ...

  3. centos直接yum安装nginx

    Ubuntu下安装nginx,直接apt-get install nginx就行了,很方便. 但是今天装了CentOS6.2,直接yum install nginx不行,要先处理下源,下面是安装完整流 ...

  4. React Native class 后面的命名首字母需要大写

    React Native class 后面的命名首字母需要大写 否则会报Expeted a component class,got [object Object].

  5. UI-切圆角、透明度、取消按钮点击高亮效果、按钮文字带下划线

    一.切UIView的某个角为圆角 如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某 ...

  6. Appfuse:记录操作日志

    appfuse的数据维护操作都发生在***form页面,与之对应的是***FormController,在Controller中处理数据的操作是onSubmit方法,既然所有的操作都通过onSubmi ...

  7. SQL 数据优化之不建立索引的情况

    索引可以提高数据的检索效率,也可以降低数据库的IO成本,并且索引还可以降低数据库的排序成本.排序分组操作主要消耗的就是CPU资源和内存,所以能够在排序分组操作中好好的利用索引将会极大地降低CPU资源的 ...

  8. ubuntu kylin 14.04安装Node.js和Famous

    默认使用软件中心安装node.js,然后参考https://famo.us/install进行安装 1.sudo apt-get install git 2.npm install -g yo gru ...

  9. 字符串编辑距离(Levenshtein距离)算法

    基本介绍 Levenshtein距离是一种计算两个字符串间的差异程度的字符串度量(string metric).我们可以认为Levenshtein距离就是从一个字符串修改到另一个字符串时,其中编辑单个 ...

  10. http status 301/302 & java重定向/转发

    一.301/3021.什么是301转向?什么是301重定向? 301转向(或叫301重定向,301跳转)是当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP数据流中头信息(header) ...