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

 

相关文章
|
15天前
|
JSON 前端开发 JavaScript
|
2天前
|
Web App开发 JavaScript 前端开发
JavaScript 模板字符串
JavaScript 模板字符串
9 3
|
17天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
38 1
|
3天前
|
Web App开发 JavaScript 前端开发
JavaScript 模板字符串
JavaScript 模板字符串
7 0
|
11天前
|
Java 数据库连接 数据库
从零到精通:揭秘 Hibernate 构建持久层服务的全过程,你离数据持久化大师还有多远?
【8月更文挑战第31天】本文详细介绍了如何从零开始使用 Hibernate 构建一个持久层服务。首先,通过在 Maven 项目中添加必要的依赖,确保项目具备使用 Hibernate 的条件。接着,配置 `hibernate.cfg.xml` 文件以连接 MySQL 数据库,并设置了基本属性。然后定义了一个简单的 `User` 实体类及其映射关系。此外,还创建了一个 `HibernateUtil` 工具类来管理 `SessionFactory`。
24 0
|
13天前
|
缓存 JavaScript 前端开发
Vue.js与JavaScript性能优化终极揭秘:掌握这些技巧,让你的Web应用飞一般地流畅!
【8月更文挑战第30天】随着前端应用复杂度的增加,性能优化变得至关重要。本文深入探讨了如何利用Vue.js和JavaScript实现高效的应用性能。主要内容包括:优化组件设计以减少不必要的渲染,采用异步组件与懒加载技术加速应用启动,利用虚拟滚动和分页处理大数据集,改进Vuex使用方式以及合理运用浏览器缓存等策略。通过具体示例和最佳实践,帮助开发者充分挖掘Vue.js潜力,打造高性能的前端应用。
28 0
|
13天前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
11 0
|
13天前
|
JavaScript 前端开发 API
揭秘Vue.js与JavaScript融合的神秘力量:如何一键解锁高效响应式Web应用的终极秘籍?
【8月更文挑战第30天】随着前端技术的发展,Vue.js凭借其轻量级、易上手和高度响应式的特性,在前端开发领域迅速崛起,成为构建现代Web应用的首选框架之一。Vue.js与JavaScript深度融合,使开发者能高效灵活地打造美观且功能强大的应用。本文将作为实战指南,带您深入了解Vue.js与JavaScript结合的奥秘,揭示构建高效响应式Web应用的秘籍。从Vue.js的基础开始,逐步介绍如何利用其数据驱动视图的特点,结合JavaScript的高级特性,如定时器、Promise、async/await等,提升应用的交互性和用户体验。
9 0
|
13天前
|
JavaScript 前端开发 测试技术
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
|
自然语言处理 JavaScript 前端开发
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
145 0
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)