发布一个开源极致的javascript模板引擎tpl.js
tpl.js(大家直接去https://git.oschina.net/tianqiq/tpl.js这个上面看)
简介
tpl.js是一个比较极致(极小,极快,极简单)的js模板引擎,可以在各种js环境中使用。
特性
1. 使用js作为模板语言,几乎无学习成本
2. 小巧,速度快到极致
3. 极简的语法,模板书写非常流畅
4. mit开源,无限制
语法说明
简述
tpl.js中模板语法中以行为单一,分为js行语句,和输出行语句。顾名思义,js行语句是编译时候会当做js执行的语句,
而输出行语句,则是会输出为html。
具体语法
1. 以行为单位,每一行作为语句块,并去掉行前后空白字符
2. 如果行不是以<(左尖括号)开头,则视为js,如果不是,则视为该行为输出行
3. 如果行以!(叹号)开头,也视该行为输出行。如 !aa
4. 在输出行中通过@{exp}这样的表达式作为js变量输出。@{item.name}
5. 如果exp以.(点)开头,则自动解析为上个exp表达式中最后一个点的前面部分。如@{.name},将自动解析为@{item.name}
6. 如果4中exp无特殊字符,如"、'、'<、 >等。则可以省略{}中括号。如@.item.name @.name @func(item) @list[i]
7. 如果行以!!2个叹号开头,则视该行为纯输出行,不解析@表达式,原样输出。如!!abc@def
8. 如果行中出现@又不想要tpl.js解析,则通过\转义。如\@abc
示例

API
tpl.html(tplText,daata)
通过传递tplText模板,和数据data直接获取模板生成的html代码。
tpl.func(tplText)
将tplText编译为一个函数,该函数参数在模板中通过tplData引用。 调用后返回模板编译后的html代码。
tpl.render()
自动渲染整个网页中的<script type="tpl">标签中的模板。并能保证html dom中原有的结构。相当于替换掉了原来的<script type="tpl">标签
最后
上面的文档包括了tpl.js所有的语法了,欢迎大家测试与反馈。
源码地址:https://git.oschina.net/tianqiq/tpl.js
测试地址:http://runjs.cn/code/wlztch4d
真的无语,上面文档里面```html
折腾半天,也不知道怎么搞。大家直接去https://git.oschina.net/tianqiq/tpl.js这个上面看吧。哎...
发布一个开源极致的javascript模板引擎tpl.js的更多相关文章
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引 ...
- 探究Javascript模板引擎mustache.js使用方法
这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎?
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- JavaScript模板引擎artTemplate.js——如何引入模板引擎?
artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...
- JavaScript模板引擎artTemplate.js——结语
再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是 ...
- javascript模板引擎template.js使用
到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中 ...
- JavaScript模板引擎artTemplate.js——template.compile()方法
template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...
- JavaScript模板引擎artTemplate.js——template()方法
template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染 ...
随机推荐
- Chrome console命令整理
console.dir (这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等 在页面右击选择 审查元素 ,然后在弹出来 ...
- FreeBSD 查看硬件信息
systat 能实时查看各种信息 systat -pigs 默认值CPU systat -iostat 硬盘IO systat -swap 交换分区 systat -mbufs 网络缓冲区 systa ...
- Windows Phone 十四、磁贴通知
磁贴(Tile) Windows Phone 磁贴种类: 小尺寸 SmallLogo:71x71: Square71x71 中等 Logo:150x150: Square150x150 宽 WideL ...
- Json_异常_net.sf.json.JSONException: JSONObject["solution"] not found.
net.sf.json.JSONException: JSONObject["solution"] not found. 没有这个元素造成的. 问题代码: JSONObject j ...
- NoSQL数据库笔谈(转)
NoSQL数据库笔谈 databases , appdir , node , paper颜开 , v0.2 , 2010.2 序 思想篇 CAP 最终一致性 变体 BASE 其他 I/O的五分钟法则 ...
- logstash实战
官网上的文档没有更新,估计快商业化了,elasticsearch和kibana 都内嵌了不用再下载,可以参看1.3.3的,除了打个包外没啥区别 http://logstash.net/docs/1.3 ...
- iOS的生命周期
iOS应用程序一般都是由自己编写的代码和系统框架组成.系统框架提供了一些基本的infrastructure给APP来运行,而开发者则自己编写代码定制APP的外观和行为,了解iOS infrastruc ...
- MVC5+EF6 入门完整教程
MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用 MVC5+EF6 入门完整教程10:多对多关联表更新&使用原生SQL@20150521 MVC5+EF6 入门完整教程9:多表 ...
- Python—redis
一.redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sor ...
- webpack配置技巧--路径
resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], ali ...