JS模板引擎sychelTemplate
2016-09-08 12:04
288 查看
sychelTemplate 简介
0、sychelTemplate希望创造一个用户觉得“简单好用”的JS模板引擎注:等不及可以直接点左侧导航中的”C、使用举例“,demo即刻试用。
1、应用场景:
前端使用的模板系统 或 后端Javascript环境发布页面
2、功能概述:
提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,
生成对应数据产生的HTML片段,渲染不同的效果。
3、特性:
1、语法简单,学习成本极低,开发效率提升很大,性价比较高(使用Javascript原生语法);
2、默认HTML转义(防XSS攻击),并且支持包括URL转义等多种转义;
3、变量未定义自动输出为空,防止页面错乱;
4、功能强大,如分隔符可自定等多种功能;
使用举例
//直接复制即可使用,记得要下载sychelTemplate.js //index.html <!doctype html> <html> <head> <meta charset="utf-8"/> <title>test</title> <!-- 引入sychelTemplate --> <script type="text/javascript" src="./sychelTemplate.js"></script> </head> <body> <div id='result'></div> <!-- 模板1开始,可以使用script(type设置为text/html)来存放模板片段,并且用id标示 --> <script id="t:_1234-abcd-1" type="text/html"> <div> <!-- 我是注释,语法均为Javascript原生语法,默认分割符为 <% %> ,也可以自定义,参见API部分 --> <!-- 输出变量语句,输出title --> <h1>title:<%=title%></h1> <!-- 判断语句if else--> <%if(list.length>1) { %> <h2>输出list,共有<%=list.length%>个元素</h2> <ul> <!-- 循环语句 for--> <%for(var i=0;i<5;i++){%> <li><%=list[i]%></li> <%}%> </ul> <%}else{%> <h2>没有list数据</h2> <%}%> </div> </script> <!-- 模板1结束 --> <!-- 使用模板 --> <script type="text/javascript"> var data={ "title":'欢迎使用sychelTemplate', "list":[ 'test1:默认支持HTML转义,如输出<script>,也可以关掉,语法<:=value> 详见API', 'test2:', 'test3:', 'test4:list[5]未定义,模板系统会输出空' ] }; //使用sychel.template命名空间 var bt=sychel.template; //可以设置分隔符 //bt.LEFT_DELIMITER='<!'; //bt.RIGHT_DELIMITER='!>'; //可以设置输出变量是否自动HTML转义 //bt.ESCAPE = false; //最简使用方法 var html=bt('t:_1234-abcd-1',data); //渲染 document.getElementById('result').innerHTML=html; </script> </body> </html>
基本用法
0、引入文件:sychelTemplate使用仅需引入sychelTemplate.js文件,未压缩是考虑大家调错阅读等方便,上线前请自行压缩代码。
如果在nodejs环境中使用,可以通过npm包管理安装
//注意:名称全部小写
npm install sychelTemplate
1、放置模板片段:
页面中,模板块可以放在
<script id='test1' type="text/template"> <!-- 模板部分 --> <!-- 模板结束 --> </script>
或者存放在 中,一般情况设置其CSS样式display:none来隐藏掉textarea,同样用id标识,如:
<textarea id='test2' style='display:none;'> <!-- 模板部分 --> <!-- 模板结束 --> </textarea>
模板也可以直接存储在一个变量中
var tpl = "<!-- 模板开始 --> 模板内容 <!-- 模板结束 -->";
2、调用引擎方式
(1)、数据结构是一个JSON,如:
var data={ title:'sychelTemplate', list:[ 'test data 1', 'test data 2', 'test data3' ] }
(2)、sychelTemplate占用sychel.template命名空间
//可以付值给一个短名变量使用 var bt = sychel.template;
(3)、方法一:tpl是传入的模板(String类型),可以是模板的id,可以是一个模板片段字符串,传入模板和对应
这里写代码片数据返回对应的HTML片段
//方法一:直接传入data,返回编译后的HTML片段 var html0 = sychel.template(tpl,data);
//或直接传入id即可 var html0 = sychel.template('test1',data);
方法二:或者可以只传入tpl,这时返回的是一个编译后的函数,可以把这个函数缓存下来,传入不同的data就可以生成不同的HTML片段
//方法二:先不传入data,返回编译后的函数 var fun = sychel.template(tpl); //或直接传入id即可 var fun = sychel.template('test1'); //之后通过改变数据,调用缓存下来的函数,产生不同的HTML片段 var html1 = fun(data1); var html2 = fun(data2);
(4)、最后将他们插入到一个容器中即可
document.getElementById('result0').innerHTML=html0; document.getElementById('result1').innerHTML=html1; document.getElementById('result2').innerHTML=html2;
3、模板基本语法(默认分隔符为<% %>,也可以自定义)
分隔符内语句为js语法,如:
<% var test = function(){ //函数体 }; if(1){}else{}; function testFun(){ return; }; %>
假定事先设置数据为
var data={ title:'sychelTemplate', list:['test1<script>','test2','test3'] }
注释
<!-- 模板中可以用HTML注释 --> 或 <%* 这是模板自带注释格式 *%> <% //分隔符内支持JS注释 %> 输出一个变量 //默认HTML转义,如果变量未定义输出为空 <%=title%> //不转义 <%:=title%> 或 <%-title%> //URL转义,UI变量使用在模板链接地址URL的参数中时需要转义 <%:u=title%> //UI变量使用在HTML页面标签onclick等事件函数参数中需要转义 //“<”转成“<”、“>”转成“>”、“&”转成“&”、“'”转成“\'” //“"”转成“\"”、“\”转成“\\”、“/”转成“\/”、\n转成“\n”、\r转成“\r” <%:v=title%> //HTML转义(默认自动) <%=title%> 或 <%:h=title%>
判断语句
<%if(list.length){%> <h2><%=list.length%></h2> <%}else{%> <h2>list长度为0<h2> <%}%>
循环语句
<%for(var i=0;i<list.length;i++){%> <li><%=list[i]%></li> <%}%>
4、不推荐使用功能
用户可以自定义分隔符,默认为 <% %>,如:
//设置左分隔符为 <! sychel.template.LEFT_DELIMITER='<!'; //设置右分隔符为 <! sychel.template.RIGHT_DELIMITER='!>'; 自定义默认输出变量是否自动HTML转义 //设置默认输出变量是否自动HTML转义,true自动转义,false不转义 sychel.template.ESCAPE = false;
D、性能相关数据
前端模板引擎在传统桌面电脑的浏览器端编译模板并渲染页面,无较大的性能开销。但在移动端上面,性能数据较为重要,故发布移动端性能数据列表,希望能够给各位开发者提供一个参考。
总结:编译执行时间(前端模版编译以及json被转换为html字符串的时间)范围约在10~90毫秒,大部分集中在20~60毫秒之间。Dom渲染时间(html字符串通过dom.innerHTML被插入到div里的时间)范围约在40~160毫秒,大部分集中在50~130毫秒之间。
源码
/** * @介绍:Sychel简单好用的Javascript模板引擎 1.0.6版本,这套模板机制的语法和JavaScript原生 * 的语法一致,在<%%>中进行书写,注意的是<%=%>是变量输出,<%:=%>是带转义的输出。 * @排错:模板语言的错误,F12工具不能进行检查,所以只能通过alert();来打印,所以这个问题我也在思考。 * @param str{String} dom结点ID,或者模板string * @param data{Object} 需要渲染的json对象,可以为空。当data为{}时,仍然返回html。 * @return 如果无data,直接返回编译后的函数;如果有data,返回html。 * @author Sychel * @email y921105@126.com */ //取得浏览器环境的Sychel命名空间,非浏览器环境符合commonjs规范exports出去 //修正在nodejs环境下,采用Sychel.template变量名 var Sychel = typeof module === 'undefined' ? (window.Sychel = window.Sychel || {}) : module.exports; //模板函数(放置于Sychel.template命名空间下) Sychel.template = function(str, data){ //检查是否有该id的元素存在,如果有元素则获取元素的innerHTML/value,否则认为字符串为模板 var fn = (function(){ //判断如果没有document,则为非浏览器环境 if(!window.document){ return bt._compile(str); }; //HTML5规定ID可以由任何不包含空格字符的字符串组成 var element = document.getElementById(str); if (element) { //取到对应id的dom,缓存其编译后的HTML模板函数 if (bt.cache[str]) { return bt.cache[str]; }; //textarea或input则取value,其它情况取innerHTML var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML; return bt._compile(html); }else{ //是模板字符串,则生成一个函数 //如果直接传入字符串作为模板,则可能变化过多,因此不考虑缓存 return bt._compile(str); }; })(); //有数据则返回HTML字符串,没有数据则返回函数 支持data={}的情况 var result = bt._isObject(data) ? fn( data ) : fn; fn = null; return result; }; //取得命名空间 Sychel.template var bt = Sychel.template; //标记当前版本 bt.versions = bt.versions || []; bt.versions.push('1.0'); //缓存 将对应id模板生成的函数缓存下来。 bt.cache = {}; //自定义分隔符,可以含有正则中的字符,可以是HTML注释开头 <! !> bt.LEFT_DELIMITER = bt.LEFT_DELIMITER||'<%'; bt.RIGHT_DELIMITER = bt.RIGHT_DELIMITER||'%>'; //自定义默认是否转义,默认为默认自动转义 bt.ESCAPE = true; //HTML转义 bt._encodeHTML = function (source) { return String(source) .replace(/&/g,'&') .replace(/</g,'<') .replace(/>/g,'>') .replace(/\\/g,'\') .replace(/"/g,'"') .replace(/'/g,'''); }; //转义影响正则的字符 bt._encodeReg = function (source) { return String(source).replace(/([.*+?^=!:${}()|[\]/\\])/g,'\\$1'); }; //转义UI UI变量使用在HTML页面标签onclick等事件函数参数中 bt._encodeEventHTML = function (source) { return String(source) .replace(/&/g,'&') .replace(/</g,'<') .replace(/>/g,'>') .replace(/"/g,'"') .replace(/'/g,''') .replace(/\\\\/g,'\\') .replace(/\\\//g,'\/') .replace(/\\n/g,'\n') .replace(/\\r/g,'\r'); }; //将字符串拼接生成函数,即编译过程(compile) bt._compile = function(str){ var funBody = "var _template_fun_array=[];\nvar fn=(function(__data__){\nvar _template_varName='';\nfor(name in __data__){\n_template_varName+=('var '+name+'=__data__[\"'+name+'\"];');\n};\neval(_template_varName);\n_template_fun_array.push('"+bt._analysisStr(str)+"');\n_template_varName=null;\n})(_template_object);\nfn = null;\nreturn _template_fun_array.join('');\n"; return new Function("_template_object",funBody); }; //判断是否是Object类型 bt._isObject = function (source) { return 'function' === typeof source || !!(source && 'object' === typeof source); }; //解析模板字符串 bt._analysisStr = function(str){ //取得分隔符 var _left_ = bt.LEFT_DELIMITER; var _right_ = bt.RIGHT_DELIMITER; //对分隔符进行转义,支持正则中的元字符,可以是HTML注释 <! !> var _left = bt._encodeReg(_left_); var _right = bt._encodeReg(_right_); str = String(str) //去掉分隔符中js注释 .replace(new RegExp("("+_left+"[^"+_right+"]*)//.*\n","g"), "$1") //去掉注释内容 <%* 这里可以任意的注释 *%> //默认支持HTML注释,将HTML注释匹配掉的原因是用户有可能用 <! !>来做分割符 .replace(new RegExp("<!--.*?-->", "g"),"") .replace(new RegExp(_left+"\\*.*?\\*"+_right, "g"),"") //把所有换行去掉 \r回车符 \t制表符 \n换行符 .replace(new RegExp("[\\r\\t\\n]","g"), "") //用来处理非分隔符内部的内容中含有 斜杠 \ 单引号 ‘ ,处理办法为HTML转义 .replace(new RegExp(_left+"(?:(?!"+_right+")[\\s\\S])*"+_right+"|((?:(?!"+_left+")[\\s\\S])+)","g"),function (item, $1) { var str = ''; if($1){ //将 斜杠 单引 HTML转义 str = $1.replace(/\\/g,"\").replace(/'/g,'''); while(/<[^<]*?'[^<]*?>/g.test(str)){ //将标签内的单引号转义为\r 结合最后一步,替换为\' str = str.replace(/(<[^<]*?)'([^<]*?>)/g,'$1\r$2') }; }else{ str = item; } return str ; }); str = str //定义变量,如果没有分号,需要容错 <%var val='test'%> .replace(new RegExp("("+_left+"[\\s]*?var[\\s]*?.*?[\\s]*?[^;])[\\s]*?"+_right,"g"),"$1;"+_right_) //对变量后面的分号做容错(包括转义模式 如<%:h=value%>) <%=value;%> 排除掉函数的情况 <%fun1();%> 排除定义变量情况 <%var val='test';%> .replace(new RegExp("("+_left+":?[hvu]?[\\s]*?=[\\s]*?[^;|"+_right+"]*?);[\\s]*?"+_right,"g"),"$1"+_right_) //按照 <% 分割为一个个数组,再用 \t 和在一起,相当于将 <% 替换为 \t //将模板按照<%分为一段一段的,再在每段的结尾加入 \t,即用 \t 将每个模板片段前面分隔开 .split(_left_).join("\t"); //支持用户配置默认是否自动转义 if(bt.ESCAPE){ str = str //找到 \t=任意一个字符%> 替换为 ‘,任意字符,' //即替换简单变量 \t=data%> 替换为 ',data,' //默认HTML转义 也支持HTML转义写法<%:h=value%> .replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':Sychel.template._encodeHTML($1),'"); }else{ str = str //默认不转义HTML转义 .replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':$1,'"); }; str = str //支持HTML转义写法<%:h=value%> .replace(new RegExp("\\t:h=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':Sychel.template._encodeHTML($1),'") //支持不转义写法 <%:=value%>和<%-value%> .replace(new RegExp("\\t(?::=|-)(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':$1,'") //支持url转义 <%:u=value%> .replace(new RegExp("\\t:u=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':encodeURIComponent($1),'") //支持UI 变量使用在HTML页面标签onclick等事件函数参数中 <%:v=value%> .replace(new RegExp("\\t:v=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':Sychel.template._encodeEventHTML($1),'") //将字符串按照 \t 分成为数组,在用'); 将其合并,即替换掉结尾的 \t 为 '); //在if,for等语句前面加上 '); ,形成 ');if ');for 的形式 .split("\t").join("');") //将 %> 替换为_template_fun_array.push(' //即去掉结尾符,生成函数中的push方法 //如:if(list.length=5){%><h2>',list[4],'</h2>');} //会被替换为 if(list.length=5){_template_fun_array.push('<h2>',list[4],'</h2>');} .split(_right_).join("_template_fun_array.push('") //将 \r 替换为 \ .split("\r").join("\\'"); return str; };
相关文章推荐
- JS模板引擎-腾讯artTemplate 简洁语法例子
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
- js模板引擎-腾讯artTemplate 简洁语法例子
- js模板引擎artTemplate学习总结
- JS模板引擎-腾讯artTemplate 总结
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
- 主流的js template引擎 前端模板
- baiduTemplate.js 百度JS模板引擎
- 百度JS模板引擎 baiduTemplate
- js模板引擎art-template使用方法
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
- 腾讯js模板引擎 artTemplate 学习
- JS模板引擎 :ArtTemplate (2)
- template.js —一款基于JS的模板引擎
- 【Web】artTemplate模板引擎:编译(生成渲染函数)+渲染(生成HTML串) 模板:基于JS的语法(JS+自定义)+HTML
- 高性能js模板引擎(artTemplate )
- JS模板引擎-腾讯artTemplate 简洁语法例子
- baiduTemplate——js模板引擎使用
- js模板引擎之artTemplate
- JS模板引擎-腾讯artTemplate 简洁语法例子