artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现。

编写模板

使用一个type="text/html"script标签存放模板:
    
    <script id="test" type="text/html">
    <h1><%=title%></h1>
    <ul>
        <%for(i = 0; i < list.length; i ++) {%>
            <li>条目内容 <%=i + 1%> :<%=list[i]%></li>
        <%}%>
    </ul>
    </script>
    
模板逻辑语法开始与结束的界定符号为&lt;% 与%&gt;,若&lt;%后面紧跟=号则输出变量内容。

渲染模板

template.render(id, data)
    
    var data = {
        title: '标签',
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = template.render('test', data);
    document.getElementById('content').innerHTML = html;

artTemplate 介绍的更多相关文章

  1. lodop+art-template实现web端漂亮的小票样式打印

    一. 现状 由于之前采用Lodop打印控件(商业版付费,可以使用免费版 但是会有水印)去打印小票,是一行一行的打印,但是不满足UI给到复杂布局的小票样式,所以得重新考虑如何来实现. 二. 介绍 art ...

  2. template.js的介绍

    artTemplate 介绍 artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还 ...

  3. 高性能JavaScript模板引擎原理解析

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...

  4. artemplate模板

    artTemplate 介绍 最近使用了一款模板,学习成本比较低,性能也不错.觉得很好用,所以推荐给大家. artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了 ...

  5. 高性能JavaScript模板引擎实现原理详解

    这篇文章主要介绍了JavaScript模板引擎实现原理详解,本文着重讲解artTemplate模板的实现原理,它采用预编译方式让性能有了质的飞跃,是其它知名模板引擎的25.32 倍,需要的朋友可以参考 ...

  6. 后台模板引擎ejs与前台模板引擎artTemplate的简单介绍

    动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的.制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ej ...

  7. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  8. artTemplate模板引擎学习实战

    在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

  9. artTemplate 自动化编译之tmod

    一.背景 前端小白的成长历程,一般都会经历html模板的一些问题,jquery template/artTemplate/yayaTemplate等常见的模板使用,这里就不作介绍了. 先谈谈我们为什么 ...

随机推荐

  1. Android 模拟器 获得 root权限

    启动一个模拟器,开始-运行-输入cmd,打开dos,依次输入 adb shell mount -o remount,rw -t yaffs2 /dev/block/mtdblock3 /system ...

  2. 删除数据库数据,自增id清理

    方法一:Delete Form 表名 方法二:TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 D ...

  3. 原生DOM探究 -- NodeList v.s. HTMLCollection

    涉及获取元素的主要API 在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard): Node及对应集合NodeList Element(继承Node)及对应集 ...

  4. CLR via C#深解笔记三 - 基元类型、引用类型和值类型 | 类型和成员基础 | 常量和字段

    编程语言的基元类型   某些数据类型如此常用,以至于许多编译器允许代码以简化的语法来操纵它们. System.Int32 a = new System.Int32();  // a = 0 a = 1 ...

  5. 电商大促准备流程v2

    1 概述 对于电商企业而言,每年都会有几次大的促销活动,像双十一.店庆等,对于第一次参加这个活动的新手,难免会有些没有头绪,因而将自己参加双十一.双十二活动中的过程心得进行下总结,一方面供以后工作中继 ...

  6. 在ubuntu下配置apache运行python脚本

    2008-12-05    常用的简单命令 sudo apt-get remove --purge apache apache2 (彻底删除)   sudo /etc/init.d/apache2 r ...

  7. Activity not started, its current task has been brought to the front

    运行错误:Activity not started, its current task has been brought to the front . 原因分析:因为你的模拟器中还有东西在运行,也就是 ...

  8. java实现二叉树查找树

    二叉树(binary)是一种特殊的树.二叉树的每个节点最多只能有2个子节点: 二叉树 由于二叉树的子节点数目确定,所以可以直接采用上图方式在内存中实现.每个节点有一个左子节点(left childre ...

  9. Unity3D 敌人AI 和 动画( Animator )系统的实例讲解

    在这个实例中,我们要做一些敌人AI的简单实现,其中自动跟随和动画是重点,我们要达到的目标如下: 1.敌人能够自动跟随主角 2.敌人模型一共有四个动作:Idle(空闲) Run(奔跑) Attack(攻 ...

  10. Appium移动自动化测试(三)--安装Android模拟器

    当Android SDK安装完成之后,并不意味着已经装好了安装模拟器.Android系统有多个版本,所以我们需要选择一个版本进行安装. 第三节  安装Android 模拟器 我这里以Android 4 ...