AJAX——模板引擎

最新推荐文章于 2023-04-17 16:35:08 发布

云中自有锦书

最新推荐文章于 2023-04-17 16:35:08 发布

阅读量372

点赞数 1

分类专栏： AJAX 文章标签：模板引擎

本文链接：https://blog.csdn.net/weixin_41282726/article/details/99195260

版权

模板引擎

是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

为什么要使用模板引擎

我们通过ajax获取到数据后，需要把数据渲染到页面，在学习模板引擎前，我们的做法是大量的拼接字符串，对于结构简单的页面，这么做还行

但是如果页面结构很复杂，使用拼串的话代码可阅读性非常的差，而且非常容易出错，后期代码维护也是相当的麻烦。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="user">
    <p>姓名: xx</p>
    <p>年龄: xx</p>
    <p>性别: xx</p>
    <p>描述: xx</p>
  </div>
  <script>   
    // 找对象
    var user = document.getElementById("user");

    // 从后台通过 ajax 获取数据
    var obj = {
      name: "小王",
      age: 18,
      sex: "男",
      desc: "猥琐"
    }
    // 字符串拼接
    var htmlStr = " <p>姓名: " + obj.name + "</p> " +
                  " <p>年龄: " + obj.age + "</p> " +
                  " <p>性别: " + obj.sex + "</p> " +
                  " <p>描述: " + obj.desc + "</p> ";
    user.innerHTML = htmlStr;
    // 缺点:
    // 1. html标签代码 和 js 代码混在一起, 代码冗余
    // 2. 字符串拼接非常麻烦, 维护起来不方便
  </script> 
</body>
</html>

总结来说拼串渲染两大缺点：

js中大量充斥着 html 结构拼串代码，很冗余，可读性差
字符串拼接很麻烦，且维护起来也很麻烦，容易出错

常见的模板引擎

BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/

velocity.js：

最低0.47元/天解锁文章

云中自有锦书

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX——模板引擎

模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。为什么要使用模板引擎我们通过ajax获取到数据后，需要把数据渲染到页面，在学习模板引擎前，我们的做法是大量的拼接字符串，对于结构简单的页面，这么做还行但是如果页面结构很复杂，使用拼串的话代码可阅读性非常的差，而且非常容易出错，后期代码维护也是相当的麻...
复制链接

扫一扫