https://github.com/rwson/template

轻量级javascript模板引擎
https://github.com/rwson/template

Last synced: 3 months ago
JSON representation

轻量级javascript模板引擎

• Host: GitHub
• URL: https://github.com/rwson/template
• Owner: rwson
• Created: 2016-08-24T13:42:36.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-03-02T01:57:36.000Z (over 9 years ago)
• Last Synced: 2025-03-11T03:41:52.285Z (over 1 year ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## Template

javascript模板引擎

#### 基础指令说明

指令 | 写法 | 意义

---|---|---

javascript可执行语句 | <% for(...) %> | 一些流程控制语句(for, if, else...)

读取数据属性 | <%= item.title %> | 读取当前数据的属性或本身

HTML转义输出 | <$ item.html $> | 将HTML中的特殊字符转义后并且输出

#### API

web端:

	

		<ul>

			<% for(var i in obj){ %>

				<li><%= obj[i].text %></li>

			<% } %>

		</ul>

	

    

    

        window.onload = function() {

           var tpl = document.querySelector("#template").innerHTML;

           var compileRes = Template.compile(tpl);

           var items = [

                    {

                        "text": "list1"

                    },

                    {

                        "text": "list2"

                    },

                    {

                        "text": "list3"

                    }

               ];

           document.querySelector(...).innerHTML = Template.render(compiled, items);

        };

    

    

或者

    

    

        window.onload = function() {

           var tpl = "<% for(var i = 0, len = obj.length; i < len i ++) %><li><%= obj[i].text %></li><% } %>";

           var compileRes = Template.compile(tpl);

           var data = [

                    {

                        "text": "list1"

                    },

                    {

                        "text": "list2"

                    },

                    {

                        "text": "list3"

                    }

               ];

           document.querySelector(...).innerHTML = Template.render(compiled, data);

        };

    

    

大多数模板引擎中是模板编译方法中使用with语句动态修改其内部的this指向，本模板的compile中没有采用这种做法，而是在指定了一个默认参数obj，因此，在编写模板语句时，对数据的读操作务必采用obj.xxx或者obj['xxx']这种形式，防止在运行时报“xxx is not defined”的异常