Your SlideShare is downloading. ×
0
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Javascript template
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript template

2,687

Published on

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

No Downloads
Views
Total Views
2,687
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 基于 JS 的模板引擎实现思路<br />偶是来打酱油的……<br />貘<br /> 2011-06-21<br />
  • 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. 例行公事的说下啥要用模板<br />方便呗<br />避免来回拼字符串呗<br />其他各种高级理由<br />理由都懂的,不多扯了<br />麦霸唐老师说:各种改!!尼玛伤不起啊!!!-<br />
  • 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. 模板与数据是均从 easyTemplate 无耻抄来的<br />偶们不谈效率问题~~<br />演示~~<br />
  • 6. 使用方法:jsTemplate(data [, sTemplate])<br />
  • 7. 前期思路<br />JSP 与 Servlet<br />以第一次执行JSP时,将 JSP 标记解析,生成具体 Servlet Class文件<br />Servlet 文件内是纯纯的 JAVA<br /><%...%> 标签被解释为 JAVA 代码段<br /><%=...%>标签被解释为表达式输出<br />数据变化,JSP文件不再被解析,只运行已编译的Servlet Class<br />看演示图<br />
  • 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. 原理不变 实现变化<br />JSP 标记可映射为 JSTemplate 语法标记<br />Servlet 可映射为将语法标记与内容解析为原生JS程序段源码<br />Servlet 的执行可以映射为将JS程序源码执行 eval 或 new Function<br /><%...%> 可映射为模板语法标签 {{...}}<br /> <%=...%>可映射为模板输出标签 ${...}<br />当然,你也可以整自己的标签啦<br />数据变化后不再重新生成Servlet可以映射为缓存JS源码<br />看例子<br />
  • 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. 实现靠正则<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. 语法标签嵌套校验<br />思路很简单就是标签压栈<br />检测当前栈顶标签与将要入栈标签是否成对<br />JS 使用数组方法 push/pop 或unshift/shift来实现栈操作<br />
  • 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. Q&A<br />这个环节就省了吧~~<br />
  • 15. 打酱油<br />Finished<br />Thanks<br />Zzzz...<br />貘<br />

×