下载地址

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="js/template.js"></script>

</head>

<body>

<div id="Content"></div>

<script id="test" type="text/html">

    <h1>{{title}}</h1>

    <ul>

        {{each list as value i}}

        <li>索引 {{i + 1}} ：{{value}}</li>

        {{/each}}

    </ul>

</script>

<script>

    var data = {

        title: '标签',

        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

    };

    var html = template('test', data);

    document.getElementById('Content').innerHTML = html;

</script>

</body>

</html>

完成后效果

高性能JavaScript模板引擎 artTemplate的更多相关文章

  1. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

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

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

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

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

  4. JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  5. JavaScript模板引擎artTemplate.js——如何引入模板引擎？

    artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...

  6. JavaScript模板引擎artTemplate.js——结语

    再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是 ...

  7. JavaScript模板引擎artTemplate.js——是否编码输出html字符

    template.config(name, value)方法用于更改引擎的默认配置. 其中字段escape,类型为boolean,默认为true. 首先,我们不修改配置信息输出一段带有html标签的字 ...

  8. JavaScript模板引擎artTemplate.js——引入子模板

    之前的例子都是单一结构的对象,如果遇到复杂对象结构,我们可以通过引入子模板来实现html的渲染. 依旧以之前的数据作为例子: <div id="content">< ...

  9. JavaScript模板引擎artTemplate.js——两种方法实现性别的判定

    template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...

随机推荐

  1. 【Jquery系列】之Jquery 选择器

    1   概述 本篇文章为穿插文章,ASP.NET MVC系列目前写了如下几篇: 详解google Chrome浏览器(理论篇) 详解Google Chrome浏览器(操作篇)(上) 详解Google ...

  2. Perl导入代码文件

    从函数复用开始:eval和do执行perl文件 当我们定义了一个功能比较通用的子程序,比如获取数值的绝对值.想要到处使用这个子程序,就得不断复制.粘贴这段绝对值函数的定义文本.显然,这是不太理想的方式 ...

  3. python变量和变量赋值的几种形式

    动态类型的语言 python是动态类型的语言,不需要声明变量的类型. 实际上,python中的变量仅仅只是用来保存一个数据对象的地址.无论是什么数据对象,在内存中创建好数据对象之后,都只是把它的地址保 ...

  4. Html5游戏开发-图形与动画（一）

    最近研究了一下出来了很久的HTML5,总结了一下,准备来个系列,文中也许有很多问题,欢迎大家指正. Canvas介绍 canvas用于在网页中绘制图形的一个元素,具体内容请查看 -> HTML5 ...

  5. 杭电ACM2001--计算两点间的距离

    计算两点间的距离 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  6. C#窗体加载和控件加载不同步导致控件闪烁

    窗体加载和控件加载不同步导致的控件闪烁现象:// 代码块加在父窗体中的任意位置,解决窗体加载和控件加载不同步导致的控件闪烁问题        protected override CreatePara ...

  7. [android] listview入门

    Listview组件非常重要,4分之一的时间都是在搞这个,还是通过上一节的数据库,写个for循环,插入50条数据. 先使用笨方法显示数据,根布局LinearLayout 定义一个id,在activit ...

  8. js动画 Css提供的运动 js提供的运动

    1.     动画 (1)      Css样式提供了运动 过渡的属性transition  从一种情况到另一种情况叫过渡 Transition:attr  time  linear  delay: ...

  9. Java马士兵高并发编程视频学习笔记（二）

    1.ReentrantLock的简单使用 Reentrant n.再进入 ReentrantLock 一个可重入互斥Lock具有与使用synchronized方法和语句访问的隐式监视锁相同的基本行为和 ...

  10. 洛谷P3379 【模板】最近公共祖先（LCA）（树链剖分）

    题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...