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'))

 

相关文章
|
5天前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
5天前
|
JavaScript 前端开发
JavaScript基础&实战 JS中正则表达式的使用
这篇文章介绍了JavaScript中正则表达式的使用,包括正则表达式的创建、匹配模式、字符串匹配、拆分、搜索、匹配和替换等方法,并通过示例代码展示了如何应用这些技术。
JavaScript基础&实战 JS中正则表达式的使用
|
5天前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
5天前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
5天前
|
JavaScript 前端开发
JavaScript基础&实战(3)js中的流程控制语句、条件分支语句、for循环、while循环
这篇文章讲解了JavaScript中的流程控制语句,包括基本的if条件判断、弹窗提示输入、switch条件分支语句、while和do...while循环以及for循环的使用和示例。
JavaScript基础&实战(3)js中的流程控制语句、条件分支语句、for循环、while循环
|
5天前
|
JavaScript 前端开发
JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
这篇文章详细介绍了JavaScript中的强制类型转换、运算符(包括算术、逻辑、条件、赋值和关系运算符)的使用方法和优先级规则。
JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
|
20天前
|
SQL 存储 JSON
AlaSQL.js:用SQL解锁JavaScript数据操作的魔法
AlaSQL.js:用SQL解锁JavaScript数据操作的魔法
19 1
|
5天前
|
JavaScript 前端开发
JavaScript中使用模板字符串拼接和使用字符串拼接有什么区别?
JavaScript中使用模板字符串拼接和使用字符串拼接有什么区别?
|
29天前
|
JavaScript 前端开发 API
Chrome插件实现问题之 content_script.js能做什么
Chrome插件实现问题之 content_script.js能做什么
|
1月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。

热门文章

最新文章