高性能双端js模板---simplite
simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染,渲染性能达到引擎的极限。
- 渲染性能十分突出。
- 支持浏览器端和node服务器端模板渲染。
- 它简单易用,默认采用jsp语法风格来编写逻辑部分的代码,当然,如果你想定制其他标签,也是可以很方便的配置。
- 它采用原生js语法,没有给使用者带来学习上的成本,当然,采用原生js能够进一步提高渲染的性能。
- 可以动态导入子模板,当然,子模板可以多层嵌套,同时支持为子模板传入指定的数据集来渲染子模板,非常实用的功能。
- 可以支持松散的js语法格式,如果你忘记写分号,没关系,模板会帮你处理。
- 像大部分模板一样,可以设置属性转义输出。
- 支持对数据的filter处理,可以为模板注入自己的filter。
下面来看下它和其他流行的模板做的性能对比图:(你也可以自己下载git的代码,运行测试)
编写模板:
1 <script type="text/html" id="rootTemplate">
2 <ul>
3 <%
4 for (var i = 0; i < _this.length; i++) {
5 %>
6 <%
7 var obj = _this[i];
8 %>
9 <li><%=obj.name%></li>
10 <%
11 if (obj.id % 2) {
12 include(subTemplate, obj);
13 }
14 %>
15 <%
16 }
17 %>
18 <ul>
19 </script>
或者可以把逻辑部分合并
1 <script type="text/html" id="rootTemplate">
2 <ul>
3 <%for(var i=0;i<_this.length;i++){
4 var obj = _this[i];
5 %>
6 <li><%=obj.name%></li>
7 <%
8 if (obj.id % 2) {
9 include(subTemplate, obj);
10 }
11 }
12 %>
13 <ul>
14 </script>
子模板:
1 <script type="text/html" id="subTemplate">
2 <li><%=_this.id%>----<%=_this.name%></li>
3 </script>
填充数据:
1 var data = [
2 {
3 id: 1,
4 name: '小学'
5 },
6 {
7 id: 2,
8 name: '中学'
9 },
10 {
11 id: 3,
12 name: '大学'
13 }
14 ];
使用方式:
1:调用静态方法
1 var compile = Simplite.compile;
2 var render = compile(templateStr);
3 var htmlStr = render(data);
2:实例化方式
1 var template = new Simplite({
2 target : 'insertTemplateNodeId',
3 template : 'rootTemplate'
4 });
5 template.beforerender = function(data) {
6 console.log(data)
7 };
8 template.afterrender = function(node) {
9 console.log(node)
10 };
11 template.render(data);
通过上面的代码可见,默认配置下,可以在模板中直接使用“_this”来获取对传入数据的引用,因为咱们传入的是数组,所以可以直接遍历这个数据,来渲染出li元素。在模板中还有对name数据展示和子模板导入的使用介绍,如果name需要转义,可以使用<%=#obj.name%>来指定;例子中,子模板的导入是动态的,根据if的条件来导入,在导入的时候,也指定了子模板使用的数据,这也是这个子模板比较好用的地方,可以只传入父模板中的部分数据到子模板,若没有指定传入的数据,默认是把父模板的数据集传入子模板。从上面的子模板定义的获取属性方式_this.id,可以看到,_this代表的就是父模板传入的数据集。如果你不喜欢默认的模板风格,你也可以定制自己的标签,只要你配置如下几个属性即可:
1 // 默认逻辑开始标签
2 Simplite.logicOpenTag = '<%';
3 // 默认逻辑闭合标签
4 Simplite.logicCloseTag = '%>';
5 // 默认属性开始标签
6 Simplite.attrOpenTag = '<%';
7 // 默认属性闭合标签
8 Simplite.attrCloseTag = '%>';
如果你也不喜欢使用_this来获取当前数据集,那么你也可以定制它: Simplite.dataKey = '_this';
渲染出来的效果:
支持对数据的filter处理,首先需要通过调用addFilter进行filter的注册,然后就可以在模板中使用filter(name, data1, data2,...)的处理了,例子如下:
1 Simplite.addFilter('abc', function (name) {
2 return '<span style="color: blue;">' + name + '</span>';
3 });
模板:
<script type="text/html" id="oneArgTemplate">
<li>
测试没有传递数据的情况:<% filter('abc', _this);%>
</li>
</script>
效果:
欢迎访问我的git地址,也欢迎一起为simplite的明天添砖加瓦,如果有什么好的代码可以贡献,本人不甚感激。
高性能双端js模板---simplite的更多相关文章
- 高性能双端js模板
高性能双端js模板(新增filter)---simplite simplite是一款js实现的模板引擎,它能够完成浏览器端js模版和node服务器端js模板的数据渲染. 渲染性能十分突出. 支持浏览器 ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- 关于双端队列 deque 模板 && 滑动窗口 (自出)
嗯... deque 即为双端队列,是c++语言中STL库中提供的一个东西,其功能比队列更强大,可以从队列的头与尾进行操作... 但是它的操作与队列十分相似,详见代码1: 1 #include < ...
- SPOJ - ADALIST,双端队列入门模板!
ADALIST - Ada and List 这道题时限6.5s,激动人心啊,好多人STL一顿乱写AC,哈哈,如果熟悉双端队列的话这道题其实是很水的. 题意:n个数的数列,然后接下来Q次操作,每次可以 ...
- 8、泛型程序设计与c++标准模板库2.3双端队列容器
双端队列容器是一种放松了访问权限的队列.除了从队列的首部和尾部访问元素外,标准的双端队列也支持通过使用下标操作符"[]"进行直接访问. 它提供了直接访问和顺序访问方法.其头文件为& ...
- js 模板引擎 jade使用语法
Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持. 功能 · 客户端支持 · 超强的可读性 · 灵活易用的缩进 · 块扩展 ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战:异步实现数据双端渲染
回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- 双端队列(单调队列)poj2823 区间最小值(RMQ也可以)
Sliding Window Time Limit: 12000MS Memory Limit: 65536K Total Submissions: 41844 Accepted: 12384 ...
随机推荐
- linux 下修改 apache 启动的所属用户和组
apache默认启动的用户和组是www-data,所以有些时候,就会涉及到权限问题,没有权限在执行目录下创建或者读写文件.改变用户和组的方法其实很简单: 1.进入到apache默认安装路径/etc/a ...
- Linux-2.6.32内核编译流量计数器nfacct
最近一直想看到一本书<一个Jiegeng华>.而技术不依赖书.但是,这并不表示我IT技术没有兴趣.事实证明,,当我无法理解的沧桑.肮脏的领导者无法理解的心理.自我可惜无法理解它处处感受到脏 ...
- ios新开发语言swift 新手教程
http://gashero.iteye.com/blog/2075324 视频教程:http://edu.51cto.com/lesson/id-26464.html
- 佛祖保佑,从来没有Bug
<span style="font-size:14px;">// _ooOoo_ // o8888888o // 88" . "88 // (| - ...
- 【Unity 3D】学习笔记三十五:游戏实例——摄像机切换镜头
摄像机切换镜头 在游戏中常常会切换摄像机来观察某一个游戏对象,能够说.在3D游戏开发中,摄像头的切换是不可或缺的. 这次我们学习总结下摄像机怎么切换镜头. 代码: private var Camera ...
- SharePoint管理中心来配置资源限制(大名单)
SharePoint管理中心来配置资源限制(大名单) 名单SharePoint核心.SharePoint一切的一切都是列表. 我可以说SharePoint内容为驱动的列表. 之前版本号的SharePo ...
- chrome扩展第三方浏览器下载安装
1.使用其他浏览器打开谷歌应用市场,复制扩展详情地址url 2. 粘贴到:http://chrome-extension-downloader.com/中进行扩展的下载. 3. 拖拽到chrome e ...
- js 通信
js 页面间的通信 看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭 ...
- Mac OS X中报:java.io.UnixFileSystem.createFileExclusively(Native Method)的简单原因
这个博客太简单了!想到可能有其它朋友也遇到这个问题,就记录一下. 今天把一个之前在Windows上的Java项目放到Mac OS X上执行,本来认为应该非常easy的事情,结果还是报: Excepti ...
- Facebook的ATOM Editor的底层Electron
Facebook的ATOM Editor的底层Electron 开源牛人 zcbenz 事情是这样的,微软推出了Visual Studio Code,我很好奇他怎么做跨平台的,所以就找找资料,在他的网 ...