简单实用的js模板引擎
转自：微点阅读 https://www.weidianyuedu.com
不足50行的js模板引擎，支持各种js语法：
<script id="test_list" type="text/html"><%= for(var i = 0, l = p.list.length; i < l; i++){ var stu = p.list[i];=%> <tr> <td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td> <td><%==stu.age=%></td> <td><%==(stu.address || "")=%></td> <tr> <%= }=%></script>
“<%= xxx =%>”内是js逻辑代码，“<%== xxx =%>”内是直接输出的变量，类似php的echo的作用。“p”是调用下面build方法时的k-v对象参数，也可以在调用“new JTemp”时设置成别的参数名
调用：
$(function(){ var temp = new JTemp("test_list"), html = temp.build( {list:[ {name:"张三", age:13, address:"北京"}, {name:"李四", age:17, address:"天津"}, {name:"王五", age:13} ]}); $("table").html(html);});
上面的temp生成以后，可以多次调用build方法，生成html
一下是模板引擎的代码：
var JTemp = function(){ function Temp(htmlId, p){ p = p || {};//配置信息，大部分情况可以缺省 this.htmlId = htmlId; this.fun; this.oName = p.oName || "p"; this.TEMP_S = p.tempS || "<%="; this.TEMP_E = p.tempE || "=%>"; this.getFun(); } Temp.prototype = { getFun : function(){ var _ = this, str = $("#" + _.htmlId).html(); if(!str) _.err("error: no temp!!"); var str_ = "var " + _.oName + "=this,f=\"\";", s = str.indexOf(_.TEMP_S), e = -1, p, sl = _.TEMP_S.length, el = _.TEMP_E.length; for(;s >= 0;){ e = str.indexOf(_.TEMP_E); if(e < s) alert(":( ERROR!!"); str_ += "f+=\"" + str.substring(0, s) + "\";"; p = _.trim(str.substring(s+sl, e)); if(p.indexOf("=") !== 0){//js语句 str_ += p; }else{//普通语句 str_ += "f+=" + p.substring(1) + ";"; } str = str.substring(e + el); s = str.indexOf(_.TEMP_S); } str_ += "f+=\"" + str + "\";"; str_ = str_.replace(/\n/g, "");//处理换行 var fs = str_ + "return f;"; this.fun = Function(fs); }, build : function(p){ return this.fun.call(p); }, err : function(s){ alert(s); }, trim : function(s){ return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,""); } }; return Temp;}();
核心是将模板代码转变成了一个拼接字符串的function，每次拿数据call这个function。
因为主要是给手机（webkit）用的，所以没有考虑字符串拼接的效率问题，如果需要给IE实用，最好将字符串拼接方法改为Array.push()的形式
简单实用的js模板引擎相关推荐
- js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
- JS模板引擎sychelTemplate
sychelTemplate 简介 0.sychelTemplate希望创造一个用户觉得"简单好用"的JS模板引擎 注:等不及可以直接点左侧导航中的"C.使用举例&quo ...
- js模板引擎渐进--后记
至此,算是完成了一个系列了. 本来是想写的更详细的,但是太详细每次说的东西就少的可怜. 在学习的过程中,每次的改进改动博主都是复制一个新的文件进行,整个有二十多篇,中间有很多小细节的东西,集中在 ea ...
- js模板引擎渐进--if/else（7）
有了 each 的经验后,要实现 if/else 这种指令就简单了-------在 case '}' 处对 varcode 进行指令的判断即可. 模板代码: {if data.value==1}&l ...
- 简单的html渲染模板引擎
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
- js模板引擎 之handlebars.js
最近在接触郑州知识库,里面使用到的技术是值得自己学习的. 该项目前端使用的是handlebars.js模板引擎框架.模板引擎框架用于数据与结构分离的思想,实现页面动态分离的效果. 1.为什么使用模板引 ...
- 解决laytpl.js模板引擎插件加载模板后无法获取模板中的元素id等内容
一.问题描述 在页面中使用laytpl.js模板引擎,在页面加载后无法使用jquery获取模板中的html元素,以下是图片和代码: 在添加或修改完毕后重新加载页面,不能使用jquery获取模板中的ht ...
- js模板引擎Nunjucks
js模板引擎Nunjucks Nunjucks中文文档
- cp 过程流程图模板_程序流程图有什么用？简单实用的流程图模板大全
原标题:程序流程图有什么用?简单实用的流程图模板大全 程序流程图是什么呢?程序流程图就是用规定的符号描述一个程序中所需的各种操作或者判断的图表.程序流程图的设计是在处理流程图的基础上,通过对数据的整理 ...
最新文章
- SQL Server 2008之WaitFor
- c# 逆转数组元素的排序
- 【OkHttp】OkHttp 源码分析 ( OkHttpClient.Builder 构造器源码分析 )
- MySQL的原理以及流程_MySQL的复制原理以及流程?
- linux indent格式化代码
- C语言代码注释必须用/**/ , 你没看错~
- MySQL安装错误: unknown option '--skip-federated'
- php 跳转到另外一个php,PHP: 其他变更 - Manual
- mybatis plus 批量更新数据_Mybatis 多字段组合唯一 并批量添加不重复数据
- C# 获取二维数组的元素个数；获取行数，列数
- 藏文印刷体： 乌金体，又称有头体
- 本地可以ping远程的服务器，但服务器不能ping本地
- 关于Word文档忘记保护密码的强制解除办法
- c语言 虚拟时钟 指针,指针式模拟时钟.doc
- Unity通用计时器
- VLAN 主干道配置
- AlexNet网络结构详解与代码复现
- 海量文本中挖掘人物关联关系核心技术介绍-桂洪冠
- 计算机一级重点复习提纲,计算机一级B考试复习提纲是什么？
- 返利机器人分享话术_返利机器人裂变话术
热门文章
- Spring常用注解，注解 IOC ,AOP，MVC 的理解
- opendrive数据格式解析思维导图 ， opendrive高精地图是自动驾驶领域使用最为广泛的开源高精地图标准级地图格式
- 图片转 base64，压缩图片体积
- DevTools failed to load SourceMap: Could not load content for... 如何关闭这个控制台警告？
- 前端每周清单第 36 期：深入 Vue 2.5 类型增强、Puppeteer 端到端测试、PayPal 跨域套装...
- Bugku 图片里的中文【MISC】
- matlab求积分（超详细，含int integral integral2/3 quad trapz）
- 用Javascript编写魔方程序
- 求三个数最大公约数算法
- linux编程（LCD图像）