art-template--模板引擎

对于传统的渲染通过字符串的形式进行，但是如果UI结构比较复杂的话，则拼接字符串的时候需要格外注意引号之间的嵌套，且一旦需求发生变化，修改起来也非常麻烦，于是乎就可以用模板引擎来替代传统的方法

模板引擎，顾名思义，就是可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面

官网地址：art-template

模板引擎的优势：

减少了字符串的拼接操作

代码结构更清晰

使代码更易于维护和阅读

标准语法：

atr-template 提供了 {{}} 这种语法格式，在 {{}} 内可以进行变量输出，或循环数组等操作，这种 {{}} 语法在 atr-template 中被称为标准语法

原文输出：{{@ value}}

如果要输出的 value 值中，包含了HTML标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染

条件输出：

如果要实现条件输出，则可以在 {{}} 中使用 if...else if ... /if 的方式，进行按需输出

    <div>

      {{if flag === 0}}

      flag的值是0

      {{else if flag === 1}}

      flag的值是1

      {{/if}}

    </div>

循环输出：

  {{each arr}}

        {{$index}} {{$value}}

{{/each}}

过滤器：

本质就是一个 function 函数

语法：{{value | filterName}}

过滤器语法类似 管道操作符 ，它的上一个输出作为下一个输入

定义过滤器的基本语法如下：

template.defaults.imports.dateFormat = function (value) {...}

示例：

  <!-- 1. 导入模板引擎 -->
  <!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
  <script src="./js/template-web.js"></script>
  <script src="./js/jquery.js"></script>

  <div id="container"></div>

  <!-- 3. 定义模板 -->
  <!-- 3.1 模板的 HTML 结构，必须定义到 script 中 -->
  <script type="text/html" id="tpl-user">
    <h1>{{name}}    ------    {{age}}</h1>
    {{@ test}}

    <div>
      {{if flag === 0}}
      flag的值是0
      {{else if flag === 1}}
      flag的值是1
      {{/if}}
    </div>

    <ul>
      {{each hobby}}
      <li>索引是:{{$index}}，循环项是:{{$value}}</li>
      {{/each}}
    </ul>

    <h3>{{regTime | dateFormat}}</h3>
  </script>

  <script>
    // 定义处理时间的过滤器
    template.defaults.imports.dateFormat = function (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()

      return y + '-' + m + '-' + d
    }


    // 2. 定义需要渲染的数据
    var data = { name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date() }

    // 4. 调用 template 函数
    var htmlStr = template('tpl-user', data)
    console.log(htmlStr)
    // 5. 渲染HTML结构
    $('#container').html(htmlStr)
  </script>

 

示例2：新闻列表

实现步骤：

• 获取新闻数据
• 定义 template 模板
• 编译模板
• 定义时间过滤器
• 定义补零函数

    <link rel="stylesheet" href="./assets/news.css">
    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <script src="./js/news.js"></script>

.news-item {
  display: flex;
  border: 1px solid #eee;
  width: 700px;
  padding: 10px;
  margin-bottom: 5px;
}

.thumb {
  display: block;
  width: 230px;
  height: 140px;
  background-color: #ccc;
  margin-right: 10px;
}

.right-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  flex: 1;
}

.title {
  font-size: 20px;
  font-weight: normal;
}

.tags span {
  display: block;
  float: left;
  background-color: #F0F0F0;
  line-height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  margin-right: 8px;
}

.footer {
  display: flex;
  justify-content: space-between;
}

    <div id="news-list">
      <!-- <div class="news-item">
        <img class="thumb" src="" alt="" />
        <div class="right-box">
          <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
          <div class="tags">
            <span>三大运营商</span>
            <span>中国移动</span>
            <span>5G商用</span>
          </div>
          <div class="footer">
            <div>
              <span>胡润百富</span>&nbsp;&nbsp;
              <span>2019-10-28 10:14:38</span>
            </div>
            <span>评论数：66</span>
          </div>
        </div>
      </div> -->
    </div>

    <!--定义模板-->
    <script type="text/html" id="tpl-news">
      {{each data}}
      <div class="news-item">
        <img
          class="thumb"
          src="{{'http://www.liulongbin.top:3006'+$value.img}}"
          alt=""
        />
        <div class="right-box">
          <h1 class="title">{{$value.title}}</h1>
          <div class="tags">
            {{each $value.tags}}
            <span>{{$value}}</span>
            {{/each}}
          </div>
          <div class="footer">
            <div>
              <span>{{$value.source}}</span>&nbsp;&nbsp;
              <span>{{$value.time | dateFormat}}</span>
            </div>
            <span>评论数：{{$value.cmtcount}}</span>
          </div>
        </div>
      </div>
      {{/each}}
    </script>

$(function () {
  //定义补零函数
  function padZer(n){
    if(n < 10){
      return '0' + n;
    }else{
      return n;
    }
  }


  //定义格式化时间的过滤器
  template.defaults.imports.dateFormat = function(dtStr){
    let dt = new Date(dtStr);
    let y = dt.getFullYear();
    let m = padZer(dt.getMonth() + 1);
    let d = padZer(dt.getDay());
    let hh = padZer(dt.getHours());
    let mm = padZer(dt.getMinutes());
    let ss = padZer(dt.getSeconds());

    return y + '-' + m + '-' + d + ' ' +  hh + ':' + mm + ':' + ss;
  };

  //获取新闻列表数据
  function getNewsList(){
    $.get('http://www.liulongbin.top:3006/api/news',function(res){
      if(res.status !== 200){
        return alert('请求失败');
      }

      for(let i = 0;i < res.data.length;i++){
        //将每一项的 tags 属性，从字符串改造成数组
        res.data[i].tags = res.data[i].tags.split(',');
      }

      // console.log(res.data);
      let htmlStr = template('tpl-news',res);
      $("#news-list").html(htmlStr);
    })
  }
  
  getNewsList();
})