Javascript template

基于 JS 的模板引擎实现思路
偶是来打酱油的……
貘
2011-06-21

打酱油的来龙去脉
上上期主题：麦霸唐， JQuery Template
好玩，自己写了个 Template(就叫打酱油Template好了)
杭州主题：杜欢(风之石)，JavaScript 模板引擎 - easyTemplate 的应用场景及设计实现
SINA 围脖前端在用 easyTemplate
跟杜欢水了下，一时兴起两地同说模板主题
easyTemplate 说明地址http://www.w3cgroup.com/article.asp?id=300
偶对自己的八卦行为表示有点无奈〒﹃〒〣

例行公事的说下啥要用模板
方便呗
避免来回拼字符串呗
其他各种高级理由
理由都懂的，不多扯了
麦霸唐老师说：各种改！！尼玛伤不起啊！！！-

这个打酱油模板实现了啥
基本语法: ${data.xxx} 引入json数据，引用的数据对象命名为 data
支持一些简单语法标记：${expression}{{if (expression)}} {{else if (expression)}} {{else}} {{/if}}{{for (expression)}} {{/for}}{{switch}}{{case}}{{/case}}{{/switch}}
支持语法标签嵌套错误校验
缓存转为JS源码的模板语句

模板与数据是均从 easyTemplate 无耻抄来的
偶们不谈效率问题~~
演示~~

使用方法：jsTemplate(data [, sTemplate])

前期思路
JSP 与 Servlet
以第一次执行JSP时，将 JSP 标记解析，生成具体 Servlet Class文件
Servlet 文件内是纯纯的 JAVA
<%...%> 标签被解释为 JAVA 代码段
<%=...%>标签被解释为表达式输出
数据变化，JSP文件不再被解析，只运行已编译的Servlet Class
看演示图

<%
String message = "message string.";
%>
<div><%=messagge%></div>
JSP
public void _jspService(HttpServletRequest request, HttpServletResponse response)
throws java.io.IOException, ServletException {
PageContext pageContext = null;
HttpSession session = null;
ServletContext application = null;
ServletConfig config = null;
JspWriter out = null;
...
String message = "message string."
out.write("rn");
out.write("<div>");
out.print(message);
out.write("</div>rn");
...
}
Servlet

原理不变实现变化
JSP 标记可映射为 JSTemplate 语法标记
Servlet 可映射为将语法标记与内容解析为原生JS程序段源码
Servlet 的执行可以映射为将JS程序源码执行 eval 或 new Function
<%...%> 可映射为模板语法标签 {{...}}
<%=...%>可映射为模板输出标签 ${...}
当然，你也可以整自己的标签啦
数据变化后不再重新生成Servlet可以映射为缓存JS源码
看例子

<div>Template</div>
{{if (data.length > 0)}}
<div>${data.length}</div>
{{/if}}
Template
var sHtml = [];
sHtml .push('<div>Template</div>n');
if (data.length > 0) {
sHtml.push(' <div>');
sHtml.push(data.length);
sHtml.push('</div>');
}
return sHtml.join('');
JavaScript

实现靠正则
这篇是打酱油的，不细说了，你懂的
用了一些简单的正则
var startSyntaxRegExp = /^s*([a-z]+)s*((.*))/;
var closeSyntaxRegExp = /^s*[/][a-z]+s*$/;
var trimRegExp = /(^s+)|(s+$)/;
var quotationRegExp = /(["'])/g;
var newLineRegExp = /(n|r)/g;
var expressionRegExp = /${([^{}]*)}/g;
var syntaxTokenRegExp = /[{]{2}|[}]{2}/;
var slashRegExp = //g;
* 你自己实现时可以写个复杂的正则一次性匹配出模板语法元素等，这样或许效率会更高一些。

语法标签嵌套校验
思路很简单就是标签压栈
检测当前栈顶标签与将要入栈标签是否成对
JS 使用数组方法 push/pop 或unshift/shift来实现栈操作

缓存模板
都存起来备用
如果输入模板一致，就不再转换模板到JS代码
执行 JS 代码码，省去模板语法解析转换时间。
模板字符串和JS代码找个闭包放就好了
templateStringCache
<div>Template</div>
{{if (data.length > 0)}}
<div>${data.length}</div>
{{/if}}
JavaScriptStringCache
var sHtml = [];
sHtml .push('<div>Template</div>n');
if (data.length > 0) {
sHtml.push(' <div>');
sHtml.push(data.length);
sHtml.push('<div>');
}
return sHtml.join('');

Q&A
这个环节就省了吧~~

打酱油
Finished
Thanks
Zzzz...
貘

Javascript template

by Kai Cui on Jun 26, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Javascript template — Presentation Transcript