Loading

AJAX里使用模板引擎

一、概述：

  • 处理响应数据渲染可以使用模板引擎（实际上就是一个API，目的是更容易的将数据渲染到HTML中）
  • 目前市面上有许多模板引擎，可以参考
  • 推荐使用artTemplate，它采用作用域预声明的技术来优化模板渲染速度，同时支持 NodeJS 和浏览器。

二、模板引擎步骤：

①选择一个模板引擎，下载模板引擎文件

②引入到页面中

③准备一个模板

④准备一个数据

⑤通过模板引擎的js提供的一个函数将模板和数据整合得到渲染结果HTML

⑥将渲染结果的HTML设置到默认元素的innerHTML中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="p"></p>
    <script src="lib/template-web.js"></script>
    <script type="text/template" id="tpl">
        我叫 {{name}}
        我来自 {{provices}}
        我的爱好是 {{each hobbies}} {{$value}} {{/each}} 
    </script>
    <script>
        var data={
            name:'eric',
            provices:'江西',
            hobbies:['代码','运动','电脑游戏']
        }
        var ret=template('tpl',data);
        var p=document.getElementById('p');
        p.innerHTML=ret;
    </script>
</body>
</html>

三、模板写入script的原因

  • 如果写入到JS变量中，维护不方便，不能换行，没有着色
  • 写入到script标签中，innerHTML不会显示在界面上
  • 注意：script标签里如果type类型不是text/JavaScript，标签内容不会安装js文件执行

四、参考:JavaScript模板引擎实例应用

 

posted @ 2018-06-26 14:36  澎湃_L  阅读(1149)  评论(0)  编辑  收藏  举报