`
satanultra
  • 浏览: 10580 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript模板引擎 - Elapse

模板JavaScript模板JS模板JavaScript前端模板 
阅读更多

背景：

用于公司项目，产品诉求：

1，可编译，高性能。

2，简单/灵活的include

3，简洁的语法

 

故决定自行开发一个引擎名为：Elapse

 

 

需求样例：渲染一个数据表格：


模板：

				<table>
					<thead>
						<tr>
							<th>
								姓名
							</th>
							<th>
								性别
							</th>
							<th>
								生日
							</th>
						</tr>
					</thead>
					<tbody>
						${forarr #userList as user}
							<tr>
								<td>
									${user.name}
								</td>
								<td>
									${user.sex}
								</td>
								<td>
									${user.birthday}
								</td>
							</tr>
						${/forarr}
					</tbody>
				</table>

 

注入到模板的数据：

				{
					"userList": [
						{
							"name": "小明",
							"sex": "男",
							"birthday": "1989-10-29"
						},
						{
							"name": "小红",
							"sex": "女",
							"birthday": "1989-10-1"
						}
					]
				}

  

渲染代码：

				var template = $("#template").val();
				var json = $.parseJSON($("#json").val());
				//渲染代码开始
				Elapse.renderFromSource({
					source: template,
					data: json,
					complete: function (text) {
						$("#result").html(text);
					}
				});
				//渲染代码结束

 

渲染结果：

 

				<table>
					<thead>
						<tr>
							<th>
								姓名
							</th>
							<th>
								性别
							</th>
							<th>
								生日
							</th>
						</tr>
					</thead>
					<tbody>
						
							<tr>
								<td>
									小明
								</td>
								<td>
									男
								</td>
								<td>
									1989-10-29
								</td>
							</tr>
						
							<tr>
								<td>
									小红
								</td>
								<td>
									女
								</td>
								<td>
									1989-10-1
								</td>
							</tr>
						
					</tbody>
				</table>
 

简单的变量访问机制：

 

	访问用户变量：${#userList} ${#userList.length}
	访问JS全局变量：${@location.href}
	访问系统生成的临时变量： ${curUser}
 

 

为常用需求优化的关键字：

循环数组： 

					${forarr #userList as user}
						列表长度为:${#userList.length},现在循环到了${user#index},值:${user}
					${/forarr}

  

循环对象：

					${foreach #colors as color}
						颜色${color#key}的十六进制值为:${color}
					${/foreach}
  

  单纯循环：

					循环十次:
					${loop 10 as ls}
						循环步进为${ls#step},循环到了${ls},循环到${ls#over}即结束。
					${/loop}
					
					循环十次，每次递增2:
					${loop 10,2 as ls}
						循环步进为${ls#step},循环到了${ls},循环到${ls#over}即结束。
					${/loop}
					
					循环十次，每次递增2,初始值为5:
					${loop 10,2,5 as ls}
						循环步进为${ls#step},循环到了${ls},循环到${ls#over}即结束。
					${/loop}

 

while循环：

					${while true}
						一次循环立马退出
						${break}
					${/while}

if语句：

					${if #userList.length == 3}
						用户列表长度为3
					${/if}

 

else语句：

					${if #userList.length == 3}
						用户列表长度为3
					${else}
						用户列表长度不为3
					${/if}
  

elseif语句：

					${if #userList.length == 3}
						用户列表长度为3
					${elseif #userList.length == 0}
						用户列表长度为0
					${else}
						用户列表长度不为3
					${/if}

 

switch语句：

					${switch #userList.length}
						${case 0}
							用户列表长度为空。
							${break}
						${case 1}
							用户列表长度为1。
							${break}
						${case 2}
							用户列表长度为2。
							${break}
						${case 3}
							用户列表长度为3。
							${break}
						${default}
							神马啊。。。
					${/switch}
 

定义变量：

					将一个变量赋null:
					${eval #userList[0] = null}
					
					定义一个变量,必须定义在#下:
					${eval #myvar = "hello world!"}

 

给模板命名（注册模板）：

					设置模板的name为“userlist”
					${name userlist}
 

简单的模板包含：

					包含名称为“userlist”的模板：
					${include userlist}
					
					包含名称为“userlist”的模板,并且向其注入一些数据：
					${include userlist:#userList}

 

系统如何找到包含的模板？：

					Elapse.setLoader({
						loader: function (name, setter) {	
							//设置loader函数，当系统需要的模板未注册的话，会调用此方法。
							//name: 需要的模板的名称
							//setter: 接收模板方法。
							//定义你的获取方式：来自dom、来自远程。。。我这里是来自远程。  
							$.ajax({
								url: "/getTemplate",
								data: "name=" + name,
								type: "get",
								dataType: "text",
								success: function (source) {
									setter(source);
								}
							});
						}
					});
					
					//你只需要满足loader的调用即可，只有当以上代码的“setter”参数接收了模板源文件，系统才认为得到了此模板。你对模板加载大可放心，一切都由引擎调度好了。

 

最终产品特点：

        1，语法简单。由于我们是基于JS语法，并做增强，所以学习成本低。且功能强大。

          2，可编译，高性能。经测试，编译后的运行效率和市面上大部分模板引擎效率持平，或更高。

          3，简单的include。只需配置一个loader（加载器），便可支持各种模板来源，并自动从来源获取模板。

 


详细文档见附件，打开guide.html即文档，勿用ie查看，文档样式不兼容。

项目开源，github：https://github.com/yinhang/Elapse

 

欢迎你的使用，并期待加入此项目一同开发。

 

分享到：
JSTE - 基于JavaScript语法的简易模板引擎
评论
5 楼 little_shieh 2012-08-27  
不加\的话，模板引擎认为是语法错误，
加了\后，数据出来了，但是在不同的浏览器下的表现不同。
我现在改用 jquery-jtemplates.js 了。

satanultra 写道
\${forarr #inspections as inspection} 前边的\是什么，这不是标准的html。 另外检查一下你的数据。
little_shieh 写道
little_shieh 写道
有个很奇怪的问题，
IE8 and Firefox14

列表在IE8里面能全部显示，index是从0开始。
在firefox里面只显示最后一条，index是从1开始的.


<table class="displayTable">
    <tr>
    <td>序号</td>
        <td>校验顺序</td>
    <td>部件</td>
    <td>损坏描述</td>
    <td>修理方法</td>
    <td>责任划分</td>
    </tr>
    \${forarr #inspections as inspection}
    <tr>
    <td>\${inspection#index}</td>
    <td>\${inspection.componentId}</td>
    <td>\${inspection.partId}</td>
    <td>\${inspection.damageDesc}</td>
    <td>\${inspection.repairMethod}</td>
    <td>\${inspection.duty}</td>
    </tr>
    \${/forarr}
</table>

改用mustache.js后更奇特，IE下面显示是正常的，但是firefox下面更本显示不了数据，悲催啊

satanultra 写道
\${forarr #inspections as inspection} 前边的\是什么，这不是标准的html。 另外检查一下你的数据。
little_shieh 写道
little_shieh 写道
有个很奇怪的问题，
IE8 and Firefox14

列表在IE8里面能全部显示，index是从0开始。
在firefox里面只显示最后一条，index是从1开始的.


<table class="displayTable">
    <tr>
    <td>序号</td>
        <td>校验顺序</td>
    <td>部件</td>
    <td>损坏描述</td>
    <td>修理方法</td>
    <td>责任划分</td>
    </tr>
    \${forarr #inspections as inspection}
    <tr>
    <td>\${inspection#index}</td>
    <td>\${inspection.componentId}</td>
    <td>\${inspection.partId}</td>
    <td>\${inspection.damageDesc}</td>
    <td>\${inspection.repairMethod}</td>
    <td>\${inspection.duty}</td>
    </tr>
    \${/forarr}
</table>

改用mustache.js后更奇特，IE下面显示是正常的，但是firefox下面更本显示不了数据，悲催啊

4 楼 satanultra 2012-08-13  
\${forarr #inspections as inspection} 前边的\是什么，这不是标准的html。 另外检查一下你的数据。
little_shieh 写道
little_shieh 写道
有个很奇怪的问题，
IE8 and Firefox14

列表在IE8里面能全部显示，index是从0开始。
在firefox里面只显示最后一条，index是从1开始的.


<table class="displayTable">
    <tr>
    <td>序号</td>
        <td>校验顺序</td>
    <td>部件</td>
    <td>损坏描述</td>
    <td>修理方法</td>
    <td>责任划分</td>
    </tr>
    \${forarr #inspections as inspection}
    <tr>
    <td>\${inspection#index}</td>
    <td>\${inspection.componentId}</td>
    <td>\${inspection.partId}</td>
    <td>\${inspection.damageDesc}</td>
    <td>\${inspection.repairMethod}</td>
    <td>\${inspection.duty}</td>
    </tr>
    \${/forarr}
</table>

改用mustache.js后更奇特，IE下面显示是正常的，但是firefox下面更本显示不了数据，悲催啊
3 楼 little_shieh 2012-08-13  
little_shieh 写道
有个很奇怪的问题，
IE8 and Firefox14

列表在IE8里面能全部显示，index是从0开始。
在firefox里面只显示最后一条，index是从1开始的.


<table class="displayTable">
    <tr>
    <td>序号</td>
        <td>校验顺序</td>
    <td>部件</td>
    <td>损坏描述</td>
    <td>修理方法</td>
    <td>责任划分</td>
    </tr>
    \${forarr #inspections as inspection}
    <tr>
    <td>\${inspection#index}</td>
    <td>\${inspection.componentId}</td>
    <td>\${inspection.partId}</td>
    <td>\${inspection.damageDesc}</td>
    <td>\${inspection.repairMethod}</td>
    <td>\${inspection.duty}</td>
    </tr>
    \${/forarr}
</table>

改用mustache.js后更奇特，IE下面显示是正常的，但是firefox下面更本显示不了数据，悲催啊
2 楼 little_shieh 2012-08-13  
有个很奇怪的问题，
IE8 and Firefox14

列表在IE8里面能全部显示，index是从0开始。
在firefox里面只显示最后一条，index是从1开始的.


<table class="displayTable">
    <tr>
    <td>序号</td>
        <td>校验顺序</td>
    <td>部件</td>
    <td>损坏描述</td>
    <td>修理方法</td>
    <td>责任划分</td>
    </tr>
    \${forarr #inspections as inspection}
    <tr>
    <td>\${inspection#index}</td>
    <td>\${inspection.componentId}</td>
    <td>\${inspection.partId}</td>
    <td>\${inspection.damageDesc}</td>
    <td>\${inspection.repairMethod}</td>
    <td>\${inspection.duty}</td>
    </tr>
    \${/forarr}
</table>
1 楼 rambolovepanda 2012-07-02  
您能否给一个 ajax调用的案例 我对你的include还是不太了解！ 勿喷 我是小白
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    eLapse-开源

    "eLapse-开源"项目就是这样一个例子，它是一个专为GTK+和GNOME环境设计的计时器和警报应用程序。下面将详细探讨这个项目的核心特点、功能以及与开源社区的关系。 首先，让我们了解一下GTK+。GTK+（GIMP Toolkit）是...

    rodiojs-http:简单的HTTP基准测试工具

    帮助 node rodio --help选项 -h, --help output usage information-V, --version output the version number-t, --time &lt;n&gt; Total time to elapse (seconds)-c, --concurrency &lt;n&gt; Number of concurrent requests ...

    浮点vfdsfJAVA实现链表,双向链表.txtJAVA实现链表,双向链表.txt

    &lt;!-- public topnav --&gt; &lt;script src="http://csdnimg.cn/pubnav/js/pub_topnav_2011.js"type="text/javascript"&gt; &lt;!...&lt;script language='JavaScript' type='text/javascript' src='/js/jquery...

    程序运行时间测试代码

    ShowMessage('耗时：' + IntToStr(TimeElapse) + ' 毫秒'); end; ``` #### 2. **timeGetTime** `timeGetTime` 函数提供了比 `GetTickCount` 更高的精度，在 Windows NT 系统下的默认精度为 5 毫秒，在 Windows 9x...

    MahNMF Manhattan Non-negative Matrix Factorization

    % elapse : CPU time in seconds. % HIS : (debugging purpose) History of computation, % niter - total iteration number spent for Nesterov's optimal % gradient method, % cpus - CPU seconds at iteration ...

    获取aspx页面执行时间完全解决方案

    &lt;div data-src="#PageElapseTime" data-fld="ElapseTime"&gt;页面实际执行时间 "&lt;XML ID="PageElapseTime"&gt;&lt;Time&gt;&lt;ElapseTime&gt;xxxxms&lt;/ElapseTime&gt;&lt;/Time&gt;&lt;/XML&gt;", 只需添加 "&lt;div data-src=\"#PageElapseTime\" data-...

    time-elapsed:Node.js io.js - 轻松测量已经过去的时间

    时间流逝 轻松测量已经过去的时间。 npm install time-elapsed 使用： // Require the Module: var TimeElapsed = require('time-elapsed'); // Create new Instance of Time Elapsed: var timer = new Time...

    西电计算机操作系统课程设计pintos-pro1.pdf

    忙等待是指线程不断地请求 CPU 来判断是否经过了足够的时间长度，如果 elapse 的时间不足则继续占用 CPU，这会导致 CPU 的浪费和系统性能的下降。 timer_sleep 函数的原型是 Void timer_sleep (int64_t ticks)，它...

    API文档1

    4. `void setTime(int elapseTime)` - 使用这个方法，可以设置 Time 对象的内部时间值，参数 `elapseTime` 是自 1970-01-01 00:00:00 起的秒数。 5. `std::string toString()` - 将 Time 对象转换为一个字符串，...

    PostgresChina2018石勇虎庖丁解牛之平安vacuum优化之路.pdf

    - 通过分析相关指标如`executes`（执行次数）、`total_time`（总耗时）、`elapse_time`（流逝时间）、`physical_reads`（物理读取）、`total_gets`（总获取）、`buffer_gets`（缓冲区获取），可以更具体地了解和定位...

    postgresql-9.4-A4

    根据提供的文件信息，我们可以提取并总结出关于 PostgreSQL 9.4 的关键知识点： ### PostgreSQL 9.4 简介 - **版本信息**：PostgreSQL 9.4 是一个数据库管理系统的重要版本，由 PostgreSQL 全球开发团队发布。...

    六级高频词汇

    Elapse - **含义**：（时间）过去；流逝。 - **例句**：A week elapsed before we received a response. (一个星期过去了，我们才收到回复。) #### 60. Installment - **含义**：分期付款；一部分。 - **例句**：...

    echo-nginx-module：Nginx模块，用于将“ echo”，“ sleep”，“ time”等功能引入Nginx的配置文件

    姓名 ngx_echo-为Nginx配置文件带来“ echo”，“ sleep”，“ time”，“ exec”和更多shell样式的东西。 该模块不随Nginx源一起分发。 请参阅。... echo "'hello world' takes about $echo_timer_elapse

    简单性能时间测试和日志信息

    首先，我们来看`time_elapse.h`文件，这通常是一个用于度量代码执行时间的工具。在C++中，性能测试通常是通过高精度的时间戳来完成的，例如使用`&lt;chrono&gt;`库。`std::chrono::high_resolution_clock`提供了一个计时器...

    android-elapsed-time:一个微型库，用于显示给定时间戳（适用于Android OS）的经过时间

    android经过时间 一个微型库，用于显示给定时间戳（适用于Android OS）的经过时间。例子添加依赖项将其添加到存储库末尾的root build.gradle中： allprojects { repositories { maven { url " ...

    rust-breezy-timer:微风计时器的存储库，这是您可以使用的最简单的计时器，无需担心性能

    微风计时器 :timer_clock: Breezy计时器的目标是成为一个非常简单的计时库，可以将其放入生产代码中而不会改变最终性能。 请参阅“以获取更多信息。...("foor")以来的ProcessTime ，并将其添加到计时器状态elapse

    语音卡文档

    Ex()、CheckRingEnd()、StartHangUpDetect()、HangUpDetect()、HangUp()、OffHookDetect()、OffHook()、DRec_OffHookDetect()、FeedRing()、FeedRealRing()、FeedPower()、StartTimer()、ElapseTime()、...

    apr-fuzz:尝试构建使用American Fuzzy Lop的仪表的模糊器，但使用Python

    前冲这是尝试构建使用... $ ./apr-fuzz /path/to/instrumented/bison /dev/stdinmax=1038 execs/s=457.37 execs=458 crashes=0 hangs=2 elapsed=a secondmax=1042 execs/s=511.20 execs=1024 crashes=0 hangs=3 elapse

    Systemc design with systemc

    SystemC提供了一系列的调试工具和命令，例如sc_start、sc_stop、sc_elapse等用于控制仿真的开始、暂停和时间推进。学习如何合理使用这些工具对于理解SystemC程序的执行流至关重要。 SystemC还支持多种不同的编译和...

Magicbox
Global site tag (gtag.js) - Google Analytics