Javascript template

3,283 views

Published on

Published in: Technology, Education
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,283
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Javascript template

  1. 1. 基于 JS 的模板引擎实现思路<br />偶是来打酱油的……<br />貘<br /> 2011-06-21<br />
  2. 2. 打酱油的来龙去脉<br />上上期主题:麦霸唐, JQuery Template<br />好玩,自己写了个 Template(就叫打酱油Template好了)<br />杭州主题:杜欢(风之石),JavaScript 模板引擎 - easyTemplate 的应用场景及设计实现<br />SINA 围脖前端在用 easyTemplate <br />跟杜欢水了下,一时兴起两地同说模板主题<br />easyTemplate 说明地址http://www.w3cgroup.com/article.asp?id=300<br />偶对自己的八卦行为表示有点无奈 〒﹃〒〣<br />
  3. 3. 例行公事的说下啥要用模板<br />方便呗<br />避免来回拼字符串呗<br />其他各种高级理由<br />理由都懂的,不多扯了<br />麦霸唐老师说:各种改!!尼玛伤不起啊!!!-<br />
  4. 4. 这个打酱油模板实现了啥<br />基本语法: ${data.xxx} 引入json数据,引用的数据对象命名为 data<br />支持一些简单语法标记:${expression}{{if (expression)}} {{else if (expression)}} {{else}} {{/if}}{{for (expression)}} {{/for}}{{switch}}{{case}}{{/case}}{{/switch}}<br />支持语法标签嵌套错误校验<br />缓存转为JS源码的模板语句<br />
  5. 5. 模板与数据是均从 easyTemplate 无耻抄来的<br />偶们不谈效率问题~~<br />演示~~<br />
  6. 6. 使用方法:jsTemplate(data [, sTemplate])<br />
  7. 7. 前期思路<br />JSP 与 Servlet<br />以第一次执行JSP时,将 JSP 标记解析,生成具体 Servlet Class文件<br />Servlet 文件内是纯纯的 JAVA<br /><%...%> 标签被解释为 JAVA 代码段<br /><%=...%>标签被解释为表达式输出<br />数据变化,JSP文件不再被解析,只运行已编译的Servlet Class<br />看演示图<br />
  8. 8. <%<br />String message = "message string.";<br />%><br /><div><%=messagge%></div><br />JSP<br />public void _jspService(HttpServletRequest request, HttpServletResponse response)<br /> throws java.io.IOException, ServletException {<br /> PageContext pageContext = null;<br /> HttpSession session = null;<br /> ServletContext application = null;<br /> ServletConfig config = null;<br /> JspWriter out = null;<br /> ...<br /> String message = "message string."<br /> out.write("rn");<br /> out.write("<div>");<br /> out.print(message);<br /> out.write("</div>rn");<br /> ...<br />}<br />Servlet<br />
  9. 9. 原理不变 实现变化<br />JSP 标记可映射为 JSTemplate 语法标记<br />Servlet 可映射为将语法标记与内容解析为原生JS程序段源码<br />Servlet 的执行可以映射为将JS程序源码执行 eval 或 new Function<br /><%...%> 可映射为模板语法标签 {{...}}<br /> <%=...%>可映射为模板输出标签 ${...}<br />当然,你也可以整自己的标签啦<br />数据变化后不再重新生成Servlet可以映射为缓存JS源码<br />看例子<br />
  10. 10. <div>Template</div><br />{{if (data.length > 0)}}<br /> <div>${data.length}</div><br />{{/if}}<br />Template<br />var sHtml = [];<br />sHtml .push('<div>Template</div>n');<br />if (data.length > 0) {<br /> sHtml.push(' <div>');<br /> sHtml.push(data.length);<br /> sHtml.push('</div>');<br />}<br />return sHtml.join('');<br />JavaScript<br />
  11. 11. 实现靠正则<br />这篇是打酱油的,不细说了,你懂的<br />用了一些简单的正则<br />var startSyntaxRegExp = /^s*([a-z]+)s*((.*))/;<br />var closeSyntaxRegExp = /^s*[/][a-z]+s*$/;<br />var trimRegExp = /(^s+)|(s+$)/;<br />var quotationRegExp = /(["'])/g;<br />var newLineRegExp = /(n|r)/g;<br />var expressionRegExp = /${([^{}]*)}/g;<br />var syntaxTokenRegExp = /[{]{2}|[}]{2}/;<br />var slashRegExp = //g;<br />* 你自己实现时可以写个复杂的正则一次性匹配出模板语法元素等,这样或许效率会更高一些。<br />
  12. 12. 语法标签嵌套校验<br />思路很简单就是标签压栈<br />检测当前栈顶标签与将要入栈标签是否成对<br />JS 使用数组方法 push/pop 或unshift/shift来实现栈操作<br />
  13. 13. 缓存模板<br />都存起来备用<br />如果输入模板一致,就不再转换模板到JS代码<br />执行 JS 代码码,省去模板语法解析转换时间。<br />模板字符串和JS代码找个闭包放就好了<br />templateStringCache<br /><div>Template</div><br />{{if (data.length > 0)}}<br /> <div>${data.length}</div><br />{{/if}}<br />JavaScriptStringCache<br />var sHtml = [];<br />sHtml .push('<div>Template</div>n');<br />if (data.length > 0) {<br /> sHtml.push(' <div>');<br /> sHtml.push(data.length);<br /> sHtml.push('<div>');<br />}<br />return sHtml.join('');<br />
  14. 14. Q&A<br />这个环节就省了吧~~<br />
  15. 15. 打酱油<br />Finished<br />Thanks<br />Zzzz...<br />貘<br />

×