artTemplate模板引擎的使用

更新日期: 2019-03-14阅读: 2314标签: 模板

artTemplate是腾讯开源的前端模板框架,和mustache,handlerbars类似,在web项目中可以很方便的使用,上手快,如果用过mustache,那么几乎可以快速切换到template框架上来。  


artTemplate特性

  • 拥有接近 JavaScript 渲染极限的的性能
  • 调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(webpack Loader)
  • 支持压缩输出页面中的 htmlcss、JS 代码
  • 支持 Express、Koa、Webpack
  • 支持模板继承与子模板
  • 兼容EJS、Underscore、LoDash 模板语法
  • 模板编译后的代码支持在严格模式下运行
  • 支持 JavaScript 语句与模板语法混合书写
  • 支持自定义模板的语法解析规则
  • 浏览器版本仅 6KB 大小

1.简单的json数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/template.js" ></script>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/html" id="div">
            <h1>{{name}}</h1>
            <h2>{{age}}</h2>
        </script>
        <script type="text/javascript">
            var data = {
                name:"geekWeb",
                age:22
            }
            var html = template('div',data);
            document.getElementById("container").innerHTML = html;
        </script>
    </body>
</html>


2.带数组的json数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/template.js" ></script>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/html" id="div">
            <h1>{{name}}</h1>
            <ul>
                {{each lang as value i}}
                <li>语言{{i+1}}:{{value}}</li>
                {{/each}}
            </ul>
        </script>
        <script type="text/javascript">
            var data = {
                name:"前端语言",
                lang:['html','css','js']
            }
            var html = template('div',data);
            document.getElementById("container").innerHTML = html;
        </script>
    </body>
</html>


3.数组中包含对象的json数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/template.js" ></script>
    </head>
    <body>
        <div id="container"></div>
        <script type="text/html" id="div">
            <h1>{{name}}</h1>
            <ul>
                {{each lang}}
                <li>语言:{{$value.title}} 定义:{{$value.add}}</li>
                {{/each}}
            </ul>
        </script>
        <script type="text/javascript">
            var data = {
                name:"前端语言",
                lang:[{
                    title:"html",
                    add:"超文本标记语言"
                },{
                    title:"css",
                    add:"层叠样式表"
                },{
                    title:"javaScript",
                    add:"添加动态特效"
                }]
            }
            var html = template('div',data);
            document.getElementById("container").innerHTML = html;
        </script>
    </body>
</html>


一个ajax+artTemplate+servlet+fastjson的综合小实例

前台:


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="template.js"></script>
    <script>
      //创建一个XMLHttpRequest类型的对象ajaxReq
      var ajaxReq = new XMLHttpRequest();
      window.onload = function() {
        //用ajaxReq打开一个连接
        ajaxReq.open("get","ajax.do",true);
        //发送请求给服务器
        ajaxReq.send(null);
        //设置一个回调函数,用来处理服务器的回应。
        ajaxReq.onreadystatechange = onReceive;
      }

      function onReceive() {
        if (ajaxReq.readyState === 4) {
          if (ajaxReq.status === 200) {
            //响应成功,做一些事情
            var jsonObj = JSON.parse(ajaxReq.responseText);//不要忘记将json字符串转化为json对象
            var html = template('test', jsonObj);
            document.getElementById('content').innerHTML = html;
          } else {
            //响应失败,做一些事情
          }
        }
      };
    </script>
  </head>
  <body>
  <div id="content"></div>

  <script id="test" type="text/html">
    <table>
      <thead>
      <td>姓名</td>
      <td>年龄</td>
      </thead>
      {{each list as value i}}
      <tr>
        <td>{{value.name}}</td>
        <td>{{value.age}}</td>
      </tr>
      {{/each}}
    </table>
  </script>
  </body>
</html>

后台:

public class Person {
    public String name;
    public int    age;
}

public class Persons {
    private List<Person> list;

    public List<Person> getList() {
        return list;
    }

    public void setList(List<Person> list) {
        this.list = list;
    }
}

import com.alibaba.fastjson.JSON;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by ttc on 17-5-26.
 */
@WebServlet(name = "Servlet",urlPatterns = "/ajax.do")
public class Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Person person = new Person();
        person.name = "huochai";
        person.age = 29;

        String strJson = JSON.toJSONString(person);
        System.out.println(strJson);

        Person person2 = new Person();
        person2.name = "huochai2";
        person2.age = 292;

        List<Person> lst = new ArrayList<Person>();
        lst.add(person);
        lst.add(person2);

        Persons persons = new Persons();
        persons.setList(lst);

        String strJson2 = JSON.toJSONString(persons);
        System.out.println(strJson2);

        PrintWriter pw = response.getWriter();
        pw.println(strJson2);
    }
}

链接: https://www.fly63.com/article/detial/2369

前端模板引擎jsrender的实用入门教程

下一代Jquery模板JsRender。jsrender官网号称简单直观、强大轻快可扩展。压缩体积也只有8.9kb,可以单独在浏览器或node中使用,也可以配合jQuery使用。

EJS实例教程详解_ejs模板引擎的使用

ejs是一个款简单的纯js模板引擎,其主要作用是:用来从JSON数据中生成HTML字符串。

Vue模板语法中数据绑定

们通过 vue 对象修改数据可以直接影响到 DOM 元素,但是,如果直接修改 DOM 元素,却不会影响到 vue 对象的数据;我们把这种现象称为 单向数据绑定 ;通过 v-model 指令展示表单数据,此时就完成了 双向数据绑定

Bootstrap后台管理模板有哪些?

在开发项目中,后台管理因为面向群体相对比较固定,使用Bootstrap后台模板可以让后端开发很轻松的就展现给客户一个响应式的后台,节约前端开发的时间。下面给大家分享一下最值得拥有的免费Bootstrap后台管理模板

如何选择 Web 前端模板引擎?

模板引擎负责组装数据,以另外一种形式或外观展现数据。浏览器中的页面是 Web 模板引擎最终的展现。无论你是否直接使用模板引擎,Web 模板一直都在,不在前端就在后端,它的出现甚至可以追溯到超文本标记语言 HTML 标准正式确立之前。

我来聊聊面向模板的前端开发

在软件开发中,研发效率永远是开发人员不断追求的主题之一。于公司而言,在竞争激烈的互联网行业中,产出得快和慢也许就决定着公司的生死存亡;于个人而言,效率高了就可以少加班,多出时间去提升自己、发展爱好、陪伴家人,工作、生活两不误

Vue模板语法、事件和表单使用

文本绑定,两个大括号,中间加上data里面的数据,message里面不仅可以是变量还可以是表达式;JS表达式(计算、拼接、只能是单个表达式)插入HTML代码(慎用!防止XSS攻击 ),我们可以直接在data里面定义html代码

面向模板的前端开发

在软件开发中,研发效率永远是开发人员不断追求的主题之一。于公司而言,在竞争激烈的互联网行业中,产出得快和慢也许就决定着公司的生死存亡;于个人而言,效率高了就可以少加班,多出时间去提升自己

Vue模板语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

PHP框架中JS优雅获取模板变量的方式

在使用PHP框架(本文以ThinkPHP为例)进行页面开发的时候,经常遇到需要将控制器方法中的模板变量代入到页面JS内操作的情况,常见的方式如:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!