摘要：

　　最近在开发项目时，异步接口需要前端渲染数据，js拼接太低级，必然要用模板插件。之前用过基于jQuery的和juicer等插件，考虑到以后公司项目上的统一，移动端和pc端上的统一，以及可维护性，所以就自己开发了一款模板插件amaze.js。

支持IE5+，chrome等流浏览器，支持for和if语法，以及表达式。

代码：https://github.com/baixuexiyang/amaze

例子：

<script src="../src/amaze.js"></script>
<div id="demo"></div>
<script id="test" type="text/amaze">           <div>负责人：{{ amaze.name }}</div>           <div>性别：{{ amaze.sex===1 ? '男': '女' }}</div>           <div>表达式：{{ 12/4 }}</div>           <ul>           {{@ for(var i = 0, _l = amaze.contact.length; i < _l; i++){ }}           {{@ if(amaze.contact[i].name === '张三') { }}           <li>           <span>姓名：{{ amaze.contact[i].name + '条件输出' }}</span>           <span>性别：{{ amaze.contact[i].sex===1 ? '男': '女' }}</span>           </li>           {{@ } else { }}           <li>           <span>姓名：{{ amaze.contact[i].name }}</span>           <span>城市：{{ amaze.contact[i].sex===1 ? '男': '女' }}</span>           </li>
        {{@ } }}           {{@ } }}           </ul>
</script>
<script>           var data = {           name: '测试',           sex: 1,           contact: [{name: '张三', sex: 1},           {name: '李四', sex: 2}]           };           var temp = document.getElementById('test');           amaze.template(temp).render(data, function(html){           document.getElementById('demo').innerHTML = html;           });
</script>

注意：

1、模板的type必须是'text/amaze'

2、模板可以使用jQuery获取，比如：amaze.template($('#temp'))

javascript模板插件amaze.js相关推荐

JavaScript模板引擎Template.js使用
文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法.template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块, ...
JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
模板插件aTpl.js新增功能
摘要: aTpl.js是一款模板插件,该插件支持ie5+,chrome等浏览器以及移动端浏览器,支持for和if语法,以及表达式.最近对aTpl.js模板插件增加了新的功能,支持字符串模板,同时增加了 ...
JavaScript模板引擎Template.js基本使用详解
template.js是一款JavaScript模板引擎,提供一套模板语法,简单好用,开发者可以写一个模板区块,每次传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.官网:简洁语法版 htt ...
JavaScript模板引擎Template.js
template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.https:// ...
高性能JavaScript模板引擎template.js原理解析
点击有惊喜 artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro ...
Javascript模板引擎mustache.js详解
进阶之路在于日积月累, 每天进步一点点-加油~ mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用. ...
自定义 Javascript 模板规则，打造轻量级模板引擎
直接贴 TemplateHelper 代码了: var TemplateHelper = {englishChars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",b ...
js模板引擎Template.js使用详解及免费下载template.js
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
javascript功能插件大集合前端常用插件 js常用插件
包管理器管理着 JavaScript 库,并提供读取和打包它们的工具. npm:npm 是 JavaScript 的包管理器.官网 Bower:一个 web 应用的包管理器.官网 component ...

javascript模板插件amaze.js

摘要：

例子：

注意：

javascript模板插件amaze.js相关推荐

最新文章

热门文章