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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Javascript template

2,572
views

Published on

Published in: Technology, Education

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,572
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
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 的模板引擎实现思路
    偶是来打酱油的……

    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("rn");
    out.write("<div>");
    out.print(message);
    out.write("</div>rn");
    ...
    }
    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>n');
    if (data.length > 0) {
    sHtml.push(' <div>');
    sHtml.push(data.length);
    sHtml.push('</div>');
    }
    return sHtml.join('');
    JavaScript
  • 11. 实现靠正则
    这篇是打酱油的,不细说了,你懂的
    用了一些简单的正则
    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;
    * 你自己实现时可以写个复杂的正则一次性匹配出模板语法元素等,这样或许效率会更高一些。
  • 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>n');
    if (data.length > 0) {
    sHtml.push(' <div>');
    sHtml.push(data.length);
    sHtml.push('<div>');
    }
    return sHtml.join('');
  • 14. Q&A
    这个环节就省了吧~~
  • 15. 打酱油
    Finished
    Thanks
    Zzzz...