layui实现同页面显示多种时间样式

介绍

在网页中，时间戳的显示是一个非常常见的需求，但是不同的场合需要的时间格式也不同，比如有时候需要精确到秒，有时候需要更加友好的时间显示方式。本文介绍如何利用layui实现同页面显示多种时间样式的功能。

利用Layui的laytpl模块

laytpl模块简介

layui是一个基于jQuery的模块化前端UI框架，内部自带了一个laytpl模块，可以用于实现模板引擎的功能。laytpl的具体用法和其他模板引擎类似。

实现原理

在模板中声明好时间显示的格式，而后通过laytpl模块进行模板渲染。需要注意的是，模板中要使用对应的日期格式符，否则渲染出来的时间格式会不对。

<div class="time-container">

  {{# if (timestamp != 0) { }}
    <div>{{ layui.laytpl.toDateString(timestamp, "yyyy-MM-dd hh:mm:ss") }}</div>
  {{# } }}
  <div>{{ layui.laytpl.toFriendlyDateString(timestamp) }}</div>
</div>

上面的代码片段就是一个模板，在模板中声明了两种时间显示格式，一种是精确到秒的日期格式（yyyy-MM-dd hh:mm:ss），一种是更加友好的时间显示方式。在实际使用中，可以根据实际需求传入不同的timestamp参数，laytpl模块会根据模板渲染出相应的HTML代码。

具体实现过程

HTML结构

首先需要在HTML页面中定义好模板的代码结构，一般可以放在一个隐藏的div中，例：

<div id="time-template" style="display: none;">

  <div class="time-container">
    {{# if (timestamp != 0) { }}
      <div>{{ layui.laytpl.toDateString(timestamp, "yyyy-MM-dd hh:mm:ss") }}</div>
    {{# } }}
    <div>{{ layui.laytpl.toFriendlyDateString(timestamp) }}</div>
  </div>
</div>

渲染HTML代码

利用laytpl模块渲染HTML代码，将渲染好的HTML代码插入到需要显示时间的位置。可以通过jQuery等工具库来获取到相关dom节点。

例：

// 获取模板节点

var tpl = $('#time-template').html();
// 渲染HTML代码
var html = layui.laytpl(tpl).render({timestamp: 1524473977782});
// 将HTML代码插入到页面中指定的位置
$('#container').html(html);

上面的代码中，timestamp是需要显示的时间戳，可以根据实际需求进行传递。利用laytpl模块渲染模板生成的HTML代码，将其插入到指定的容器元素中即可。

完整代码

以下是一个完整的示例代码，用于展示如何利用layui实现同页面显示多种时间样式的功能：

<div id="time-template" style="display: none;">

  <div class="time-container">
    {{# if (timestamp != 0) { }}
      <div>{{ layui.laytpl.toDateString(timestamp, "yyyy-MM-dd hh:mm:ss") }}</div>
    {{# } }}
    <div>{{ layui.laytpl.toFriendlyDateString(timestamp) }}</div>
  </div>
</div>
<!-- 需要显示时间的位置 -->
<div id="container"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://www.layuicdn.com/layui/layui.all.js"></script>
<script>
  // 获取模板节点
  var tpl = $('#time-template').html();
  // 渲染HTML代码
  var html = layui.laytpl(tpl).render({timestamp: 1524473977782});
  // 将HTML代码插入到页面中指定的位置
  $('#container').html(html);
</script>

上面的代码会将时间戳1524473977782渲染为如下形式的HTML代码：

<div id="container">

  <div class="time-container">
    <div>2018-04-23 14:46:17</div>
    <div>1天前</div>
  </div>
</div>

可以看到，显示了两种不同的时间格式。

总结

利用Layui的laytpl模块可以非常方便地实现同页面显示多种时间样式的功能，其原理在于将需要显示时间的节点嵌入到模板中，用laytpl模块进行渲染后插入到页面中。需要注意的是，模板中要使用对应的日期格式符，否则渲染出来的时间格式会不对。

完整代码已经提供，读者可以自行实践尝试。