首页 > 代码库 > js模板引擎原理,附自己写的简洁模板引擎
js模板引擎原理,附自己写的简洁模板引擎
js处理DOM交互非常普遍,但DOM结构单纯用js字符串拼接简直难以维护,不方便理解和扩展。
下面展现了js模板引擎的实现原理:
- html中的模板
<script id="mytpl"> <div> 我的名字是:$name$ <br/> 今年$age$了! </div> </script>
因为script不会被浏览器解析和渲染,最大限度节省了浏览器资源,textarea标签同样可以达到效果。Template标签就是这样的目的,只是支持不够良好。
- js模板引擎
String.prototype.simpleTemplate = function(data){ var html = ‘‘; if(Array.isArray(data)){ var self = this; data.forEach(function(item){ var pattern, str = self; Object.keys(item).forEach(function(key){ pattern = new RegExp(‘\\$‘+key+‘\\$‘, ‘g‘); str = str.replace(pattern, item[key]); }); html += str; }); } return html; }
为String对象增加引擎方法,这里可以支持变量替换和模板循环生成。
基于这样的思想,可以很方便地扩展成模板内部循环,只要在simpleTemplate内部判断item是否数组类型,将标记的循环部分递归调用simpleTmplate(item)即可。
- 这样使用
var htmlTemplate = $(‘textarea‘).val(); var data =http://www.mamicode.com/[ { name: ‘小明‘, age: 21, }, { name: ‘小红‘, age: 20 } ] $(‘body‘).append($(htmlTemplate.simpleTemplate(data)));
- 支持js语法的原理
如果想使模板支持所有的js语法,需要从头换一种思路。
基本思想是字符串模板在遇到js代码(包括变量)时打散,再拼接时就自动执行了js语法。如template
<p>性别: if(v){ 男 }else { 女 } </p>
会转换成类似这样:
var html = ‘<p>性别:’ ; if(a){html.push(‘男‘);}else{html.push(‘女‘)}
开源第三方js模板引擎
早期的Mustache、Hanldebars,流行过的Jade、EJS,easyTemplate等。
当然还有bat各家的:
腾讯的artTemplate 性能优
阿里的jucer 性能优
百度的baiduTemplate
js模板引擎原理,附自己写的简洁模板引擎
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。