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

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

JavaScript模板引擎 - Elapse相关推荐

【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
13 款 JavaScript 模板引擎
JavaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
高性能JavaScript模板引擎原理解析
来源:http://cdc.tencent.com/?p=5723 随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascr ...
前端模板引擎artTemplate---高性能JavaScript模板引擎
关于artTemplate模板引擎的详细原理请移步高性能JavaScript模板引擎原理解析,本文只探讨如何使用.初学前端的人一般对于绑定数据都是使用原生js或者jquery来拼接字符串,此为hard ...
JavaScript模板引擎Template.js基本使用详解
template.js是一款JavaScript模板引擎,提供一套模板语法,简单好用,开发者可以写一个模板区块,每次传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.官网:简洁语法版 htt ...
基于jQuery开发的javascript模板引擎-jTemplates
这里介绍一个基于jQuery开发的模板引擎. jTemplates目前最新的版本是0.7.8,由tPython开发.官方网站:http://jtemplates.tpython.com 两个附件,一个 ...
前端javaScript模板引擎之ArtTemplate
一.简介 ArtTemplate是腾讯开发的一款使用方便.性能卓越javascript模板引擎,其渲染效率极其快.ArtTemplate的库分为两种,一个是template.js,这个是简单的语法版本 ...
JavaScript模板引擎Template.js
template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.https:// ...
if laytpl 非_laytpl : 一款非常轻量的JavaScript模板引擎
//假设你得到了这么一段数据 var data = { title: '前端圈', intro: '一群码js的骚年,幻想改变世界,却被世界改变.', list: [{name: '贤心', city ...

JavaScript模板引擎 - Elapse

JavaScript模板引擎 - Elapse相关推荐

最新文章

热门文章