下载地址

<!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. 基于openssl搭建https服务器

    1. 搭建web环境 我这里使用源码编译安装方式安装httpd.详情可以参加我的一篇博客http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_linux_1 ...

  2. Linux软件包管理之源码包、脚本安装包

    目录 1.源码包和RPM包的区别 RPM包和源码包默认安装位置: 由于安装位置不同带来的影响 2.源码包安装 ①.安装准备 ②.安装注意事项 ③.安装源码包 3.源码包卸载 4.脚本安装包 5.总结 ...

  3. （转）Spring4.0：@Configuration

    从Spring3.0,@Configuration用于定义配置类,可替换xml配置文件,被注解的类内部包含有一个或者多个被@Bean注解的方法,这些方法将会被AnnotationConfigAppli ...

  4. MyBatis源码解析（一）——执行流程

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6603926.html 一.MyBatis简介 MyBatis框架是一种轻量级的ORM框架, ...

  5. Java设计模式学习记录-模板方法模式

    前言 模板方法模式,定义一个操作中算法的骨架,而将一些步骤延迟到子类中.使得子类可以不改变一个算法的结构即可重新定义该算法的某些特定步骤. 模板方法模式 概念介绍 模板方法模式,其实是很好理解的,具体 ...

  6. 如何快速使用Access实现一个登录验证界面？

    大三上学期期末总结,嗯,没错,上学期,写在新学期开始,hhhh. 上学期末的时候信管班的一个同学问我会不会Access,能不能它实现一个登录验证界面,说实话,之前对Access只是有所耳闻,随便敷衍了 ...

  7. 用 pyinstaller 打包含xpinyin 库的Python程序

      在文章用 pyinstaller 打包含有 pinyin 库的程序中,给出了如何使用pyinstaller 打包含xpinyin 库的Python程序的方法,能生成可运行的exe文件.本文将会给出 ...

  8. tomcat开启自启动

    linux方式 #!/bin/bash #chkconfig: #description: Starts and Stops the Tomcat daemon. #by benjamin ##### ...

  9. [angularjs] angularjs系列笔记（三）模型

    ng-model指令 ng-model可以将输入域的值与AngularJs的变量绑定 双向绑定 当修改输入域的值时候,AngularJs属性的值也将修改 <div ng-app="Ho ...

  10. CSS用法总结(持续更新)

    一.html,body{height:100%} 解决了容器高度不足(容器高度由子元素高度决定,而%按照父元素的百分比),无法用%布局页面的问题 把html和body的高度设置为浏览器高度,此时会出现 ...