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

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

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

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

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

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

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

8. <% 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(""); out.write("<div>"); out.print(message); out.write("</div>"); ... } Servlet

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

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

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

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

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

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

15. 打酱油 Finished Thanks Zzzz... 貘