Giter Club home page Giter Club logo

javascript-template's Introduction

TODO:
  1. Optimize the compiled function by abandoning using keyword "with".

  ( Every commit will be considered )
  ( 欢迎任何人提交代码 )


Feature:
  1. Support comment
    <%# comment %>
  
  2. Support encodeURIComponent
    <%:u=href %>

  3. Support encodeHTML
    <% var s = "<script>var s= 'encodeHTML'<\/script>"; %>
    <%:h=str %>

  4. Support developers custom template function
    var template = '<% output("custom function"); %>';
    app.tpl(template, {}, {
        fns : {
            output : 'function(str){__s += str}'
        }
    })

  5. Good performance

  6. Support error tips

使用方法:

    语法类似JSP,在JSP的基础上增加了一些特性,当然也去掉了很多

    1. 注释
        <%# comment %>
    
        <% /* comment */ %>

        <% /** comment */ %>

        不支持(Not support) <% //comment %>

    2. 普通语句
        <%
            var s = 'template'; /* 代码块里是JavaScript语句 */
            if(s == 'template'){
        %>
            template
        <%
            }
        %>

    3. 输出变量

        a. 直接输出
            <% var str = "HelloWorld!"; %>
            <%=str %>

            程序将直接输出"HelloWorld!"

        b. encodeURIComponent
            <% var str = "HelloWorld! "; %>
            <%:u=str %>

            程序将输出"HelloWorld!%20"

        c. encodeHTML
            <% var str = "<script>var s = 'HelloWorld!';<\/script>"; %>
            <%:h=str %>

            程序将输出"&lt;script&gt;var s = &#39;HelloWorld!&#39;;&lt;/script&gt;"

    4. 内置模板函数
        
        目前内置了两个模板函数,分别是print和encodeHTML
        a. print
            <%
                var s = "HelloWorld!";
                print(s);
            %>
            等价于
            <%
                var s = "HelloWorld!";
            %>
            <%=s%>

        b. encodeHTML
            <%
                var str = "<script>var s = 'HelloWorld!';<\/script>";
                print(encodeHTML(str));
            %>
            等价于
            <%
                var str = "<script>var s = 'HelloWorld!';<\/script>";
            %>
            <%:h=str %>

    5. 自定义模板函数
        
        开发者可以根据自己的喜好,自定义模板内可使用的函数,如下:

        <%
            var str = "<script>var s = 'HelloWorld!';<\/script>";
            encodeHTMLAndPrint(str);
        %>

        app.tpl(template, {}, {
            fns : {
                encodeHTMLAndPrint : 'function(s){print(encodeHTML(s))}'
            }
        });

        在这里encodeHTMLAndPrint函数为开发者自定义函数,调用了内置函数print和encodeHTML输出一个转义好的字符串

        注意:开发者尽量不要应用内置变量"__s"

Good Luck

javascript-template's People

Contributors

bd-pengxing avatar pengxing avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Forkers

jpssff kazu2012

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.