javascript模板插件amaze.js

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

摘要:

  最近在开发项目时,异步接口需要前端渲染数据,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'))

 

相关文章
|
17天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
35 5
|
1月前
|
人工智能 JavaScript 前端开发
使用Node.js模拟执行JavaScript
使用Node.js模拟执行JavaScript
|
1月前
|
消息中间件 JavaScript 前端开发
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
42 1
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
93 1
|
17天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
28 0
|
28天前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
45 0
|
28天前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
28天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
16 0
|
1月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
19 0
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)