More Related Content Similar to Javascript template Similar to Javascript template (20) Javascript template2. 打酱油的来龙去脉 上上期主题:麦霸唐, JQuery Template 好玩,自己写了个 Template(就叫打酱油Template好了) 杭州主题:杜欢(风之石),JavaScript 模板引擎 - easyTemplate 的应用场景及设计实现 SINA 围脖前端在用 easyTemplate 跟杜欢水了下,一时兴起两地同说模板主题 easyTemplate 说明地址http://www.w3cgroup.com/article.asp?id=300 偶对自己的八卦行为表示有点无奈 〒﹃〒〣 4. 这个打酱油模板实现了啥 基本语法: ${data.xxx} 引入json数据,引用的数据对象命名为 data 支持一些简单语法标记:${expression}{{if (expression)}} {{else if (expression)}} {{else}} {{/if}}{{for (expression)}} {{/for}}{{switch}}{{case}}{{/case}}{{/switch}} 支持语法标签嵌套错误校验 缓存转为JS源码的模板语句 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; * 你自己实现时可以写个复杂的正则一次性匹配出模板语法元素等,这样或许效率会更高一些。 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('');